时间戳

首页 > 解决方案 > p5.j​​s - 使用翻译时的碰撞检测

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

问题描述

在使用 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 中遇到的所有重叠检测方法都是使用距离来计算圆是否重叠。当然，使用翻译会搞砸。

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

标签： javascriptprocessingp5.js

解决方案

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

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

这将允许您在屏幕坐标中工作，这将更容易进行碰撞检测。

推荐阅读