Swirl 2012

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

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


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:

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.