var color2;

var color3;

var color4;

var color5;

var color6;

var color7;

var color8;

​

// color1 = color(0)

// color2 = color(0)

// color3 = color(0)

// color4 = color(0)

// color5 = color(0)

// color6 = color(0)

// color7 = color(0)

// color8 = color(0)

​

function setup() {

  createCanvas(displayWidth, displayHeight);

    randomize()

​

}

​

var i = 0; 

var mode = 0

​

function draw() {

  background(0);

  if(mode === 0){

      fill(255);

  } else if(mode === 1){

      fill(255,255,0);

  } else if(mode === 2){

      fill(0,0,255);

  } else if(mode === 3){

      fill(0, 255, 0);

  } else if(mode === 4){

      fill(255,0,0);

  } 

  noStroke();

  i+=5;

  // rect(mouseX ,i,width/3,height/5)

  // rect(width/2, 270, 300, 400)

  fill(color1)

  rect(width/2, 270, 75, 200)

  fill(color2)

  rect(width/2+75, 270, 75, 200)

  fill(color3)

  rect(width/2+150, 270, 75, 200)

  fill(color4)

  rect(width/2+225, 270, 75, 200)  

  fill(color5)

  rect(width/2, 470, 75, 200)

  fill(color6)

  rect(width/2+75, 470, 75, 200)

  fill(color7)

  rect(width/2+150, 470, 75, 200)

  fill(color8)

  rect(width/2+225, 470, 75, 200)

  if(i > displayHeight){

    i = -displayHeight/5;

    mode++;

    mode = mode % 5;

  }

}

​

function randomize(){

  color1 = color(random(255),random(255),random(255))

  color2 = color(random(255),random(255),random(255))

  color3 = color(random(255),random(255),random(255))

  color4 = color(random(255),random(255),random(255))

  color5 = color(random(255),random(255),random(255))

  color6 = color(random(255),random(255),random(255))

  color7 = color(random(255),random(255),random(255))

  color8 = color(random(255),random(255),random(255))

}

​

function mouseClicked(){

  randomize()

}