Diamond Bouncing Ball

Bounce like a diamond! :) Each change of direction will produce different background color.

by Estevez Ben Lajamin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
<div class="container">
    <h1>Diamond Bouncing Ball</h1>
      <script type="text/javascript">
        var speed_x = 3;
        var speed_y = -3;
        var x = 0;
        var y = 200;
        var r = 0;

        function setup() {
          createCanvas(400, 400);
        }

        function draw() {
          background(r);
          ellipse(x, y, 50, 50);
          
          x = x + speed_x;
          y = y + speed_y;

          if(y <= 0) {
            r = 'red';
            speed_x = 3;
            speed_y = 3;
          }
          if(x > width) {
            r = 'green';
            speed_x = -3;
            speed_y = 3;
          }
          if(y > height) {
            r = 'yellow';            
            speed_x = -3;
            speed_y = -3;
          }
          if(x == 0) {
            r = 'orange';
            speed_x = 3;
            speed_y = -3;
          }
        }
      </script>      
    </div>