GoKawiilA watercolor simulator in one HTML file — the inspiration, the fluid dynamics, and the rendering tricks behind inkwash , with live demos throughout.
01 inspiration
A waterbrush is a nylon brush with a squeezable water reservoir in the handle, which I find a lot more practical than carrying around jars of water and traditional brushes. Inkwash’s brush mode is essentially a simulated waterbrush.
I love nature journaling. Over time I've developed a style and approach that I like for capturing sketches quickly, using a Pilot G2 pen in combination with a waterbrush. This lets me add linework and shading simultaneously (I dual wield with the brush in my left hand) and forces me not to be too precious about the final result - there will inevitably be smudges and imperfections, and there is no undo with pen!
This project began as a test of Anthropic's new model Claude Fable 5, and grew once I saw the potential to actually recreate that experience in a browser. I love the final result!
Example sketches from my notebooks, from fast flamingo figure-drawings to more finessed fan-art fun.
Of course, I'm left in a rather funny position: I've 'created' this app, but I haven't actually touched the code! I can read it (it's a rather nice, self-contained single HTML file) since I have experience with the underlying technologies. But I'm hoping that this app is interesting to many people who *aren't* webGL nerds, and so for the sake of all of our collective understanding I've had Fable spin up some interactive demos to illustrate the concepts. You are also welcome to check out the prompts I used to conjure this app into being.
Disclaimer: While I've tidied up a bit, the rest of this article contains plenty of AI-witten prose. I don't like AI writing as a rule, especially undisclosed! Hopefully you can forgive me in this case, since (with some iteration) the AI actually did a pretty good job showing all the key pieces. Over time I might refactor and reorganise it to be more in line with my personal sensibilities, but no promises :)
02 three sheets of state
Under the canvas, the painting is not pixels — it’s a small stack of floating-point textures, ping-ponged through about a dozen WebGL2 fragment shaders every frame. Think of them as transparent sheets laid over each other:
... continue reading