Paper marbling is a printing technique for creating intricate patterns of colored ink. This is a mathematical simulation of the process similar to the approach researched by Jaffer et al.
- Drop: Click to add large or small dots of ink.
- Comb: Click and drag to pull a comb through the ink in a straight line.
- Spray: Click and hold to spray small dots everywhere.
- Smudge: Click and drag to distort the whole canvas. This one isn't a real-life paper marbling tool, but a bug turned into a feature!
Several preset colors are available, but you can click on the current color to choose your own.
The app is mostly a fragment shader (src/marble.frag) that takes a list of operations and draws them to a WebGL canvas. An operation is either a drop or comb pattern, as both spray and smudge are just variations of the other two. src/main.js is responsible for setting everything up, handling user input and running the animation.
Because the shader can only handle a limited number of operations, old operations that get pushed out of the list by new ones are drawn to a background texture. This texture can accumulate operations endlessly, but it doesn't look as crisp as the operations that are still on the list. You can see the difference between the background and foreground by changing which ones get displayed in the debug options in src/main.js.
I'm using Parcel to build everything in src into a hidden dist folder.
I used controlkit for the control panel UI.
I recommend The Book of Shaders if you want to learn how fragment shaders (and this project) work in detail.
Here is my website 😛