title: p5.js Collision Detection
body: <p>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.</p>
  
  <p>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!</p>
  
  <pre><code>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 &gt; 256) || (r &lt; 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 &lt; circles.length; i++) {
      circles[i].display();
      if (circles[i].strokeOpacity &lt;= 0) { // Remove if faded out.
        circles.splice(i, 1); // remove
      }
    }
  
    //collisions
  
    if (pointTouchcircle2(touchX, 100, 100)) { // &lt;- 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 &gt; 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 &gt; 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
    }
  }
  </code></pre>