//Created by Mirette Dahab

//January 2nd, 2025

//Introduction to Interactive Media Midterm Project

​

let ingredients = [];

let nextScreen = false;

let startTime;

let screen = 1;

let cupcakeinterval = 5000;

let spaghettiinterval = 7000;

let currenttime ;

​

class Ingredient { // class that defines ingredients objects to display them on screen and deal with their disappearance when clicked

  constructor(x, y, picture, w, h) {

    this.x = x;

    this.y = y;

    this.visible = true;

    this.picture = picture;

    this.w = w;

    this.h = h;

  }

​

  display() {

    if (this.visible) {

      image(this.picture, this.x, this.y, this.w, this.h); //loads the image to display it on screen if it is supposed to be on screen

    }

  }

​

  isClicked() {//checks to see if user clicked the ingredient or not

    if (

      mouseX > this.x &&

      mouseX < this.x + this.w &&

      mouseY > this.y &&

      mouseY < this.y + this.h &&

      this.visible

    ) {

      return true;

    }

    return false;

  }

​

  hide() { 

    this.visible = false;

  }

}

​

function homepage() {

  background(242, 242, 239);

​

  let rad = 100;

  let res = 10;

  let angle = 360 / res;

​

  // Dynamic blobs in the corners of the screen

  for (let k = 0; k < 3; k++) {

    frameRate(random(1, 2));

    push();

    noStroke();

    fill(225, 232, 239);

    beginShape();

    translate(30, 50);

    for (let i = 0; i < res; i++) {

      rad += random(-10, 10);

      rad = constrain(rad, 50, 170);

      let x = rad * cos(angle * i);

      let y = rad * sin(angle * i);

      curveVertex(x, y);

    }

    endShape();

    pop();

  }

​

  for (let k = 0; k < 3; k++) {

    frameRate(random(1, 2));

    push();

    noStroke();

    fill(225, 232, 239);

    beginShape();

    translate(420, 400);

    for (let i = 0; i < res; i++) {

      rad += random(-10, 10);

      rad = constrain(rad, 100, 170);

      let x = rad * cos(angle * i);

      let y = rad * sin(angle * i);

      curveVertex(x, y);

    }

    endShape();

    pop();

  }

​

  for (let k = 0; k < 3;k++) {

    frameRate(random(1, 2));

    push();

    noStroke();

    fill(244, 225, 223);

    beginShape();

    translate(-10, 400);

    for (let i = 0; i < res; i++) {

      rad += random(-10, 10);

      rad = constrain(rad, 10, 200);

      let x = rad * cos(angle * i);

      let y = rad * sin(angle * i);

      curveVertex(x, y);

    }

    endShape();

    pop();

  }

​

  for (let k = 0; k < 3;k++) {

    frameRate(random(1, 2));

    push();

    noStroke();

    fill(244, 225, 223);

    beginShape();

    translate(450, -10);

    for (let i = 0; i < res; i++) {

      rad += random(-10, 10);

      rad = constrain(rad, 85, 230);

      let x = rad * cos(angle * i);

      let y = rad * sin(angle * i);

      curveVertex(x, y);

    }

    endShape();

    pop();

  }

​

  fill(0);

  textFont(myfont);

  textSize(32);

  textAlign(CENTER);

  textStyle(BOLD);

​

  text("Welcome", width / 2, height / 2 - 120);

  text("to", width / 2, height / 2 - 80);

  text("Mirette's Kitchen", width / 2, height / 2 - 40);

  textSize(20);

  text("Click on a recipe to make it", width / 2, height / 2 + 20);

  textSize(14);

  fill('#5f2e1c');

  text("press esc at any time to return to home page", width / 2, height - 15);

  //display the 3 icons with their adjusted sizes

  image(cupcake, width / 3 - 85, (3 * height) / 4 - 30, 60, 90);

  image(spaghetti, width / 2 - 55, (3 * height) / 4 - 30, 115, 90);

  image(salad, width / 2 + 80, 3 * height / 4 - 10, 100, 70);

}

​

function cupcakeScreen() {// set up of the cupcake screen

  background(244, 225, 223);

  for (let i = 0; i < width / 70; i++) {

    image(spatulas, i * 70, 0, 70, 70);

  }

​

  fill('#5f2e1c');

  textFont(myfont);

  textSize(28);

  textAlign(CENTER);

  textStyle(BOLD);

  text("click on the ingredients ", width / 2, height / 2 - 82);

  text("to make the cupcake", width / 2, height / 2 - 47);

  noStroke();

  fill('#bfaea3');

  rect(0, height - 70, width, 70);

​

  image(mixingbowl, width / 2 - 90, height / 2 - 45, 190, 190);

}

function CupcakeOven() {//set up of the cupcake oven screen

  background(244, 225, 223);

  image(oven, width / 2 - 160, 50, 320, 320);

  fill('#9d624d');

  noStroke();

  ellipse(width / 2 + 120, 92, 45); //take out button

​

  fill('#5F2E1C');

  textFont(myfont);

  textSize(16);

  textAlign(CENTER);

  text("TAKE", width / 2 + 120, 92);

  text("OUT", width / 2 + 120, 108);

​

  textSize(24);

  fill(0);

  text("00", width / 2 - 83, 92);

  text("05", width / 2 - 40, 92);

  textSize(20);

  fill('#5F2E1C');

  text("press on take out button within 5 seconds", width / 2, height - 12);

}

function CupcakeServe() {// set up of the cupcake serve screen

  background(244, 225, 223);

  noStroke();

  fill('#bfaea3');

  rect(0, height / 2, width, height / 2);

  fill(255);

  ellipse(width / 2 - 5, (3 * height) / 4 - 30, 220, 90);

  image(cupcake, width / 3 - 20, (3 * height) / 4 - 120, 60, 90);

  image(cupcake, width / 3 - 20, (3 * height) / 4 - 90, 60, 90);

  image(cupcake, width / 3 + 30, (3 * height) / 4 - 120, 60, 90);

  image(cupcake, width / 3 + 30, (3 * height) / 4 - 90, 60, 90);

  image(cupcake, width / 3 + 80, (3 * height) / 4 - 120, 60, 90);

  image(cupcake, width / 3 + 80, (3 * height) / 4 - 90, 60, 90);

  fill('#5F2E1C');

  textFont(myfont);

  textSize(58);

  textAlign(CENTER);

  textStyle(BOLD);

  text("Delicious!", width / 2, height / 4 - 20);

  fill('#9d624d');

  ellipse(width / 2 + 50, 140, 70, 50);

  ellipse(width / 2 - 50, 140, 70, 50);

​

  fill(255);

  textSize(12);

  text("return to", width / 2 - 50, 135);

  text("homepage", width / 2 - 50, 150);

​

  text("go to", width / 2 + 50, 135);

  text("recipe", width / 2 + 50, 150);

}

function restartcupcake(){// function that redefines the ingredientslist to display them on screen for a new recipe

  for (let i = 0; i < 5; i++) {

      let Cocoa = new Ingredient(-10, height - 150, cocoa, 120, 120);

      let Sugar = new Ingredient(width - 100, height - 150, sugar, 100, 120);

      let Milk = new Ingredient(width - 180, height - 100, milk, 80, 100);

      let Flour = new Ingredient(85, height - 100, flour, 100, 100);

      let Eggs = new Ingredient(160, height - 65, eggs, 70, 70);

​

      ingredients.push(Cocoa);

      ingredients.push(Sugar);

      ingredients.push(Milk);

      ingredients.push(Flour);

      ingredients.push(Eggs);

  }

}

function CupcakeSmoke(){//smoke screen that shows failure

  background(244,225,223);

  image(oven, width/2 -160, 50, 320, 320);

  fill('#9d624d');

  noStroke();

  ellipse(width/2+120, 92, 45); //take out button

  fill('#5F2E1C');

  textFont(myfont);

  textSize(16);

  textAlign(CENTER);

  text("TAKE",width/2+120, 92);

  text("OUT",width/2+120, 108);

​

  fill(211,211,211,10);

  for(let i =0; i< 200;i++){//smoke

    ellipse(random(width), random(height), random(100,200));  

  }

  fill('#5F2E1C')

  textSize(30);

  text("You burnt the cupcakes!!",width/2, 200);

  text("Click to return to homepage",width/2, 250);

​

}

​

​

function spaghettiscreen(){//set up of spaghetti screen

  background('#f2f2ef');

  strokeWeight(2);

  stroke('#5f2e1c');

  fill('#bfaea3');

  rect(0, height/2+20, width, height/2);

  image(stove, 0, height/2-20, 220,220);

  fill('#5f2e1c');

  line(219,266,width, 266);

  textFont(myfont);

  textSize(28);

  textAlign(CENTER);

  strokeWeight(0.1);

  text("Click on the ingredients ", width/2, height/2-145);

  text("to cook the spaghetti", width/2, height/2-105);

  image(pot, 90, height/2-50, 130,110 );

​

}

function restartSpaghetti(){// function that redefines the ingredientslist to display them on screen for a new recipe

  for (let i = 0; i < 3; i++) {

    let Meatballs = new Ingredient(215, height/2+15, meatballs ,90,50);

    let Sauce = new Ingredient(300, height/2-44, sauce ,30,80);

    let Rawpasta = new Ingredient(width-100, height/2+15, rawpasta,100,50);

​

    ingredients.push(Meatballs);

    ingredients.push(Sauce);

    ingredients.push(Rawpasta);

  }

}

function spaghettiCook(){//set up of the cooking screen

  background('#f2f2ef');

  strokeWeight(2);

  stroke('#5f2e1c');

  fill('#bfaea3');

  rect(0, height/2+20, width, height/2);

  image(stove, 0, height/2-20, 220,220);

  fill('#5f2e1c');

  line(219,266,width, 266);

  strokeWeight(0.1);

  textFont(myfont);

  textSize(28);

  textAlign(CENTER);

  textStyle(BOLD);

  text("click anywhere within 7 seconds", width/2, height/2-145);

  text("to remove from stove top", width/2, height/2-105);

  textSize(30);

  //text("00 :",width/2-15, height/2-60);

  //text('0'+timer2, width/2+30, height/2-60);

  image(pot, 90, height/2-50, 130,110 );

}

function spaghettiServe(){//set up of the spaghetti serve screen

  noStroke();

  background('#f2f2ef');

  fill('#bfaea3');

  rect(0, height/2+40, width, height/2);

  textFont(myfont);

  textSize(58);

  textAlign(CENTER);

  textStyle(BOLD);

  fill('#5f2e1c');

  text("Delicious!", width/2, height/4-20);

  fill('#9d624d');

  ellipse(width/2+50, 140, 70 ,50); 

  ellipse(width/2-50, 140, 70 ,50); 

  fill(255);

  textSize(12);

  text("return to",width/2-50, 135);

  text("homepage",width/2-50, 150);

  text("go to",width/2+50, 135);

  text("recipe",width/2+50, 150);

  image(spaghetti, width/2-100, height/2, 200,120);

}

function Spaghettismoke(){

  background('#f2f2ef');

  fill('#bfaea3');

  rect(0, height/2+20, width, height/2);

  image(stove, 0, height/2-20, 220,220);

  image(pot, 90, height/2-50, 130,110 );

  fill('#5f2e1c');

  strokeWeight(2);

  line(219,266,width, 266);

  fill(211,211,211,10);

  noStroke();

  for(let i =0; i< 200;i++){

    ellipse(random(width), random(height), random(100,200));  

  }

  fill('#5F2E1C')

  textSize(28);

  text("You burnt the Spaghetti !! ", width/2, height/2-145);

  text("Click to return to homepage", width/2, height/2-105);

}

​

​

function saladscreen(){// set up of salad screen

  background('#E1E8EF');

  fill('#bfaea3');

  rect(0, height/2+40, width, height/2);

  for(let i = 0; i< width/50;i++){

    image(KnifeSpatula, i*50,0, 50,50);

  }

  fill('#5f2e1c');

  textFont(myfont);

  textSize(28);

  textAlign(CENTER);

  textStyle(BOLD);

  text("Click on the ingredients ", width/2, height/2-100);

  text("to add to the bowl", width/2, height/2-56);

  noStroke();

  image(bowl, width/2-105, height-237, 200,150);

​

}

function restartsalad(){// function that redefines the ingredientslist to display them on screen for a new recipe

  for(let i = 0; i < 5; i++){

    let Tomato = new Ingredient(10, height-150,tomato,80,50);

    let Cucumber = new Ingredient(width-240, height-80,cucumber ,110,70);

    let Lettuce = new Ingredient(width-100, height-200,lettuce,100, 100);

    let Spinach = new Ingredient(20, height-90,spinach ,130,90);

    let Avocado = new Ingredient(width-120, height-100,avocado,120,100)

​

    ingredients.push(Avocado);

    ingredients.push(Tomato);

    ingredients.push(Cucumber);

    ingredients.push(Lettuce);

    ingredients.push(Spinach);

  } 

}

function SaladDressing(){// set up of salad dressing screen

  background('#E1E8EF');

  fill('#bfaea3');

  rect(0, height/2+40, width, height/2);

  image(salad, width/2-120, height/2-20, 225,140);

  image(dressing, width/2, height/2-150,150,70);

  textFont(myfont);

  textSize(20);

  textAlign(CENTER);

​

  fill('#5f2e1c');

  text("click anywhere when enough dressing is added", width/2, height-28);

}

function SaladServe(){// set up of salad serve screen

  noStroke();

  background('#E1E8EF');

  fill('#bfaea3');

  rect(0, height/2+40, width, height/2);

  textFont(myfont);

  textSize(58);

  textAlign(CENTER);

  textStyle(BOLD);

  fill('#5f2e1c');

  text("Delicious!", width/2, height/4-20);

  fill('#9d624d');

  ellipse(width/2+50, 140, 70 ,50); 

  ellipse(width/2-50, 140, 70 ,50); 

  fill(255);

  textSize(12);

  text("return to",width/2-50, 135);

  text("homepage",width/2-50, 150);

  text("go to",width/2+50, 135);

  text("recipe",width/2+50, 150);

  image(finalsalad, width/2-90, height-150, 180,100);

  image(forkKnife, width-115, height-140, 80,90);

}

​

function setup() {

  createCanvas(400, 400);

  mysound.play(); //play the sound file attached

}

​

function draw() {

  background(220);

  if (screen === 1) {

    homepage();

  } else if (screen === 2) {

    cupcakeScreen();

    for (let obj of ingredients) {// looping through the ingredients and displaying them on screen

      obj.display();

    }

    if (nextScreen) {// if all ingredients have been clicked then move on to next screen

      screen = 3;

      CupcakeOven();

    }

  } else if (screen === 3) {

​

    CupcakeOven();

    currentTime = millis();

    if (currentTime - startTime > cupcakeinterval) {//count the seconds elapsed to see if it burnt or not

      screen = 5;}

​

  } else if (screen === 4) {

    CupcakeServe();

  } else if (screen === 5) {

    CupcakeSmoke();

  }else if(screen ===6 ){

    spaghettiscreen();

    for (let obj of ingredients) {// looping through the ingredients and displaying them on screen

      obj.display();

    }

​

    if (nextScreen) {// if all ingredients have been clicked then move on to next screen

      screen = 7;

      spaghettiCook();

    }

  }else if(screen === 7){

    spaghettiCook();

    currentTime = millis();

    if (currentTime - startTime > spaghettiinterval) {//count the seconds elapsed to see if it burnt or not

      screen = 9;}

  }else if(screen ===8){

    spaghettiServe();

  }else if(screen ===9){

    Spaghettismoke();

  }else if(screen === 10){

    saladscreen();

    for (let obj of ingredients) {// looping through the ingredients and displaying them on screen

      obj.display();

    }

    if (nextScreen) {// if all ingredients have been clicked then move on to next screen

      screen = 11;

      SaladDressing();

    }

  }else if(screen === 11){

    SaladDressing();

    fill('orange');

  for (let i = 0; i < 10; i++) {// creating the dynamic drops of the dressing

    let y = random(84, height/2 );

    ellipse(width/2, y, 5, 7);

  }

  }else if(screen === 12){

    SaladServe();

  }

}

​

function mouseClicked() {

  if (screen === 1) { // if homescreen is displayed then check further

    if (// if cupcake icon is clicked

      mouseX > width / 3 - 85 &&

      mouseX < width / 3 - 85 + 60 &&

      mouseY > (3 * height) / 4 - 30 &&

      mouseY < (3 * height) / 4 - 30 + 90

    ) {

      restartcupcake();//populate the ingredients list with the cupcake ingredients to be displayed

      nextScreen = false;

      screen = 2; // Move to cupcakescreen

    }else if(// spaghetti icon is clicked

      mouseX > width / 2 - 55 &&

      mouseX < width / 2 - 55 + 115 &&

      mouseY > 3 * height / 4 - 30 &&

      mouseY < 3 * height / 4 - 30 + 90

    ){

      restartSpaghetti();//populate the ingredients list with the spaghetti ingredients to be displayed

      nextScreen = false;

      screen = 6;// move to spaghetti screen

    }else if(//salad icon is clicked

      mouseX > width / 2 + 80 &&

      mouseX < width / 2 + 80 + 100 &&

      mouseY > 3 * height / 4 - 10 &&

      mouseY < 3 * height / 4 - 10 + 70

    ){

      restartsalad();//populate the ingredients list with the salad ingredients to be displayed

      nextScreen = false;

      screen = 10;// move to salad screen

      }

  } else if (screen === 2) {

    for (let obj of ingredients) {// if an ingredient is clicked, hide it

      if (obj.isClicked()) {

        obj.hide();

      }

    }

    // Check if all objects are hidden

    let allHidden = ingredients.every((obj) => !obj.visible);

​

    if (allHidden) {

      nextScreen = true;

    }

    startTime = millis();

  } else if (screen === 3 && //if take out button is pressed

            mouseX > width/2 +97 && 

            mouseX< width/2 + 143 &&

            mouseY > 69 &&

            mouseY < 115 ){

    screen = 4;

  } else if(screen ===5){

    screen = 1;

  } else if (// serve screens:: 4--> cupcake, 8--> spaghetti, 12--> Salad

    (screen === 4 || screen ===8 || screen === 12) &&

    mouseX > width/2 - 85 &&

    mouseX < width/2 - 15 &&

    mouseY > 90 &&

    mouseY < 210 //if return to homepage button is pressed

  ) {

    screen = 1; // go back to homepage

  }else if(screen === 4 &&

    mouseX > width/2 + 15 &&

    mouseX < width/2 + 85 &&

    mouseY > 90 &&

    mouseY < 210){// if go to recipe is pressed

    window.open("https://sallysbakingaddiction.com/super-moist-chocolate-cupcakes/");  

  }else if(screen === 8 &&

    mouseX > width/2 + 15 &&

    mouseX < width/2 + 85 &&

    mouseY > 90 &&

    mouseY < 210){// if go to recipe is pressed

    window.open("https://www.onceuponachef.com/recipes/spaghetti-and-meatballs.html");  

  } else if(screen === 12 &&

    mouseX > width/2 + 15 &&

    mouseX < width/2 + 85 &&

    mouseY > 90 &&

    mouseY < 210){// if go to recipe is pressed

    window.open("https://www.onceuponachef.com/recipes/summer-avocado-salad.html");  

  } else if (screen === 6){

    for (let obj of ingredients) {// if an ingredient is clicked, hide it

      if (obj.isClicked()) {

        obj.hide();

      }

    }

    // Check if all objects are hidden

    let allHidden = ingredients.every((obj) => !obj.visible);

​

    if (allHidden) {

      nextScreen = true;

    }

  startTime = millis();

  }else if(screen === 7){

    screen = 8;

  }else if(screen === 9){

    screen = 1;

  }else if(screen === 10){

    for (let obj of ingredients) {// if an ingredient is clicked, hide it

      if (obj.isClicked()) {

        obj.hide();

      }

    }

    // Check if all objects are hidden

    let allHidden = ingredients.every((obj) => !obj.visible);

​

    if (allHidden) {

      nextScreen = true;

    }

  }else if(screen === 11){

    screen = 12;

  }

}

​

function preload() {

  //loading all the required pictures, fonts and sound files as necessary before running the code

  soundFormats('mp3', 'ogg');

  myfont = loadFont('One Little Font Regular.otf');

  cupcake = loadImage('cupcake.png');

  spaghetti = loadImage('spaghetti.png');

  cocoa = loadImage('cocoa.png');

  mixingbowl = loadImage('mixingbowl.png');

  salad = loadImage('salad.png');

  spatulas = loadImage('spatulas.png');

  eggs = loadImage('Eggs.png');

  flour = loadImage('Flour.png');

  milk = loadImage('Milk.png');

  sugar = loadImage('Sugar.png');

  oven = loadImage('oven.png');

  tomato = loadImage('tomato.png');

  spinach = loadImage('spinach.png');

  avocado = loadImage('avocado.png');

  lettuce = loadImage('lettuce.png');

  cucumber = loadImage('cucumber.png');

  dressing = loadImage('dressing.png');

  KnifeSpatula = loadImage('knifeSpatula.png');

  bowl = loadImage('bowl.png');

  finalsalad = loadImage('salad3.png');

  forkKnife = loadImage('forkandknife.png');

  stove = loadImage('stove.png');

  rawpasta = loadImage('rawpasta.png');

  sauce = loadImage('sauce.png');

  meatballs = loadImage('meatballs.png');

  pot = loadImage('pot.png');

  mysound = loadSound('0018. Happy Day - AShamaluevMusic.mp3');

}

​

function keyPressed(){

  if( keyCode == ESCAPE ){// if esc is pressed, go back to homepage

    screen = 1;

    ingredients = [];

  }

}