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和在绘制新的循环往复这一点。

这将使您能够处理屏幕坐标，这将使碰撞检测更加容易。