Adding custom shaders to hydra synth

Bruce LANE — Wed, 10 Jul 2019 08:06:17 +0000

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:

vec2 st = _st * 2. - 1.;
float a = atan(st.x,st.y)+3.1416;
float r = (2.*3.1416)/sides;
float d = cos(floor(.5+a/r)*r-a)*length(st);
return vec4(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 from https://github.com/ojack/hydra and run it locally:

setup nodejs
in the cloned folder, run npm i
then run npm start
open https://localhost:8000 in your browser One 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 the https://github.com/ojack/hydra-synth repo
git clone your fork in the node_modules You 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: `vec4 plas( in vec2 v, float fft ) {
float c = sin( v.x * 1000.0 * fft) + cos(sin(time+v.y)*20.);
return vec4(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: `vec4 plasma(vec2 _st, float fft) {
vec2 uv = -1.0 + 2.0 *_st;
uv.x *= resolution.x/resolution.y;
vec2 m;
m.x = atan(uv.x/uv.y)/3.14;
m.y = 1./length(uv)*.2;
float d = m.y;
float f = fft;
m.x += sin(time)*0.1;
m.y += time*0.25;
vec4 t = plas(m*3.14, fft)/d;
return vec4(f+t);
}
`
},

Save your file, refresh the browser page then type

plasma(0.002).out()

DEV Community: Bruce LANE

Adding custom shaders to hydra synth