Nested Circles and Squares with p5.js

I’ve been getting into p5.js lately, and this little sketch is a nice first study in how a simple geometric rule can turn into something visually rich.

The idea is straightforward: start with a circle, draw the largest square that fits inside it, then draw the largest circle that fits inside that square. Keep alternating until the shapes get too small to matter. Because each next radius is derived from the previous square’s side length, the whole image becomes a clean nested rhythm of black circles and white squares against a blue field.

Alternating inscribed circles and squares

Sketch source

var canvasSizeX = 800;
var canvasSizeY = 800;
var centerX = canvasSizeX / 2;
var centerY = canvasSizeY / 2;

function setup() {
    createCanvas(canvasSizeX, canvasSizeY);
    stroke("black");
    strokeWeight(1);
    rectMode(CENTER);
    noLoop(); // draw only once
}

function draw() {
    background("blue");

    // Start with the outer circle radius
    let R = min(canvasSizeX, canvasSizeY) / 2; // circle radius

    // Draw alternating inscribed circle -> square -> circle -> ...
    while (R > 0.5) {
        // draw circle (diameter = 2*R)
        fill("black");
        circle(centerX, centerY, R * 2);

        // compute square side that has its corners on the circle: side = diagonal / sqrt(2)
        // diagonal = 2*R  => side = (2*R)/sqrt(2) = R * sqrt(2)
        let s = R * sqrt(2);

        // draw square centered
        fill("white");
        square(centerX, centerY, s);

        // next circle is the one inscribed inside the square: its radius = s/2
        R = s / 2;
    }
}
// helper functions removed -- drawing is done in `draw()` for clarity

What I like about sketches like this is that the code stays small enough to hold in your head, but the output still has a satisfying amount of structure. It is just one loop and one bit of geometry, but the repetition gives it a kind of depth.