Popped in Pasta & Provisions to grab some ingredients for risotto one night when this ceramic olive oil bottle by Frantoio Falantino caught my eye. The splattered, irregular-shaped cerulean blue paint drops scattered across the bottle stood out to me. The day after, I tried recreating it with generative art, and in doing so, I developed a script that captures the randomness of hand-painted splatter patterns using HTML5 Canvas.
One of the key components of this script is how it draws brushstrokes, which is achieved using a series of overlapping ellipses. The function drawBrushStroke(x, y, width, height) starts by randomly rotating the stroke for a more natural feel, then applies a linear gradient that fades out at the edges (gradient.addColorStop(1, ${colour}50)) to replicate the uneven pressure of a real paintbrush. Inside the beginPath() function, the script loops three times to create a series of ellipses, each slightly offset in position and angle. These ellipses form the illusion of thin, layered strokes, rather than a single, rigid shape. By keeping the strokes semi-randomized and allowing slight distortions in width and height, the result is an organic, freeform mark that mimics the natural bristle texture of a paintbrush.
Altogether, I’m thrilled with how this turned out. The layered approach, randomized distortions, and brushstroke effects give the piece an organic, freeform quality that closely resembles the ceramic bottle’s distinctive splatter pattern. The use of ellipses rather than a single solid shape creates a more nuanced, textured effect, reinforcing the spontaneity of real paint application. The process of translating a physical design into generative art was both a challenge and a fun exploration of
