Synesthesia Quick Tip: JavaScript Variables

2023-10-05T01:33:30

The JavaScript layer in Synesthesia is ridiculously useful, and the least familiar aspect for those coming from ShaderToy. In the future I\’d like to do a full article and/or video on this, but for now here\’s a simple recipe to follow for your script.js file:

// declaring an object
Something() {
    this.x = 0
    this.y = 0
    this.z = 0
}
// giving the object a function to call each frame
Something.prototype.tick = function() {
    // determine how the variables should change in each frame
    delta = {
        x: syn_level,
        y: syn_BassLevel,
        z: syn_HighHits
    }
    // apply changes
    this.x += delta.x
    this.y += delta.y
    this.z += delta.z
}
// instantiate our object
var something = new Something();
// pass our object instance to the built in variable `uniforms`
uniforms.something = something;

// the `update()` function runs once each frame, Synesthesia requires this
function update(data) {
    // call our `tick()` function on our object instance
    something.tick();
}

Now in the main.glsl file we can reference these variables as a vec3 like so:

float something_x = something.x;
vec2 something_xy = something.xy;
// using a sin() fxn to keep the results within the [0-1] range
vec3 color = sin(something); 

This really only scratches the surface but if you have JavaScript knowledge/experience then this should open up whole worlds for you 🙂