36 / wfmag.cc
Live coding and ray marchingToolbox
Figure 1: In ray marching, a
ray is cast from every pixel,
and pixels are coloured
according to what they hit.
The camera is there to
determine the angle at
which the rays are cast.
hat’s at the intersection
of raving and low-level
computing? Algoraves! At an
algorave, the music and
visuals are all algorithmically
generated and often live-coded, which means
during a performance, a programmer will write
the code that produces the music or visuals as
well as projecting their code for the audience
to enjoy. In contrast to static programming,
live coding has
the ephemeral,
collaborative, and
reactive nature of live
performance. Because
there’s instantaneous
compilation, it becomes
a tool that you can use intuitively – it can lead
to surprising results, because the development
environment is fluid and spontaneous itself.
This article will walk you through a technique
of programming interesting visuals that lend
themselves to live coding shaders. The rendering
method is called ray marching. This is very close
to ray tracing; the difference is that ray marching
uses a contained and mathematical way to
describe a 3D scene, while ray tracing is a more
general technique that lots of rendering platforms
use, like Nvidia’s RTX. They’re both physically
based, in that you follow a ray the same way
photons of light bounce around in the real world.W
All code in this walkthrough is written in GLSL
(OpenGL Shading Language), which is a C-syntax
language executed on the GPU. Specifically,
we’re coding a fragment shader. You can apply
these concepts to any language that can spit
out an array of colours. For example, you could
write it in Python with no renderer, and then
hand a 2D array of numbers corresponding
to colours to your kid cousin and tell them
to colour in a grid, with each number
corresponding to the
numeric values. If you
do that, you can tell
your kid cousin they’re a
rendering machine, and
congratulate them for
their efforts.
Of all the different ways to render a ray-
marched image, I prefer live coding, and the
best live coding tool I’ve come across is KodeLife
by Hexler. Whenever I teach live coding GLSL
workshops, the participants are advised to
download KodeLife, because there’s no setup
for desktop, it just works out of the box on Mac,
Windows, Linux, and Raspberry Pi.
As Figure 1 illustrates, ray marching
consists of:-^ Creating a 3D scene out of signed distance
functions (I’ll go over what those are in
a moment)
“At an algorave, the
music and visuals are all
algorithmically generated
and often live-coded”Coding shaders can also be a performance.
Char shows you how to write a basic ray
marching renderer in a live environmentLive coding and
ray marching
AUTHOR
CHAR STILES
Char Stiles is a researcher and computational-artist-in-
residence at the Frank-Ratchye STUDIO for Creative Inquiry
at Carnegie Mellon University. CharStiles.comDownload
the code
from GitHub:
wfmag.cc/
wfmag20