Creative coding for beginners: make a rule draw

A rule you can draw by hand

A creative coding project becomes manageable when you can describe its rule without naming software. Imagine twelve circles whose sizes increase across a page. That sentence gives you an object, a count, and a relationship. Begin there, rather than collecting libraries or trying to reproduce an elaborate artwork.

Place circles with one indexed rule

Open the p5.js editor and create a square canvas. Draw one circle at the center before adding a loop. Let an index run from zero to eleven; calculate horizontal position from that index, and use the same index to increase diameter. Keep every circle inside a generous border.

Make circle count explicit in the working notes before building the full piece. Begin with the smallest version that demonstrates the proposed relationship. Remove secondary decoration while checking its construction. A tiny proof makes incorrect assumptions visible before they multiply across the finished work. A useful acceptance check is whether the growth rule remains visible without overlapping neighbors. Judge that at the intended viewing size or working distance, where tiny construction mistakes and exaggerated effects can have very different consequences.

Check centers, diameters, and loop bounds

If nothing appears, temporarily replace calculated coordinates with fixed numbers. If circles overlap unexpectedly, check the difference between their centers against their diameters. A loop that includes its upper bound produces an extra circle; count the actual iterations before adjusting the artwork to hide it.

When the result becomes confusing, return circle count to its recorded starting point. Temporarily show construction points and intermediate values. Reduce repeated elements to a handful and pause anything that changes over time.

Reverse the size and spacing progressions

Rewrite the rule so size decreases while spacing increases. Make this change with equations rather than twelve separate drawing commands. Sketch your expected result on scrap paper first. The gap between prediction and output will tell you more than pressing refresh repeatedly.

Make three comparison versions using 6, 12, and 24 circles. Choose one visible feature to compare before starting. Inspect it across the entire set rather than letting the most dramatic result dictate the criterion afterward. Keep both a preferred version and a useful failed version, with a short note describing the difference between their behavior.

Keep diameters and centers separate

For a 480-pixel-wide proof, place centers at x = 40 + i × 34 and y = 160 for indices zero through eleven. Let diameter equal 8 + i × 2. The final center is 414 and the final radius is 15, so the last circle remains inside the canvas. Checking center plus radius catches a common mistake: treating the diameter as the distance from the center to the edge.