Drawing Computational Cousins
Overview
I’ve always been drawn to characters that share the same building blocks, but are proportioned or colored differently. I think of them as cousins: different, yet cohesive. It comes naturally to me to appreciate the cousin-ness of things.
Perhaps this is why, when I encountered procedural art for the first time in 2018, the concept just clicked. Someone online had shared a grid of a hundred cartoony faces, each drawn using a single algorithm. They all shared a computational grandmother, yet they were different, like cousins.
For fun, I'll write a bit about procedurally generated art and then demonstrate how to draw a grid of 2D cousins, step by step, with p5.js.
Role
Writing, design, code
Tools
p5.js
Year
2026
Procedural Drawing
Rule Based Drawing
Procedural art involves creating a system of programmatic rules that expresses what you want to draw. Most graphics software is fundamentally based in coordinate mathematics. What's drawn is drawn using something called a drawing context.
The Drawing Context
In real life, your hands are the input device and the drawing context might be a pen, paintbrush, highlighter, eraser, or even washi tape. Your brain sends signals to your hands that control the position and pressure of the drawing context, but there are also variables—like how shaky your hands are or the texture of the paper—that affect how the drawing context behaves.
Simple Polygons
The simplest thing to express programmatically is a polygon. Any simple polygon can be drawn by plotting equidistant points around a centroid, then connecting them. To draw slightly more complex shapes, like stars, you must alternate the distance from the center of every other point. And, irregular shapes can be drawn by randomizing the points' distance from the center.
Digital Paintbrush
Many digital paintbrushes are made procedurally by turning the drawing context into a stampable grid. Each point represents a bristle that can morph depending on the pressure, direction, or speed of the input. While a computer may not understand love, it can easily simulate physical scenarios involving direction, distance, and time.
Stippling
It can also assist with creating fill effects like stippling, which causes hand cramps. With procedural generation you can bypass the hand cramps by programming the rule: draw blobs that increase in size and density as they move away from the light source.
Drawing the head
Random thoughts
You might wonder why I wouldn't just use my hand to draw a bunch of polygons. Why go to the effort of programming all that?
Well, a lot of things seem pointless when you learn about them in isolation.
When I took a printmaking class, one week was dedicated to monoprinting, which involves painting an image on a nonporous surface before transferring it onto a porous one.
When I asked the teacher why we shouldn’t just paint the image directly onto the porous surface, she said because printmaking is all about the process. But later in the pottery studio, while failing to paint a chicken onto a curved pot, I realized how much easier it would be to tattoo it on with monoprinting.
It is simply a technique that requires some upfront setup to achieve your desired effect with less ongoing effort.
Video game artists may spend days designing the hero and villain, but they use procedural methods to generate the background NPCs because there is little value or fun in drawing hundreds of random citizens by hand. Even Jackson Pollock didn’t paint splatters dot-by-dot; he created a physical rule that swinging globby paint sticks around would generate thousands of unique splatters all at once.