Wireframe – Issue 20, 2019

38 / wfmag.cc

 The visual part of my AV
set with Pittsburgh
musician Danielle Rager

• or {arsonist}, as she’s
  known on stage. I’m
  using a simple Phong
  function to shade these
  ray-marched blobs.

uniform vec2 resolution;

varying vec3 v_normal;

varying vec2 v_texcoord;

// Define some constants

const int steps = 128;

// The maximum amount a ray can march.

const float smallNumber = 0.001;

const float maxDist = 10.;

// The maximum distance a ray can travel.

float scene(vec3 position){

// This is different from the sphere

// equation above in that I’m splitting the

// position into its three different

// positions and adding a 10th of a cos wave

// to the x position so it oscillates left

// to right and a (positive) sin wave to the

// z position so it will go back and forth.

float sphere = length(

vec3(

position.x + cos(time)/10.,

position.y,

position.z+ sin(time) +1.)

)-0.5;

// This is different from the ground

// equation because the UV is only

// between -1 and 1 we want more than 1/2pi

// of a wave per length of the screen so we

// multiply the position by a factor of 10

// inside the trig functions. Since sin and

// cos oscillate between -1 and 1, that

// would be the entire height of the screen

// so we divide by a factor of 10.

float ground = position.y + sin(position.x *

10.) / 10.

+ cos(position.z * 10.) / 10. + 1.;

// We want to return whichever one is

// closest to the ray, so we return the

// minimum distance.

return min(sphere,ground);

}

vec4 trace (vec3 origin, vec3 direction){

float dist = 0.;

float totalDistance = 0.;

vec3 positionOnRay = origin;

for(int i = 0 ; i < steps; i++){

dist = scene(positionOnRay);

// Advance along the ray trajectory the

// amount that we know the ray can travel

// without going through an object.

positionOnRay += dist * direction;

Live coding and ray marching

Toolbox

 A distorted torus
shape is given a fleshy
look by ray marching
to create translucency.

 Figure 3: This is what the code renders to.

The grey tone corresponds to how far the

ray needs to travel before hitting an object.

DEMOSCENE

Live coding visuals originated
in the demoscene, a community
of people who hold conventions
and competitions to code the
most impressive graphics
scenes (or demos) using the
smallest amount of code.
The demoscene stems from
people coding the graphics
version of a graffiti tag called
‘intros’ into the beginnings
of pirated video games.
Ray marching is a popular
technique in writing demos.