Javascript p5.js碰撞检测

我试图使用p5.js的p5.collide库来执行一些操作。我有一个主脉冲模块，它根据我的草图中播放的音乐大小进行脉冲，然后当它击中我显示的某些形状时，我希望它参考我设置的不同功能，以直观地转换主模块

目前，在这个草图中，我试图在touchX+touchY与褐红色圆圈碰撞时绘制Circle2函数。我以为我使用图书馆是正确的，但也许不是。任何帮助都会很好。谢谢

var circles = [];
var squares = [];
var sizeProportion = 0.2;

//additional shapes
var r = 0;
var velocity = 1;
var fillColor = color(0, 0, 0);
var hit = false;

var startTime;
var waitTime = 3000;

var drawCircles;
var drawSquares;


function preload() {
  sound = loadSound('assets/findingnemoegg.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);


  amplitude = new p5.Amplitude();
  sound.loop();
  sound.play();

  startTime = millis();
}

function draw() {

  background(255);

  // other shapes + information
  r = r + velocity;
  if ((r > 256) || (r < 0)) {
    velocity = velocity * -1;
  }
  noStroke();

  fill(144, 12, 63, r);
  ellipse(100, 100, 80, 80);


  // drawing circles

  circles.push(new Circle1(touchX, touchY));

  for (var i = 0; i < circles.length; i++) {
    circles[i].display();
    if (circles[i].strokeOpacity <= 0) { // Remove if faded out.
      circles.splice(i, 1); // remove
    }
  }

  //collisions

  if (pointTouchcircle2(touchX, 100, 100)) { // <- collision detection
    //call upon Circle2 function and have the main module draw that
  } else {
    //stay the same.
  }

}

//starting circles
function Circle1(x, y) {
  this.x = x;
  this.y = y;
  this.size = 0;
  this.age = 0;

  this.fillOpacity = 20
  this.strokeOpacity = 30

  this.display = function() {

    var level = amplitude.getLevel();
    this.age++;

    if (this.age > 500) {
      this.fillOpacity -= 1;
      this.strokeOpacity -= 1;
    }

    var newSize = map(level, 0, 1, 20, 900);
    this.size = this.size + (sizeProportion * (newSize - this.size));

    strokeWeight(10);
    stroke(152, 251, 152, this.strokeOpacity);
    fill(23, 236, 236, this.fillOpacity);


    ellipse(this.x, this.y, this.size);
  }
}

//maroon circles
function Circle2(x, y) {
  this.x = x;
  this.y = y;
  this.size = 0;
  this.age = 0;

  this.fillOpacity = 20
  this.strokeOpacity = 30

  this.display = function() {

    var level = amplitude.getLevel();
    this.age++;

    if (this.age > 500) {
      this.fillOpacity -= 1;
      this.strokeOpacity -= 1;
    }

    var newSize = map(level, 0, 1, 20, 900);
    this.size = this.size + (sizeProportion * (newSize - this.size));

    strokeWeight(10);
    stroke(173, 212, 92, this.strokeOpacity);
    fill(144, 12, 63, this.fillOpacity);


    ellipse(this.x, this.y, this.size);
  }
}


//collision functions

function pointTouchcircle2(touch, x, y) {
  if (hit = collidePointCircle(touchX,touchY,100,100,50)) {
    return true
  } else {
    return false
  }
}

var循环=[]；
var平方=[]；
var sizeProportion=0.2；
//附加形状
var r=0；
var速度=1；
var fillColor=color（0,0,0）；
var-hit=false；
var startTime；
var waitTime=3000；
var画圈；
var平方；
函数预加载（）{
sound=loadSound（'assets/findingnemoegg.mp3'）；
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
振幅=新的p5.振幅（）；
sound.loop（）；
声音。播放（）；
开始时间=毫秒（）；
}
函数绘图（）{
背景（255）；
//其他形状+信息
r=r+速度；
如果（（r>256）| |（r<0））{
速度=速度*-1；
}
仰泳（）；
填充（144、12、63、r）；
椭圆（1001008080）；
//画圈
圆圈。推（新圆圈1（touchX，toucy））；
对于（变量i=0；i

此代码的具体功能是什么？你到底期望它做什么？这两件事有何不同？你试过调试吗？你能发布一个而不是整个项目吗？这是正在运行的代码！这就是它的作用。我试图使用碰撞库使主模块根据与重叠的形状切换颜色/形状。让我重新发布一个简化的代码片段。编辑：原始帖子中的简化代码！你发布的代码确实检测到鼠标指针和栗色圆圈的碰撞，我刚刚测试过。到底是什么问题？也许您想使用圆-圆碰撞而不是点-圆碰撞？它有点偏，我想这是因为你没有

ellipseMode（中心）

同样，你在碰撞函数中传递

50

作为直径，但是你画了一个直径为

80

的椭圆，这可能就是错误所在，直径！让我来玩玩。此外，我不相信碰撞检测库在我的html中被引用，这是可能出现问题的地方