Code Nodes

Render live GLSL shaders, JavaScript drawings, or math plots to an image.

Magerie only. Not in Magerie Draft.

Like making images by writing a bit of code? Three nodes: GLSL, JavaScript, and Plot. Each has an editor on the node with inline errors. Wire the render output into a Renderer 2D node to turn it into an image the rest of the board can use.

GLSL / JavaScript / Plot  ->  Renderer 2D  ->  filters, Export, ...

Press Play in the title bar so anything time-based runs.

GLSL#

Shadertoy-style fragment shaders. Paste a single-pass Shadertoy snippet as-is, or write the short form:

//@resolution 480x360

void main() {
    vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0.0, 2.0, 4.0));
    writeOutput(vec4(col, 1.0));
}

iTime, iResolution, iMouse, uv, fragCoord are there. Recompiles as you type.

JavaScript#

A Canvas2D drawing surface plus the whole node library as functions. Declare outputs at the top, draw in a callback:

//@output renderer2d out 480x360

let { noise } = magerie.generators
let tex = noise("simplex", 3, { width: out.width, height: out.height })

out.draw((ctx, time) => {
    ctx.drawImage(tex, 0, 0, out.width, out.height)
    ctx.fillStyle = `hsl(${time * 40}, 70%, 60%)`
    ctx.fillRect(40, 40, 60, 20)
})

Press Run on the node, or Play in the title bar. magerie.generators, magerie.ops, magerie.anim, and magerie.text autocomplete in the editor: noise, gradients, shapes, every blend mode, blur, levels, warp, easing curves, springs. //@output image <name> gives a finished image output. //@output float <name> drives a slider downstream.

Plot#

A live grapher. One equation per line.

//@xrange -3..3
//@yrange -1.5..1.5

y = sin(2 * x)
y = x^2 / 4

Inputs#

Declare ports at the top of GLSL or JavaScript. Wire something in and read it by name. Plot takes no inputs.

//@input image src
//@input float strength 0..2 = 1
//@input color tint = #ffaa00

image, float (with an optional slider range and default), vec2 to vec4, color. In GLSL sample an image as src(uv). In JavaScript read src.value.

Where to next#