let whiteBack = false;

let upDown = false;

​

function setup() {

  createCanvas(600, 600);

  for (let i = 0; i < 100; i++) {

    rectangles.push(new rectangle());

    //pushing each new rect object to array

  }

}

​

function draw() {

  if (whiteBack){

    background(255, 10); //for when rects are BW, make background white

  }

  else { background(0, 10); }

  //the 10 changes the alpha transparency of the background

  //in each frame giving it trail effect

  for (let rectangle of rectangles){

    //iterating through each obj of the list

    //rectangle.mouseClicked();

    rectangle.move();

    //drawing each rectangle

    rectangle.display();

  }

}

​

class rectangle {

  constructor() {

    //properties of each rectangle

    this.x = 0; //moving horizontally from the left

    this.y = random(height);

    this.size = random(25, 50);

    this.speedX = random(0, 2);

    this.color = color(random(255), random(255), random(255));

  }

  move() {

    if (upDown) { //switching to falling from the top

      this.y += this.speedY;

      if (this.y < 0 || this.y > height) {

        this.speedY *= -this.speedY; //'collision' w the wall

      } 

      //upDown = false;

    } else { 

      //using the code from lecture to get the rectangles to 

      //move back the oppsoite way if we touch either wall

      this.x += this.speedX;

      if (this.x < 0 || this.x > width) {

        this.speedX *= -this.speedX;

      }

    }

  }

  display() {

    /*if (upDown){

      this.x = random(width);

      this.y = 0;

      this.speedY = random(0, 2);

    } */

    noStroke();

    //frameRate(60);

    fill(this.color);

    let rectHeight = (this.size) * 2;

    // making them somewhat uniform (dont want squares)

    rect(this.x, this.y, this.size, rectHeight);

     if (mouseIsPressed){ //freeze screen when hold mouse

        this.speedX = 0;

    }

  }

} 

function mouseReleased() {

  // get all rect moving again

  for (let rect of rectangles) {

    rect.speedX = random(0, 2); 

  }

}

function doubleClicked(){

  //why does it change direction for bw but not back to color?

  whiteBack = true;

  for (let rect of rectangles) {

    rect.color = random(255); 

    rect.speedX *= -rect.speedX;

  }

} //color -> BW change direction (after first time?)

//bw -> no change

function keyPressed() {

  whiteBack = true;

  if (key === ' ') {

    for (let rect of rectangles) {

      rect.color = color(random(255), random(255), random(255));

      // rect.speedX *= -rect.speedX;

    }

  }

  //moving the keys will reset the direction to one edge of the frame

  if (keyCode === UP_ARROW){

    upDown = true; //changing the y speed to bounce back

    for (let rect of rectangles) {

      rect.x = random(width);

      rect.y = 0; //resetting all the rectangles so that they fall 

      //from the top

      rect.speedY = random(0, 2);

    }

  }

  if (keyCode === DOWN_ARROW){

    upDown = true; //same as prev except it starts at max height 

    //of screen

    for (let rect of rectangles) {

      rect.x = random(width);

      rect.y = height;

      rect.speedY = -(random(0, 2)); //negative so that it goes up

    }

  }

  if (keyCode === RIGHT_ARROW){

    for (let rect of rectangles) {

      rect.x = 0; //moving horizontally from the left

      rect.y = random(height);

      rect.speedX = random(0, 2);

      upDown = false; //to make sure we use x speed parameters 

      //not y

    }

  } 

   if (keyCode === LEFT_ARROW){

     //starts max width of screen

    for (let rect of rectangles) {

      rect.x = width; 

      rect.y = random(height);

      rect.speedX = -(random(0, 2)); //moving horizontally to the left

      upDown = false;

    }

  }

}