Show HN: Inkwash, a watercolor sketching app and explanation
a day ago
- #Watercolor Simulation
- #WebGL2
- #Creative Coding
- The author loves nature journaling with a Pilot G2 pen and waterbrush, embracing imperfections.
- Inkwash is a browser-based watercolor simulation created with AI assistance, using a single HTML file with WebGL2.
- The simulation uses a stack of floating-point textures (ink, fixed, wet, velocity, pressure) processed through fragment shaders each frame.
- Fluid motion is based on Jos Stam's Stable Fluids algorithm, using semi-Lagrangian advection for stability.
- The wetness field controls simulation behavior: velocity and pigment mobility are restricted to wet areas, and drying turns fluid into a painting.
- Strokes are made with Gaussian splats, blending additively for ink and using MAX blending for water to prevent flooding.
- Black ink separation occurs because pigment is stored as per-channel optical density, allowing dyes to diffuse at different rates.
- The 'fix' function transfers mobile pigment to a fixed layer, enabling layering without reviving dried washes.
- White gouache is stored in the alpha channel and bleaches underlying ink when fixed, mimicking opaque paint.
- The display shader uses the Beer-Lambert law to render pigment as light absorption, creating realistic watercolor effects.
- Input mappings vary by device: Apple Pencil and finger on iPad, stylus barrel button on tablets, Force Touch on Mac trackpads.
- The author reflects on the ease of creating this software with AI compared to previous webGL projects, encouraging others to pursue their own ideas.