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更加容易。