BouncingBall

Simple Example of BouncingBall using p5js.

by Estevez Ben Lajamin

HTML

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

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

      function draw() {
        background(r);
        ellipse(x, 40, 50, 50);
        ellipse(40, y, 50, 50);

        x = x + speed_x;
        y = y + speed_y;

        if(x > width) {
          // r = 'red';
          speed_x = -3;
        }
        if(x == 0) {
          // r = 'yellow';
          speed_x = 3;
        }

        if(y > height) {
          // r = 'red';
          speed_y = -3;
        }
        if(y == 0) {
          // r = 'yellow';
          speed_y = 3;
        }
      }
    </script>