title: p5.js collision/object interaction. Ball bounce
body: <p>Following the collision between a ball from an array and an object (rectangle), the ball doesn't seem to have the same bounce affect as it has when it hits the ground.</p>
  
  <p>When coming into contact with the object, it seems to pick up speed and suddenly glitches through and comes to rest on the ground.</p>
  
  <p><strong>Questions:</strong></p>
  
  <ol>
  <li>Why does it seem to want to rest on the ground and not on the object itself?</li>
  <li>How can I make the ball have the same bounce affect when coming into contact with the object as it has when coming into contact with the ground?</li>
  </ol>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var balls = [];
      var obstacle;
  
      function setup() {
        createCanvas(400, 400);
        obstacle = new Obstacle();
      }
  
      function draw() {
        background(75);
        obstacle.display();
        for (var i = 0; i &lt; balls.length; i++) {
          balls[i].display();
          balls[i].update();
          balls[i].edges();
          RectCircleColliding(balls[i], obstacle);
          //console.log(RectCircleColliding(balls[i], obstacle));
        }
      }
  
      function mousePressed() {
        balls.push(new Ball(mouseX, mouseY));
      }
  
      function Ball(x, y) {
        this.x = x;
        this.y = y;
        this.r = 15;
        this.gravity = 0.5;
        this.velocity = 0;
        this.display = function() {
          fill(255, 0, 100);
          stroke(255);
          ellipse(this.x, this.y, this.r * 2);
        }
        this.update = function() {
          this.velocity += this.gravity;
          this.y += this.velocity;
        }
        this.edges = function() {
          if (this.y &gt;= height - this.r) {
            this.y = height - this.r;
            this.velocity = this.velocity * -1;
            this.gravity = this.gravity * 1.1;
          }
        }
      }
  
      function Obstacle() {
        this.x = width - width;
        this.y = height / 2;
        this.w = 200;
        this.h = 25;
  
        this.display = function() {
          fill(0);
          stroke(255);
          rect(this.x, this.y, this.w, this.h);
        }
      }
  
      function RectCircleColliding(Ball, Obstacle) {
        // define obstacle borders
        var oRight = Obstacle.x + Obstacle.w;
        var oLeft = Obstacle.x;
        var oTop = Obstacle.y;
        var oBottom = Obstacle.y + Obstacle.h;
  
        //compare ball's position (acounting for radius) with the obstacle's border
        if (Ball.x + Ball.r &gt; oLeft) {
          if (Ball.x - Ball.r &lt; oRight) {
            if (Ball.y + Ball.r &gt; oTop) {
              if (Ball.y - Ball.r &lt; oBottom) {
                Ball.y = Obstacle.y - Ball.r * 2;
                Ball.velocity = Ball.velocity * -1;
                Ball.gravity = Ball.gravity * 1.1;
                Ball.velocity += Ball.gravity;
                Ball.y += Ball.velocity;
  
                return (true);
              }
            }
          }
        }
        return false;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>