title: Two different shaped objects collision detection in p5.js
body: <p>I'm trying to have my Particle object collide and reflect off my Slate object.</p>
  
  <p>If I wanted to use an ellipse, it would be simple because I could just create a radius variable - can't do that with a rectangle. </p>
  
  <p>It's something to do with the distance variable, I just can't figure it out.</p>
  
  <pre><code>var div;
  var movers;
  
  
  function setup() {
    createCanvas(windowWidth,windowHeight);
    background("#FDEDEB");
    div = new Slate();
    movers = new Particle();
  }
  
  function draw() {
  
    background("#FDEDEB");
  
    div.display();
  
    movers.display();
    movers.update();
    movers.move();
  
    if (movers.hits(div)) {
      console.log("hit");
    }
  
  }
  
  
  function Slate() {
  
    this.x = 30;
    this.y = height/2;
  
    this.display = function() {
    noStroke();
    fill("#DF4655");
    rect(this.x,this.y, 700, 200);
  
    }
  }
  
  function Particle() {
    this.pos = createVector(10,0);
    this.vel = createVector(0,0);
    this.acc = createVector(0.01,0.01);
    this.history = [];
  
    this.display = function() {
      fill("#DF4655");
      point(this.pos.x,this.pos.y);
  
      //beginShape();
      for(var j = 0; j &lt; this.history.length; j++) {
        var pos = this.history[j];
        ellipse(pos.x,pos.y, 5, 3);
      }
      //endShape();
  
    }
  
    this.update = function() {
  
      var v = createVector(this.pos.x,this.pos.y);
      this.history.push(v);
      if (this.history.length &gt; 10) {
        this.history.splice(0,1);
      }
    }
  
    this.hits = function(div) {
          // BOUNCE OFF SLATE
        var d = dist(this.pos.x,this.pos.y,div.x,div.y);
        if (d &lt; 0) {
          console.log('hits');
        }
    }
  
  
    this.move = function() {
  
      this.pos.add(this.vel);
      this.vel.add(this.acc);
      this.vel.limit(10);
  
      for (var i = 0; i &lt; this.history.length; i++) {
        this.history[i].x += random(-2,2);
        this.history[i].y += random(-2,2);
      }
  
    }
  }
  </code></pre>