let button2;

let scene = 0;

let angle = 0;

let timeConsumed = [312.5, 387.5, 500, 212.5, 300, 240, 387.5, 462.5, 575, 237.5, 300, 360, 210, 310, 525, 320, 412.5, 260, 435.5, 490];

​

​

function setup() {

  createCanvas(600, 600);

  smooth();

  ellipseMode(CENTER);

  button1 = createButton("judge me");

  button1.position(10, 540);

  button1.size(120, 50);

  button1.mousePressed(sceneChangeA);

  button1.hide();

  button2 = createButton("key");

  button2.position(10, 540);

  button2.size(100, 50);

  button2.mousePressed(sceneChangeB);

  button2.hide();

}

​

function draw() {

  switch (scene) {

    case 0:

      scene0(); // KEY

      break;

    case 1:

      scene1(); // DATA PORTRAIT

      break;

  }

}

  let go = false;

​

function ready() {

  go = true;

}

  function scene0() {

  //KEY

  background(174, 154, 132);

push();

    scale(1.1);

    translate(-41,-28);

  strokeWeight(5);

  push();

  stroke(218, 164, 164);

  fill(228, 185, 185);

  circle(300, 300, 500);

  pop();

  push();

  stroke(196, 110, 110);

  fill(211, 146, 146);

  beginShape();

  vertex(490, 270);

  line(490, 270, 560, 270);

  vertex(560, 270);

  bezierVertex(560, 270, 570, 270, 575, 280);

  bezierVertex(575, 280, 585, 300, 575, 320);

  bezierVertex(575, 320, 570, 330, 560, 330);

  bezierVertex(560, 330, 550, 330, 490, 330);

  endShape();

  circle(300, 300, 400);

  stroke(196, 110, 110);

  circle(300, 300, 370);

  pop();

  push();

  stroke(128, 98, 77);

  fill(147, 113, 88);

  circle(300, 300, 360);

    line(136, 230, 464, 230);

    line(160, 411, 440, 411);

  pop();

  push();

    textAlign(CENTER);

  textFont("monospace", 16);

  fill(96, 73, 57);

  text("judge my caffeine intake during the week I made this sketch", 155, 167, 300);

    textStyle(BOLD);

    text("latte art flower meaning", 105, 240, 400);

    pop();

    push();

     textFont("monospace", 15);

  fill(96, 73, 57);

    textStyle(BOLD);

    text("coffee",190,280);

    text("green tea",190,310);

    text("cold brew",190,340);

    text("diet coke",350,295);

    text("redbull",350,325);

    textStyle(NORMAL);

    textAlign(CENTER);

    text("width of stripes shows % of the week total ceffeine consumed that day", 146, 353, 320);

    text("drinks placed according to time of day they were drank", 180, 418, 250);

    pop();

    push();

    noStroke();

    scale(0.6);

    flower(255, 247, 100, 260, 460, angle); //coffee

    flower(104, 187, 145, 260, 510, angle * 0.5); //green tea

    flower(255, 204, 255, 260, 560, angle * 2); //cold brew

    flower(106, 176, 210, 530, 485, angle * 0.8); //diet coke

    flower(242, 157, 100, 530, 535, angle * 3); //redbull

    angle += 1;

    pop();

    pop();

  button1.show();

  button2.hide();

}

​

function scene1() {

  // DATA PORTRAIT

  background(174, 154, 132);

   fill(130, 101, 79);

  noStroke();

  rect(0, 0, 72, 600);

  rect(114, 0, 126, 600);

  rect(330, 0, 108, 600);

  rect(510, 0, 90, 600);

  fill(121, 91, 69);

  noStroke();

  rect(72, 0, 42, 600);

  rect(240, 0, 90, 600);

  rect(438, 0, 72, 600);

  push();

  translate(0, -60);

  flower(255, 247, 100, 36, timeConsumed[0], angle); //coffee

  flower(255, 247, 100, 36, timeConsumed[1], angle); //coffee

  flower(106, 176, 210, 36, timeConsumed[2], angle * 0.8); //diet coke

  flower(255, 247, 100, 93, timeConsumed[3], angle); // coffee

  flower(104, 187, 145, 93, timeConsumed[4], angle * 0.5); //green tea

  flower(255, 204, 255, 177, timeConsumed[5], angle * 2); //cold brew

  flower(255, 247, 100, 177, timeConsumed[6], angle); //coffee

  flower(255, 247, 100, 177, timeConsumed[7], angle); //coffee

  flower(106, 176, 210, 177, timeConsumed[8], angle * 0.8); //diet coke

  flower(255, 247, 100, 285, timeConsumed[9], angle); //coffee

  flower(255, 204, 255, 285, timeConsumed[10], angle * 2); //cold brew

  flower(104, 187, 145, 285, timeConsumed[11], angle * 0.5); //green tea

  flower(255, 247, 100, 384, timeConsumed[12], angle); //coffee

  flower(255, 204, 255, 384, timeConsumed[13], angle * 2); //cold brew

  flower(242, 157, 100, 384, timeConsumed[14], angle * 3); //redbull

  flower(255, 247, 100, 474, timeConsumed[15], angle); //coffee

  flower(255, 247, 100, 474, timeConsumed[16], angle); //coffee

  flower(255, 247, 100, 555, timeConsumed[17], angle); //coffee

  flower(255, 204, 255, 555, timeConsumed[18], angle * 2); //cold brew

  flower(104, 187, 145, 555, timeConsumed[19], angle * 0.5); //green tea

  angle += 1;

  pop();

  strokeWeight(5);

  push();

  scale(1.8);

  translate(-135, -133);

  push();

  strokeWeight(50);

  stroke(228, 185, 185);

  noFill();

  circle(300, 300, 450);

  pop();

  push();

  strokeWeight(15);

  stroke(211, 146, 146);

  noFill();

  circle(300,300,380);

  pop();

  push();

  stroke(196, 110, 110);

  noFill();

  circle(300, 300, 400);

​

  stroke(196, 110, 110);

  circle(300, 300, 370);

  pop();

  pop();

  button1.hide();

  button2.show();

}

​

function flower(r, g, b, trans1, trans2, angle) {

  push();

  translate(trans1, trans2);

  rotate(radians(angle));

​

  fill(r, g, b);

  ellipse(10, 0, 20, 10);

  ellipse(-10, 0, 20, 10);

​

  rotate(PI / 4);

  ellipse(10, 0, 20, 10);

  ellipse(-10, 0, 20, 10);

​

  rotate(PI / 4);

  ellipse(10, 0, 20, 10);

  ellipse(-10, 0, 20, 10);

​

  rotate(PI / 4);

  ellipse(10, 0, 20, 10);

  ellipse(-10, 0, 20, 10);

  push();

  fill(126, 99, 78);

  noStroke();

  ellipse(0, 0, 15, 15);

  pop();

  pop();

}

​

function sceneChangeA() {

  scene = 1;

}

​

function sceneChangeB() {

  scene = 0;

}

​

​