I have a bunch of circles that are randomly placed from 0 + circle radius to height/width - circle radius but for some reason, once in a while, one of them goes outside of the canvas even though the code says otherwise (that one is dark gray for development purposes.)
const circlesToMake = 50;
let circleLayer, circles, r, g, b;
let lives = 3;
let round = -1;
let dead = false;
function setup() {
createCanvas(600, 450);
noStroke();
textFont('JetBrains Mono');
setupCircles();
fill(0);
noLoop();
circleLayer = createGraphics(width, height);
}
function draw() {
image(circleLayer, 0, 0);
fill(0);
drawCircles(circleLayer);
dispInfo();
}
function setupCircles() {
circles = []
r = random(20, 235)
g = random(20, 235)
b = random(20, 235)
round++;
while (circles.length < circlesToMake) {
const circle = {
x: random(width),
y: random(height),
r: 20,
};
let overlapping = false;
for (let j = 0; j < circles.length; j++) {
const other = circles[j];
const d = dist(circle.x, circle.y, other.x, other.y);
if (d < circle.r + other.r) {
overlapping = true;
} if (circle.x < 0 + circle.r || circle.x > width - circle.r) {
overlapping = true;
} if (circle.y < 0 + circle.r || circle.y > height - circle.r) {
overlapping = true;
}
}
if (!overlapping) {
circles.push(circle);
}
}
}
function drawCircles(circleLayer) {
clear();
stroke(0);
fill(255);
rect(0, 0, width-1, height-1);
noStroke();
circles.forEach(c => {
fill(r, g, b, 200); ellipse(c.x, c.y, c.r * 2, c.r * 2);
});
// fill(r, g, b, 220); // normal
fill(32, 32, 32, 255); // dev mode
const target = circles[0];
ellipse(target.x, target.y, target.r * 2, target.r * 2);
}
function dispInfo() {
fill(0, 0, 0, 100);
textAlign(LEFT, TOP);
text(`Lives: ${lives}`, 10, 10);
text(`Round: ${round + 1}`, 10, 25);
}
function youDied() {
clear();
dead = true;
textAlign(CENTER, CENTER);
textSize(20);
fill (0, 0, 0);
text(`You survived ${round} rounds.`, width/2, height/2);
fill(r, g, b, 255);
ellipse(circles[0].x, circles[0].y, circles[0].r * 2, circles[0].r * 2);
}
function mousePressed() {
if (!dead) {
if (dist(mouseX, mouseY, circles[0].x, circles[0].y) < circles[0].r) {
setupCircles();
drawCircles();
redraw();
} else {
const wrongClick = circles.some(c => dist(mouseX, mouseY, c.x, c.y) < c.r);
if (wrongClick) {
lives--;
redraw();
} if (lives <= 0) {
youDied();
}
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>I tried to add an if statement so that when the random x or y values are greater than 0 + radius or less than height - radius/width - radius it rerolls the values but it just doesn’t work for the target circle (circles[0]) sometimes.
>Solution :
x: random(width) puts the center of the circle between 0 and the width. But that doesn’t account for the radius of the circle.
Take the radius into consideration so the center of the circle is between radius and width - radius:
const radius = 20;
const circle = {
x: random(radius, width - radius),
y: random(radius, height - radius),
r: radius,
};