p5.j​​s - 使用翻译时的碰撞检测

Question

在使用 p5 javascript 库时，我遇到了一个似乎无法解决的问题。本质上，我想在 p5.js 中创建一个随机的“蛇”圈。

我的代码如下所示。

function setup() {
 createCanvas(400, 400)
  background(220)
  noFill()
  noLoop()
}

function draw() {
  translate(200,200)
  strokeWeight(1)
  for(j=0;j<5;j++) {
        snake() 
  }
}

function snake() {
  rad = 10
  ellipse(0,0,rad,rad)
  push()
  for(i=0;i<100;i++) {
    a = random(0,360)
    translate(rad*sin(a),rad*cos(a))
    ellipse(0,0,rad,rad)
  }
  pop()
}

我所做的是在中心创建一个圆，然后在该圆周围以一定半径选择一个 360 度的随机点，并在那里创建一个新圆。然后我将中心点（0,0）平移到新圆的中心并再次开始该过程。

这是一条蛇，但问题是圆圈不可避免地开始重叠。

我想做的是让我的代码检查一个随机创建的新圆圈是否会与之前的任何一个重叠，如果重叠，则为该圆圈选择一个新位置。

目前我在p5.js中遇到的所有重叠检测方法，但是，使用距离来计算圆是否重叠。使用翻译当然会搞砸。

所以如果有人对我的问题有解决方案，请随时告诉我。

Answer 1

您需要将圆的位置和大小存储在某种数据结构中，例如数组。然后在创建新圈子之前检查这些圈子。

您也许可以使用translate() 函数来执行此操作，但如果我是您，我会自己进行翻译。不要使用translate() 函数，而是跟踪圆 X 和圆 Y，并在绘制新圆时移动该点。

这将允许您在屏幕坐标中工作，这将使collision detection 更容易。