Circle Packing

Positioning the Circles

Similar to the Generative Agency Project, the coordinates of each circle are set by a method that runs while the circle has no coordinates yet or if the circle is positioned outside the shape. The isWithinShape() class method returns if circle is in the shape. p5's get() method is used to determine the colour for the current pixel. The value returned by this method is compared with the colour of the rectangle shape, which is set to black.

setCoordinates() {
    while (this.coordinates == null || !this.isWithinShape(this.coordinates)) {
        this.coordinates = createVector(random(width), random(height)); 
    } 
}
    
isWithinShape(_coordinates) {
    let px = graphics.get(floor(_coordinates.x), floor(_coordinates.y));
    return (
        px[0] == graphicsColor.levels[0] &&
        px[1] == graphicsColor.levels[1] &&
        px[2] == graphicsColor.levels[2] &&
        px[3] == graphicsColor.levels[3]
    );
}

Checking Overlaps

A circle is created each time the draw() function runs and is only added to the circles array if it is not overlapping any other circle. To check overlaps, the distance between the coordinates of the two circles is calculated and checked if it's lesser than the radii of the circles.

function draw() {
    let randR = floor(random(minR, maxR));
    let newC = new Circle(randR);
    addCircle(newC);
}

function addCircle(_newC) {
    let newC = _newC;
    for (let i = 0; i < circles.length; i++) {
        let otherC = circles[i];
        let distance = newC.coordinates.dist(otherC.coordinates);
        if (distance < newC.radius + otherC.radius) return null;
    }
    circles.push(newC);
}

Drawing the Circles

The radius of each circle grows by 0.05 each time and stops when it hits an edge of the canvas or when it collides with another circle.