Keyboard Shortcuts

Ctrl+Enter - Execute shader code

F11 - Toggle fullscreen

H - Hide/show UI

R - Generate random shader

S - Share current shader (copy URL)

? - Show this help

Variables

x, y - Pixel coordinates

t - Time (enables animation)

i - Pixel index

mouseX, mouseY - Mouse position (0.0 to 1.0)

mousePressed - Mouse button down (true/false)

mouseVX, mouseVY - Mouse velocity

mouseClickTime - Time since last click (ms)

Touch & Gestures

touchCount - Number of active touches

touch0X, touch0Y - Primary touch position

touch1X, touch1Y - Secondary touch position

pinchScale - Pinch zoom scale factor

pinchRotation - Pinch rotation angle

Device Motion

accelX, accelY, accelZ - Accelerometer data

gyroX, gyroY, gyroZ - Gyroscope rotation rates

Audio Reactive

audioLevel - Overall audio volume (0.0-1.0)

bassLevel - Low frequencies (0.0-1.0)

midLevel - Mid frequencies (0.0-1.0)

trebleLevel - High frequencies (0.0-1.0)

Click "Enable Audio" to activate microphone

Operators

^ & | - XOR, AND, OR

<< >> - Bit shift left/right

+ - * / % - Math operations

== != < > - Comparisons (return 0/1)

? : - Ternary operator (condition ? true : false)

~ ** - Bitwise NOT, exponentiation

Math Functions

sin, cos, tan - Trigonometric functions

abs, sqrt, pow - Absolute, square root, power

floor, ceil, round - Rounding functions

min, max - Minimum and maximum

random - Random number 0-1

log, exp - Natural logarithm, exponential

PI, E - Math constants

Use without Math. prefix: sin(x) not Math.sin(x)

Value Modes

Integer (0-255): Traditional mode for large values

Float (0.0-1.0): Bitfield shader mode, inverts and clamps values

Polar (angle-based): Spiral patterns combining angle and radius

Distance (radial): Concentric wave rings with variable frequency

Wave (ripple): Multi-source interference with amplitude falloff

Each mode transforms your expression differently!

Advanced Features

Array indexing: [1,2,4,8][floor(t%4)]

Complex expressions: x>y ? sin(x) : cos(y)

Nested functions: pow(sin(x), abs(y-x))

Logical operators: x&&y, x||y

No character or length limits - use any JavaScript!

Shader Library

Hover over the right edge of the screen to access the shader library

Save shaders with custom names and search through them

Use edit to rename, del to delete

Render Modes

Classic - Original colorful mode

Grayscale - Black and white

Red/Green/Blue - Single color channels

HSV - Hue-based coloring

Rainbow - Spectrum coloring

Export

Export PNG - Save current frame as image