Custom uniforms
Declare a uniform and a control for it appears under the canvas. The comment
sets the range,
= sets the starting value, and
color
swaps a vec3's three sliders for a colour picker.
uniform float speed; // 0.0 .. 4.0 = 1.5
uniform int steps; // 1 .. 64 = 24
uniform bool shadows;
uniform vec2 centre; // -1.0 .. 1.0
uniform vec3 tint; // color
Buffer
The Buffer tab holds a second
mainImage that draws to an offscreen
texture instead of the screen. Both passes compile together, and either can
read the result by pointing an iChannel at
Buffer. Read it from
Buffer's own shader and you get
last frame — which is what makes
trails, feedback and simulations possible.
Keyboard
Click the canvas first, or you'll just be typing into the editor. The texture is
256×3: a column per key, and a row each for held, pressed-this-frame and
toggled.
float held = texture(iChannel0, vec2(KEY/256.0, 0.5/3.0)).x;
float pressed = texture(iChannel0, vec2(KEY/256.0, 1.5/3.0)).x;
float toggled = texture(iChannel0, vec2(KEY/256.0, 2.5/3.0)).x;
// KEY is the old keyCode: 32 space, 37-40 arrows, 65-90 A-Z, 48-57 0-9
Voronoi
Three fields packed into channels.
float cell = texture(iChannel0, uv).r; // distance to the nearest point
float border = texture(iChannel0, uv).g; // margin to the second nearest
float id = texture(iChannel0, uv).b; // flat random, one per cell
Bilinear filtering suits the distances but incorrectly blends cell ids for
.b. Use
texelFetch for exact ones.
Share links
Shader code is comressed and written after the
#, so nothing is stored on the server.
