* @name Shake Ball Bounce

 * @description Create a Ball class, instantiate multiple objects, move it around the screen, and bounce when touch the edge of the canvas.

 * Detect shake event based on total change in accelerationX and accelerationY and speed up or slow down objects based on detection.

 */

​

let balls = [];

​

let threshold = 30;

let accChangeX = 25*10;

let accChangeY = 10;

let accChangeT = 50*5;

​

function setup() {

  createCanvas(400,400);

​

  for (let i = 0; i < 200; i++) {  // change i< to a numebr you want to change the amount of balls 

    balls.push(new Ball());

  }

}

​

function draw() {

  background(204, 192, 153);

​

  for (let i = 0; i < balls.length; i++) {

    balls[i].move();

    balls[i].display();

  }

​

  checkForShake();

}

​

function checkForShake() {

  // Calculate total change in accelerationX and accelerationY

  accChangeX = abs(accelerationX - pAccelerationX);

  accChangeY = abs(accelerationY - pAccelerationY);

  accChangeT = accChangeX + accChangeY;

  // If shake

  if (accChangeT >= threshold) {

    for (let i = 0; i < balls.length; i++) {

      balls[i].shake();

      balls[i].turn();

    }

  }

  // If not shake

  else {

    for (let i = 0; i < balls.length; i++) {

      balls[i].stopShake();

      balls[i].turn();

      balls[i].move();

    }

  }

}

​

// Ball class

class Ball {

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.diameter = random(25, 100);

    this.xspeed = random(-2, 2);

    this.yspeed = random(-2, 2);

    this.oxspeed = this.xspeed;

    this.oyspeed = this.yspeed;

    this.direction = 0.7;

     this.r = random(10,255);

      this.g = random(100,255);

       this.b = random(50,255);

    this.alpha = random(255);

  }

​

  move() {

    this.x += this.xspeed * this.direction;

    this.y += this.yspeed * this.direction;

  }

​

  // Bounce when touch the edge of the canvas

  turn() {

    if (this.x < 0) {

      this.x = 0;

      this.direction = -this.direction;

    } else if (this.y < 0) {

      this.y = 0;

      this.direction = -this.direction;

    } else if (this.x > width - 20) {

      this.x = width - 20;

      this.direction = -this.direction;

    } else if (this.y > height - 20) {

      this.y = height - 20;

      this.direction = -this.direction;

    }

  }

​

  // Add to xspeed and yspeed based on

  // the change in accelerationX value

  shake() {

    this.xspeed += random(5, accChangeX / 3);

    this.yspeed += random(5, accChangeX / 3);

  }

​

  // Gradually slows down

  stopShake() {

    if (this.xspeed > this.oxspeed) {

      this.xspeed -= 0.6;

    } else {

      this.xspeed = this.oxspeed;

    }

    if (this.yspeed > this.oyspeed) {

      this.yspeed -= 0.6;

    } else {

      this.yspeed = this.oyspeed;

    }

  }

​

  display() {

    noStroke();

    fill(this.r,this.g,this.b,this.alpha);

    ellipse(this.x, this.y, this.diameter, this.diameter);

  }

​

}

function mousePressed (){

  for (let i = 0; i < balls.length; i++){

    r = random(255);

    g = random(255);

    b = random(255);

  }

  }

​

​