p5.js Collision Detection

mads2

I'm trying to use p5.js's p5.collide2D library to execute some actions. I have a main pulsing module that pulses size-wise to music playing in my sketch, and then as it hits certain shapes I have displaying, I want it to reference the different functions I've set up to transform the main module visually.

Currently in this sketch I'm trying to get the Circle2 function to draw when touchX + touchY collides with the maroon circle. I thought I was using the library correctly, but maybe not. Any help would be great. Thanks!

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);

  fill(7, 194, 146, r);
  ellipse(600, 300, 50, 50);

  fill(46, 49, 146, r)
  rect(500, 100, 50, 50);

  fill(173, 212, 92, r)
  rect(800, 550, 80, 80);

  //Timer for other shape array

  // if (millis() - startTime > waitTime) {
  //   drawSquares = true;
  //   drawCircles = false;

  // }


  // 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
  } 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);
  }
}

//seafoam circles
function Circle3(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(75, 236, 198, this.strokeOpacity);
    fill(7, 194, 146, this.fillOpacity);


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

//drawing squares

squares.push(new Square1(touchX, touchY));


for (var j = 0; j < squares.length; j++) {
  squares[j].display();
  if (squares[j].strokeOpacity <= 1) {
    squares.splice(j, 1);
  }
  // if (squares[j].length >= 1) {
  // WHEN NO SQUARES, ARRAY PROBLEM
  // }
}

//blue squares
function Square1(x, y) {
  this.x = x;
  this.y = y;
  this.size = 0;
  this.age = 0;

  this.fillOpacity = 70;
  this.strokeOpacity = 30;

  this.display = function() {

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

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

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

    fill(46, 49, 146, this.fillOpacity);
    strokeWeight(12);
    stroke(102, 105, 192, this.strokeOpacity);

    // draw squares
    rect(this.x, this.y, this.size, this.size);

  }
}

//lime green squares
function Square2(x, y) {
  this.x = x;
  this.y = y;
  this.size = 0;
  this.age = 0;

  this.fillOpacity = 70;
  this.strokeOpacity = 30;

  this.display = function() {

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

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

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

    fill(173, 212, 92, this.fillOpacity);
    strokeWeight(12);
    stroke(203, 250, 107, this.strokeOpacity);

    // draw squares
    rect(this.x, this.y, this.size, this.size);

  }
}


//collision functions

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