Learning p5.js week one: Paper marbling algorithm

This week starts my first experiment with p5.js. The subject for today is the paper marbling algorithm, based in the implementation explained in this video by The Coding Train.

Paper marbling, as defined by Wikipedia, is:

[...] a method of aqueous surface design, which can produce patterns similar to smooth marble or other kinds of stone.

In this context, the algorithm is a way to recreate that effect digitally: a simulation of ink swirling across a virtual surface.

How It Works #

To bring that idea into code, the script simulates the process of dropping colored ink onto a virtual surface and shaping it into marbled patterns. Each ink drop is represented by a set of vertices forming a circle. When new drops interact, they distort each other using a geometric transformation that mimics how fluids displace ink on water.

Dragging the mouse adds "tines", brush-like waves that pull and stretch the surface in a given direction. The deformation strength fades with distance, creating the rippled lines typical of marbled paper.

All the parameters (color palette, drop sizes, and deformation strength) can be tweaked through simple UI elements. It's a surprisingly compact sketch for how organic the results look.

Final result #

References #