Ball Bouncing Simulator - OpenProcessing

mySketch
xxxxxxxxxx
 
var speed;
​
function setup() {
  describe("A ball bouncing in a box simulator");
  createCanvas(windowWidth, windowHeight);
  speed = createSlider(0,2,0.5,0.01);
  speed.position(0,0);
}
​
class Ball {
  constructor(ballX = 0, ballY = 0, speedX = 0, speedY = 0, drag = 0, bounciness = 1, gravity = 1) {
    this.ballX = ballX;
    this.ballY = ballY;
    this.speedX = speedX;
    this.speedY = speedY;
    this.drag = drag;
    this.bounciness = bounciness;
    this.gravity = gravity;
  }
  draw() {
    noStroke();
    fill("white");
    circle(this.ballX,this.ballY,10);
  }
  tick(time = 1) {
    //Move Ball
    this.ballX += this.speedX * time;
    this.ballY += this.speedY * time;
    //Air Drag Ball
    if (this.speedX > 0) {
      this.speedX -= this.drag * time;
    }
    else if (this.speedX < 0) {
      this.speedX += this.drag * time;
    }
    if (this.speedY < 0) {
      this.speedY += this.drag * time;
    }
    //Gravity Ball
    if (this.ballY < height-1) {
      this.speedY += this.gravity * time;
    }
    //Bounce Ball
    if (this.ballX < 0) {
      this.ballX = 0;
      if (this.speedX < 0) {
        this.speedX = -this.speedX*this.bounciness;
      }
    }
    else if (this.ballX > width) {
      this.ballX = width;
      if (this.speedX > 0) {
        this.speedX = -this.speedX*this.bounciness;
      }
    }
    if (this.ballY > height) {
      this.ballY = height;
      if (this.speedY > 0) {
        this.speedY = -this.speedY*this.bounciness;
      }
    }
    else if (this.ballY < 0) {
      this.ballY = 0;
      if (this.speedY < 0) {
        this.speedY = -this.speedY*this.bounciness;
      }
    }
  }
}
​
var balls = [];
​
var originalX = -1;
var originalY = -1;
​
function mousePressed() {
  originalX = mouseX;
  originalY = mouseY;
  describe("A new ball is being created.");
}
​
function mouseReleased() {
  balls.push(new Ball(originalX,originalY,mouseX-originalX,mouseY-originalY,0.05,0.8,1));
  originalX = -1;
  originalY = -1;
  describe("A new ball was created at (${mouseX},${mouseY})");
}
​
function draw() {
  background("black");
  if (originalX != -1 && originalY != -1) {
    stroke("white");
    strokeWeight(1);
    line(originalX,originalY,mouseX,mouseY);
    strokeWeight(5);
    point(originalX,originalY);
    describe("There are ${balls.length} balls bouncing in a box. A new ball is being created with a speed of (${mouseX-originalX},${mouseY-originalY}).");
  }
  else {
    describe("There are ${balls.length} balls bouncing in a box.");
  }
  for (var ball in balls) {
    balls[ball].draw();
    balls[ball].tick(speed.value());
  }
}