Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
 Fried Egg
 Selina Muriel
 
 Move your mouse up and down, and left and right to fry the egg and change the background colour!
 Pull the pan down all the way to see the fire flicker.
 
 */

void setup() {
  size(400, 400);
  frameRate(60);
}
void draw() {
  background((mouseY/6)+0, 153, (mouseY/4)+204);

  //stovetop shadows
  noStroke();
  rectMode(CORNERS);
  fill(0, 135);
  rect(17, 17, 40, 120);

  rect(17, 17, 120, 40);

  rect(383, 17, 360, 120); 

  rect(383, 17, 280, 40);

  rect(17, 383, 40, 280);

  rect(17, 383, 120, 360);

  rect(383, 380, 360, 280);

  rect(383, 380, 280, 360);

  //smaller stovetop shadows

  rect(177, 43, 220, 103);

  rect(177, 297, 220, 363);

  rect(37, 183, 97, 223);

  rect(303, 183, 363, 223);

  //thinner square stovetop shadow
  stroke(0, 135);
  strokeWeight(10);
  noFill();
  rectMode(CENTER);
  rect(200, 200, 265, 265);

  //thinner square for stovetop

  stroke(50);
  strokeWeight(20);
  noFill();
  rectMode(CENTER);
  rect(200, 200, 250, 250);

  //large rect for stovetop
  noStroke();
  rectMode(CORNERS);
  fill(50);

  rect(20, 20, 40, 120);

  rect(20, 20, 120, 40);

  rect(380, 20, 280, 40);

  rect(380, 20, 360, 120);

  rect(20, 380, 40, 280);

  rect(20, 380, 120, 360);

  rect(380, 380, 360, 280);

  rect(380, 380, 280, 360);

  //smaller rectangles for stovetop
  rect(180, 40, 220, 100);

  rect(180, 300, 220, 360);

  rect(40, 180, 100, 220);

  rect(300, 180, 360, 220);

  //transparent shadow of pan
  noStroke();
  ellipseMode(CENTER);
  fill(0, 135);
  ellipse((mouseX/16)+200, (mouseY/2)+200, 275, 275);

  //transparent shadow of handle)
  rect((mouseX/16)+185, (mouseY/2)+335, 215, 400);

  //transparent shadow for stovetop circle
  ellipse(200, 200, 160, 160);

  //flames
  fill(240, 77, 12, 200 - (frameCount%10)*4);

  ellipse(182, 275, 25, 25);

  ellipse(165, 265, 25, 25);

  ellipse(150, 255, 25, 25);

  ellipse(138, 240, 25, 25);

  ellipse(130, 225, 25, 25);

  ellipse(125, 208, 25, 25);

  ellipse(125, 190, 25, 25);

  ellipse(130, 175, 25, 25);

  ellipse(135, 160, 25, 25);

  ellipse(145, 175, 25, 25);

  ellipse(150, 170, 25, 25);

  ellipse(155, 165, 25, 25);

  ellipse(145, 145, 25, 25);

  ellipse(160, 135, 25, 25);

  ellipse(175, 130, 25, 25);

  ellipse(190, 125, 25, 25);

  ellipse(205, 125, 25, 25);

  ellipse(220, 130, 25, 25);

  ellipse(235, 135, 25, 25);

  ellipse(250, 143, 25, 25);

  ellipse(260, 155, 25, 25);

  ellipse(270, 170, 25, 25);

  ellipse(274, 187, 25, 25);

  ellipse(275, 203, 25, 25);

  ellipse(272, 218, 25, 25);

  ellipse(267, 235, 25, 25);

  ellipse(260, 250, 25, 25);

  ellipse(245, 260, 25, 25);

  ellipse(230, 270, 25, 25);


  //circles for stovetop
  fill(50);
  ellipse(200, 200, 150, 150);

  fill(80);
  ellipse(200, 200, 130, 130);

  //rectangle 1 for handle
  strokeWeight(2);
  stroke(162, 160);
  fill(50, 255);
  rect((mouseX/16)+190, (mouseY/2)+325, (mouseX/16)+210, 400);

  //rectangles for hand and palm
  fill(225, 229, 191);
  stroke(250, 195, 111);
  rect((mouseX/16)+210, (mouseY/2)+360, (mouseX/16)+220, (mouseY/2)+410);
  rect((mouseX/16)+185, (mouseY/2)+350, (mouseX/16)+205, (mouseY/2)+410);
  rect((mouseX/16)+195, (mouseY/2)+360, (mouseX/16)+220, (mouseY/2)+372);

  //lines for fingers
  line((mouseX/16)+185, (mouseY/2)+365, (mouseX/16)+195, (mouseY/2)+365);
  line((mouseX/16)+185, (mouseY/2)+380, (mouseX/16)+203, (mouseY/2)+380);
  line((mouseX/16)+185, (mouseY/2)+395, (mouseX/16)+203, (mouseY/2)+395);
  line((mouseX/16)+185, (mouseY/2)+410, (mouseX/16)+203, (mouseY/2)+410);

  //circle for the outer dark grey lining of the pan  
  fill(50);
  strokeWeight(2);
  stroke(162, 160);
  ellipse((mouseX/16)+200, (mouseY/2)+200, 260, 260);

  // circle for the lighter grey of the pan!
  noStroke();
  fill(165);  
  ellipse((mouseX/16)+200, (mouseY/2)+200, 240, 240);

  //circle for the bottom of the pan
  fill(155);
  ellipse((mouseX/16)+200, (mouseY/2)+200, 210, 210);

  //circle 1 for the whites
  fill(255, 255 - (mouseY/2));
  ellipse((mouseX/15)+200, (mouseY/2.5)+210, 110, 120);

  //circle 2 for the whites
  fill(255, 255 - (mouseY/2));
  ellipse((mouseX/15)+200, (mouseY/2.5)+210, 100, 100);

  // circle for the yolk!
  stroke(255, 199, 77);
  strokeWeight(2);
  fill(255, 255, 116);
  ellipse((mouseX/15)+200, (mouseY/2.5)+220, 40, 40);
}