​

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();

  }

//   noFill();

//   stroke('#bfaea3');

//   beginShape(); 

//   curveVertex(43,176);

//   curveVertex(4,48);

//   curveVertex(20,135); 

//   curveVertex(3,286);

//   endShape();

  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("press on a recipe to make it",width/2, height/2+20 );

  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);

  if(/*screen ==1&&*/ mouseIsPressed && mouseX > 44 && mouseX<115 && mouseY > 267 && mouseY < 361){

    screen = 2;

    console.log("screen2");

    cupcakescreen();

  }

  if(/*screen == 1&& */mouseIsPressed && mouseX > 140 && mouseX<254 && mouseY > 271 && mouseY < 359){

    screen = 3;

    console.log("screen3");

    spaghettiscreen();

  }

  if(/*screen ==1&&*/ mouseIsPressed && mouseX > 281 && mouseX<370&& mouseY > 290 && mouseY < 361){

    screen = 4;

    console.log("screen4");

    saladscreen();

  }

}

function cupcakescreen(){

  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("drag and drop 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);

  let ingredientslist = [];

  let mbowl = new ingredient(width/2-90, height/2-45,mixingbowl,190,190 );

  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-145, height-100, milk ,80,100); 

  let Flour = new ingredient(80, height-100,flour ,100,100);

  let Eggs = new ingredient(200, height-65,eggs ,70,70);

  let Eggs2 = new ingredient(180, height-63,eggs ,70,70);  

  ingredientslist.push(mbowl);

  ingredientslist.push(Cocoa);

  ingredientslist.push(Sugar);

  ingredientslist.push(Milk);

  ingredientslist.push(Flour);

  ingredientslist.push(Eggs);

  ingredientslist.push(Eggs2);

  for(let i =0; i < ingredientslist.length;i++){

    ingredientslist[i].display();

  }

  //check if mouse is clicked over one of the ingredients, if yes pop it

  //when all ingredients are popped, move on to next screen with oven

}

function spaghettiscreen(){

  background(225,232,239);

}

function saladscreen(){

  background('#bfaea3');

}

​

//class for the ingredients that supports the drag and drop of ingredients

class ingredient{

​

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

    this.x = x;

    this.y = y;

    this.picture = picture;

    this.w = w;

    this.h = h;

  }

  //displaying the ingredients on screen

  display(){

    image(this.picture, this.x, this.y, this.w, this.h);

  }

  //function that allows the drag and drop

  draganddrop(){} 

}

​

function preload(){

  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');

}

​

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  //homepage();

  cupcakescreen();

  //console.log(mouseX, mouseY);

}