Swirl 2012

Click and drag to draw. Press ‘c’ to clear.

An experimental dynamic paint brush, built with WebGL shaders. Works in modern browsers.

Implementation

Each vertex of your brush stroke travels along a small circle, each adjacent vertex’s circle is only slightly out of phase with the last, causing apparently more complex undulating structure.

The offset position calculations occur in parallel in the vertex shader. This is the entire vertex shader:

uniform float t;
uniform float w;
uniform float h;
attribute vec2 vPosition;
attribute float tOff;
void main() {
    vec2 p = vPosition;
    float tval = t-tOff;
    p = p + vec2(10.0*cos(tval/200.0*3.14159)-10.0,
            10.0*sin(tval/200.0*3.14159));
    gl_Position = vec4(2.0*p.x/w - 1.0,
            -2.0*p.y/h + 1.0,
            0,1);
}

The important line here is line 9: this offsets the input vertex around a 10px circle with a period of 400 frames. The tOff value is the offset that ensures that the whole picture does not swirl with the same phase.