Bounce in a Box

index.html

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/gh/georgesb/lib/drawGrid.js"></script>
<script src="script.js"></script>

script.js

let x;
let y;
let x2;
let y2;
let xSpeed;
let ySpeed;
let xSpeed2;
let ySpeed2;
let diameter;
let radius;

function setup() {
 createCanvas(800, 600);
 x = 200;
 y = 200;
 x2 = 600;
 y2 = 250;
 xSpeed = random(3,7);
 ySpeed = random(3,7);
 xSpeed2 = random(3,7);
 ySpeed2 = random(3,7);
 diameter = 32;
 radius = diameter / 2;
}

function draw() {
  background(250);
	stroke(0);
	drawGrid();

	noFill();
	
	stroke(0);
	strokeWeight(5);
	rect(50,50,350,300);
	rect(500,50,200,500);

  x = x + xSpeed;  
	y = y + ySpeed;
  x2 = x2 + xSpeed2;  
	y2 = y2 + ySpeed2;
	
  if ((x > 400 - radius ) || (x < 50 + radius )) {
         xSpeed = xSpeed * -1;
    }

 if ((y > 350 - radius ) || (y < 50 + radius )) {
         ySpeed = ySpeed * -1;
    }
	noStroke();
  fill(255, 0, 0);
  ellipse(x, y, diameter,diameter);
	
	  if ((x2 > 700 - radius ) || (x2 < 500 + radius )) {
         xSpeed2 = xSpeed2 * -1;
    }

 if ((y2 > 550 - radius ) || (y2 < 50 + radius )) {
         ySpeed2 = ySpeed2 * -1;
    }
  ellipse(x2, y2, diameter,diameter);

}

thumbnail.png