let harmony = false;

let individuality = false;

let creativity = false;

​

function setup() {

  createCanvas(600, 600);

}

function draw() {

  background(255);

  strokeWeight(4);

  if (mouseOutside){

      static();

    }

  if (harmony){

    drawUnityCircle();

  }

  if(individuality){

    drawUnityCircle();

  }

  if (creativity){

    drawUnityCircle();

  } 

  stroke('black');

  fill('white');

  drawUnityCircle();

  noFill();

}

function mousePressed(){

  //outside circle

  if (((mouseX < 125) || (mouseX > 475)) || ((mouseY < 100) || (mouseY > 425))){

    mouseOutside = true;

  }

  //left circle - harmony

   if (((mouseX > 125) && (mouseX < 325)) && ((mouseY < 425) || (mouseY > 225))){

     harmony = true;

   } 

  //top circle - individuality 

  //circles separate into three

  if (((mouseX > 200) && (mouseX < 400)) && ((mouseY < 300) && (mouseY > 100))){

     individuality = true;

   } 

  //right circle - creativity 

  //circles change color

  if (((mouseX > 275) && (mouseX < 475)) && ((mouseY < 425) && (mouseY >   225))){

     creativity = true;

   } 

}

function mouseReleased(){

  mouseOutside = false;

  harmony = false;

  individuality = false;

  creativity = false;

}

function static(){

  noStroke();

  frameRate(40);

  for (let x=0;x<6;x++){

    for (let y=0;y<6;y++){

      fill(random(255));

      rect((x*100),(y*100),100);

    }

  }

}

function drawUnityCircle() {

  if (creativity){

    background('rgba(128,128,128,0.71)');

    frameRate(2);

    fill(random(255),random(255),random(255));

  }

  if (individuality){

    fill('#F9DC84');

    background('rgb(128,71,128)');

    ellipse(125, 350, 200); //left

    ellipse(300, 150, 200); //middle

    ellipse(475, 350, 200); //right

  } else if (harmony){

    background('beige');

    noFill();

    ellipse(300, 275, 350); //big one

    ellipse(300, 175, 150); //1

    ellipse(300, 375, 150); //4

    ellipse(215, 325, 150); //5

    ellipse(385, 325, 150); //3

    ellipse(215, 225, 150); //6

    ellipse(385, 225, 150); //2

  }else {

    ellipse(225, 325, 200); //left

    ellipse(300, 200, 200); //middle

    ellipse(375, 325, 200); //right

  }

}