//turn on colors 

var on1 = false; //blue

var on2 = false; //red

var on3 = false; //green

​

function setup() {

  createCanvas(600, 400);

  background(0);

  //buttons

  // Starting location

  x1 = 200;

  y1 = 100;

  x2 = 300;

  y2 = 100;

  x3 = 400;

  y3 = 100;

  // Dimensions

  w = 50;

  h = 50;

​

}

//loop background- yellow circles

function draw() {

  for (var y = 0; y <= height; y += 50) {

  for (var x = 0; x <= width; x += 50) {

      fill(255, 220, 0);

      ellipse(x, y, 40, 40);

    }

  }

//If you click buttons,change background colors

  if(on1){

    background(0,0,255,50); //(0,0,255,50)

  }

  else if(on2){

    background(255,0,0,50); //(255,0,0,50)

  }

  else if(on3){

    background(0,255,0,50); //(0,255,0,50)

  }

  //console.log("on1 is "+on1,"on2 is " + on2, "on3 is " + on3)

  stroke(225);

  strokeWeight(3);

  noFill();

  rectMode(CENTER)

    //rollover- Circles changes color when mouse is inside of them.

  if(mouseX > 150 && mouseX < 250 &&mouseY >50 && mouseY < 150){

    fill(0,0,255);    

  }

    circle(x1,y1,w,h);

   if(mouseX > 250 && mouseX < 350 &&mouseY >50 && mouseY < 150){

    fill(255,0,0);

  }else{

    noFill();

  }

   circle(x2,y2,w,h);

   if(mouseX > 350 && mouseX < 450 &&mouseY >50 && mouseY < 150){

    fill(0,255,0);

  }else{

    noFill();

  }

    circle(x3,y3,w,h);

​

}

​

   //when mouse is pressed to circles, set the background colors according to the circle color.

  function mousePressed(){

    if(mouseX > 150 && mouseX < 250 &&mouseY >50 && mouseY < 150) {

    on1=!on1;

    on2= false;

    on3 = false;

    fill(0,0,255);

  }

  else if(mouseX > 250 && mouseX < 350 &&mouseY >50 && mouseY < 150) {

    fill(255,0,0);

    on2=!on2;

    on1 = false;

    on3 = false;

  }

   else if(mouseX > 350 && mouseX < 450 &&mouseY >50 && mouseY < 150){

    fill(0,255,0);

    on3=!on3;

    on1 = false;

    on2 = false;

     }

}