当代码另有说明时，随机放置的圆圈有时会超出画布

Question

我有一堆从

0 + circle radius

到

height/width - circle radius

随机放置的圆圈，但由于某种原因，偶尔，其中一个圆圈会超出画布，即使代码另有说明（该圆圈是深灰色的）开发目的。）

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>

我尝试添加一个

if

语句，以便当随机

x

或

y

值大于

0 + radius

或小于

height - radius

/

width - radius

时，它会重新滚动这些值，但它不起作用有时会为

target

圆圈 (

circles[0]

)

Answer 1

x: random(width)

将圆心置于 0 和宽度之间。但这并没有考虑到圆的半径。

考虑半径，因此圆心位于

radius

和

width - radius

之间：

const radius = 20;
const circle = {
  x: random(radius, width - radius),
  y: random(radius, height - radius),
  r: radius,
};