Studies in algorithmically generated visual structures inspired by flow, field, and symmetry
Year : 2025
Author : Chan Yen Fen
Medium : JavaScript(P5JS)


This is a computer-generated drawing algorithm inspired by Rafael Araujo’s meticulous geometric compositions, which he constructs using only a compass and straightedge. The algorithm pays homage to the precision and elegance of hand-drawn geometry through code.
Through noise and manipulation of the planar field, delicate strokes—like those of a light pencil—layer continuously. The uneven weight and density of lines gradually evoke a sense of three-dimensional depth. Unlike Rafael Araujo, who achieves geometric precision through countless compass-and-ruler lines, this algorithm operates with a fixed logic but ever-changing parameters, embracing controlled randomness as its drawing principle.




Sample code is shown below, or…
create your own generative sketch by clicking here.
// ---------------------------
// Flow Field Function
// This generative drawing system uses tileable Perlin noise to produce a flow field,
// which guides particles in radial symmetry.
// The motion is visualized via mirrored trail rendering,
// inspired by traditional ornamental forms but generated algorithmically.
function updateFlowField() {
let yoff = 0;
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
let idx = x + y * cols;
let bias = (x - cols/2) * 0.05;
let angle = noise(x, y, zoff) * TWO_PI * 3 + bias;
flowfield[idx] = p5.Vector.fromAngle(angle).setMag(0.5);
}
yoff += 0.5;
}
zoff += 0.001;
}