I enjoy live-coding visuals with Hydra from Olivia Jack at events.

You can try it online here :https://hydra-editor.glitch.me/

This open source software allows to reduce the code to type with built-in functions that translate to glsl, the shading language your gpu understands.

Audience could be bored while typing long lines of glsl, for example for a shape function:

vec2st=_st*2.-1.;floata=atan(st.x,st.y)+3.1416;floatr=(2.*3.1416)/sides;floatd=cos(floor(.5+a/r)*r-a)*length(st);returnvec4(vec3(1.0-smoothstep(radius,radius+smoothing,d)),1.0);

Hydra allows to type only:

shape(3.0,0.3,0.01)

Hydra comes with a lot of functions already, which are chainable, like

osc(322).color(0.5,0,0).add(shape(2).color(2,2,2).scale(0.006).rotate(0.000001)).modulate(noise(()=>a.fft[1]*10+0.01).scale(5,0.1)).scale(1.2,1,3).out()

But what if you want to add your custom shaders or use some from shadertoy.com ?

To modify the source code, you have to clone it fromhttps://github.com/ojack/hydra and run it locally:

• setup nodejs
• in the cloned folder, run npm i
• then run npm start
• openhttps://localhost:8000 in your browserOne of the modules in the outrageously large node_modules folder is hydra-synth, which contains the files you need to modify.

Tip: if you want to keep your modifications of the code, I suggest you:

• delete the hydra-synth folder
• make a fork of thehttps://github.com/ojack/hydra-synth repo
• git clone your fork in the node_modulesYou can now add your glsl functions to src/composable-glsl-functions.js inside blocks {}, separated with a comma.

I use two types of blocks:

• type: ‘src’ for functions which can be used in the hydra editor
• type:’util’ for functions which are utility functions for your ‘src’ function

Example: adding a plasma function:

plas:{type:'util',glsl:`vec4plas(invec2v,floatfft){floatc=sin(v.x*1000.0*fft)+cos(sin(time+v.y)*20.);returnvec4(sin(c*0.2+cos(time)),c*0.15,cos(c*0.1+time/.4),1.0);}`},plasma:{type:'src',inputs:[{name:'fft',type:'float',default:0.0}],glsl:`vec4plasma(vec2_st,floatfft){vec2uv=-1.0+2.0*_st;uv.x*=resolution.x/resolution.y;vec2m;m.x=atan(uv.x/uv.y)/3.14;m.y=1./length(uv)*.2;floatd=m.y;floatf=fft;m.x+=sin(time)*0.1;m.y+=time*0.25;vec4t=plas(m*3.14,fft)/d;returnvec4(f+t);}`},

Save your file, refresh the browser page then type

plasma(0.002).out()