Two agents must be drawn out first to activate the checking algorithm. Once the two points has been drawn out, their x and y positions as well as their radius are stored in an array. The data of each agents stored within those arrays are then used to check which of the agents are the closest.Once the calculation has been done, it then renders out an agent with randomised parameter values within the perimeter of the previous drawn out agent. This then repeats until the limit of agents has been met.

Link to Full Codes

                        // create a random set of parameters
                        let nextPointRadius = random(5, 25);
                        let nextPointXPos = random(nextPointRadius, width - nextPointRadius);
                        let nextPointYPos = random(nextPointRadius, height - nextPointRadius);

                        let nearestPoint = Number.MAX_VALUE;
                        let moveToNewPos = 0;
                        // Which object is the closest?
                        for (let i = 0; i < currentPoint; i++) {
                            let nextPoint = dist(nextPointXPos, nextPointYPos, xPos[i], yPos[i]);
                            
                            if (nextPoint < nearestPoint) {
                            nearestPoint = nextPoint;
                            moveToNewPos = i;
                            }
                        }

                        // aline it to the closest circle outline
                        let angle = atan2(nextPointYPos - yPos[moveToNewPos], nextPointXPos - xPos[moveToNewPos]);

                        xPos[currentPoint] = xPos[moveToNewPos] + cos(angle) * (radius[moveToNewPos] + nextPointRadius);
                        yPos[currentPoint] = yPos[moveToNewPos] + sin(angle) * (radius[moveToNewPos] + nextPointRadius);
                        radius[currentPoint] = nextPointRadius;
                        currentPoint++;

                        // draw them
                        for (let i = 0; i < currentPoint; i++) {
                            noStroke();
                            fill(50 + i, 0, currentPoint + i);
                            rect(xPos[i], yPos[i], radius[i] * 2, radius[i] * 2);
                        }

                        if (currentPoint >= numOfPoints) noLoop();