back-projected hydra installation for an ambient music event

i last-minute* mocked up some background visuals for a party featuring ambient music. (i kept them running all night (12 hours) on a backlit screen near the dj booth and never really had to tune them. they were interesting enough to be entertaining while focused on, but didn’t dominate the space).

i took a simple existing function from the hydra library and added a few lines for audioreactivity (color and distortion); black background was key to keep this looking more subdued and adding some forgiveness to the projected edges.

i was aiming for something like a tv-static vectorscope.

(*i had to spend most of my time rigging the mylar tent enclosure designed to keep heat in for guests)

shape(1,1)
  .mult(voronoi(()=>a.fft[1]*1000,2)
  .blend(o0).luma())
  .add(shape(3,0.125)
       .rotate(1,1).mult(voronoi(1000,1).luma())
       .rotate(1.5)).scrollX([0.1,-0.0625,0.005,0.00001],0)
  .color(()=>a.fft[0]+.2,()=>a.fft[1]+.5,[1,.5])
  .modulate(noise(()=>3+1/a.fft[0]))
  .scale(1.5)
  .out()

during the night someone asked me about i constructed “this shader”. i realized i don’t understand how hydra actually renders this to browser, and endeavored to do some research on it later this week.

…so, yes it makes sense that hydra is built on shaders. the glsl for all the generator functions is in hydra-synth/src/glsl/glsl-functions.js.

for example, voronoi() is defined as

vec3 color = vec3(.0);
   // Scale
   _st *= scale;
   // Tile the space
   vec2 i_st = floor(_st);
   vec2 f_st = fract(_st);
   float m_dist = 10.;  // minimun distance
   vec2 m_point;        // minimum point
   for (int j=-1; j<=1; j++ ) {
   for (int i=-1; i<=1; i++ ) {
   vec2 neighbor = vec2(float(i),float(j));
   vec2 p = i_st + neighbor;
   vec2 point = fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
   point = 0.5 + 0.5*sin(time*speed + 6.2831*point);
   vec2 diff = neighbor + point - f_st;
   float dist = length(diff);
   if( dist < m_dist ) {
   m_dist = dist;
   m_point = point;
   }
   }
   }
   // Assign a color using the closest point position
   color += dot(m_point,vec2(.3,.6));
   color *= 1.0 - blending*m_dist;
   return vec4(color, 1.0);

however this isn’t the same output as console.log(voronoi().glsl()[0]) … ? still, i have a much better idea now of what the generator functions are actually doing.

my mind is kind of blown rn by finding out that i can use glsl in hydra. it’s hard for me to fathom how i could creatively use this low-level, though… it feels like it would be too cumbersome to do things quickly. i think maybe writing some custom glsl functions for things i want to do and then using those higher-level functions in hydra makes more sense for my use-case.