let showCircle = true;

let counter = 0;

​

function setup() {

  createCanvas(800, 800);

}

​

function draw() {

  background(220);

​

  //image(img, 400, 400, 50, 50);

​

  if (counter === 0) {

    fill("black");

    textSize(25);

    textStyle(BOLD);

    text("Click to roll!", 350, 100);

​

    // rice paper

    fill("white");

    circle(400, 400, 500);

​

    // shrimp

    //fill('red');

    // circle(300, 350, 50);

    // circle(400, 350, 50);

    // circle(500, 350, 50);

​

    image(img, 300, 350, 50, 50);

    image(img, 400, 350, 50, 50);

    image(img, 500, 350, 50, 50);

​

    drawAllShapes();

  } else if (counter === 1) {

    // if showCircle = false

    drawAllShapesMovedUp();

​

    // move the shrimps down

    //fill('red');

    image(img, 300, 450 - 150, 50, 50);

    image(img, 400, 450 - 150, 50, 50);

    image(img, 500, 450 - 150, 50, 50);

​

    // show the translucent half circle

    fill("rgba(255, 255, 255, 0.8)"); // White with 50% transparency

    arc(400, 400, 500, 500, PI, TWO_PI); // Top half circle

  }

​

  if (counter > 1) {

    drawAllShapesMovedUp();

​

    // move the shrimps down

    fill("red");

    image(img, 300, 350 - 50, 50, 50);

    image(img, 400, 350 - 50, 50, 50);

    image(img, 500, 350 - 50, 50, 50);

​

    // show the translucent half circle

    fill("rgba(255, 255, 255, 0.8)"); // White with 50% transparency

    arc(400, 400, 500, 500, PI, TWO_PI); // Top half circle

    noStroke();

    fill(220);

    rect(100, 200, 600, 100);

    fill(220);

    rect(200, 100, 400, 100);

    stroke(0);

​

    fill("black");

    textSize(25);

    textStyle(BOLD);

    text("YUM!", 350, 100);

  }

} // end draw()

​

function drawAllShapes() {

  // lettuce

  fill(0, 255, 0);

  rect(230, 400, 350, 150);

​

  // noodle

  fill(255);

  rect(250, 425, 300, 100);

​

  // cucumber

  fill("green");

  rect(240, 520, 325, 25);

​

  // pork

  fill("brown");

  rect(300, 450, 75, 50);

  rect(425, 450, 75, 50);

​

  // dipping sauce

  fill("white");

  circle(100, 100, 100);

  fill("brown");

  circle(100, 100, 85);

}

​

function drawAllShapesMovedUp() {

  // lettuce

  fill(0, 255, 0);

  rect(230, 400 - 150, 350, 150);

​

  // noodle

  fill(255);

  rect(250, 425 - 150, 300, 100);

​

  // cucumber

  fill("green");

  rect(240, 520 - 150, 325, 25);

​

  // pork

  fill("brown");

  rect(300, 450 - 150, 75, 50);

  rect(425, 450 - 150, 75, 50);

​

  // dipping sauce

  fill("white");

  circle(100, 100, 100);

  fill("brown");

  circle(100, 100, 85);

}

​

// Built-in p5.js mouse event functions

function mousePressed() {

  isMousePressed = true;

  showCircle = !showCircle;

  counter++;

  console.log(counter);

}

​

function mouseReleased() {

  isMousePressed = false;

}

​

function preload() {

  img = loadImage("shrimp.png");

}

​