Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
Man Dying Horribly
Shawn Morey P01

-Move the mouse left and right to scroll the background
-Move the mouse up and down to watch the man slowly be submerged in lava as his soul leaves his body
*/

void setup()
{
  size(400, 400);
  noStroke();
  rectMode(CORNER);
  ellipseMode(CORNER);
}

void draw()
{ 
  //BG Layer 1
  //Draws the background
  background(#6A1712);

  //BG Layer 2
  //Moving mouse left and right moves the background on the x axis
  //Ridges are ordered from left to right
  fill(#93342F);
  rect(-25 + mouseX/8, 180, 400, 100);
  
  rect(-50 + mouseX/8, 120, 25, 160);
  quad(-25 + mouseX/8, 120, -5 + mouseX/8, 140, -5 + mouseX/8, 180, -25 + mouseX/8, 180);
  rect(-5 + mouseX/8, 140, 20, 40);
  triangle(15 + mouseX/8, 140, 55 + mouseX/8, 180, 15 + mouseX/8, 180);
  triangle(75 + mouseX/8, 180, 95 + mouseX/8, 180, 95 + mouseX/8, 160);
  rect(95 + mouseX/8, 160, 20, 20);
  triangle(115 + mouseX/8, 180, 115 + mouseX/8, 160, 135 + mouseX/8, 180);
  triangle(155 + mouseX/8, 180, 195 + mouseX/8, 180, 195 + mouseX/8, 140);
  rect(195 + mouseX/8, 140, 20, 40);
  quad(215 + mouseX/8, 140, 235 + mouseX/8, 160, 235 + mouseX/8, 180, 215 + mouseX/8, 180);
  rect(235 + mouseX/8, 160, 40, 20);
  triangle(275 + mouseX/8, 160, 275 + mouseX/8, 180, 295 + mouseX/8, 180);
  triangle(315 + mouseX/8, 180, 335 + mouseX/8, 180, 335 + mouseX/8, 160);
  rect(335 + mouseX/8, 160, 20, 20);
  quad(355 + mouseX/8, 180, 355 + mouseX/8, 160, 375 + mouseX/8, 140, 375 + mouseX/8, 180);
  rect(375 + mouseX/8, 140, 25, 140);

  //BG Layer 3
  //Moving mouse left and right moves the background on the x axis
  //Moves at half the rate than BG layer 2 for a paralax effect
  //Ridges are ordered from left to right
  fill(#AD5652);
  rect(-50 + mouseX/4, 260, 400, 100);
  rect(-100 + mouseX/4, 200, 50, 140);
  rect(350 + mouseX/4, 200, 50, 140);
  
  rect(-50 + mouseX/4, 200, 20, 60);
  quad(-30 + mouseX/4, 200, 10 + mouseX/4, 240, 10 + mouseX/4, 260, -30 + mouseX/4, 260);
  rect(10 + mouseX/4, 240, 40, 20);
  triangle(50 + mouseX/4, 240, 70 + mouseX/4, 260, 50 + mouseX/4, 260);
  triangle(90 + mouseX/4, 260, 110 + mouseX/4, 260, 110 + mouseX/4, 240);
  rect(110 + mouseX/4, 240, 40, 20);
  quad(150 + mouseX/4, 240, 170 + mouseX/4, 220, 170 + mouseX/4, 260, 150 + mouseX/4, 260);
  rect(170 + mouseX/4, 220, 20, 40);
  quad(190 + mouseX/4, 220, 210 + mouseX/4, 240, 210 + mouseX/4, 260, 190 + mouseX/4, 260);
  rect(210 + mouseX/4, 240, 20, 20);
  triangle(230 + mouseX/4, 240, 250 + mouseX/4, 260, 230 + mouseX/4, 260);
  triangle(270 + mouseX/4, 260, 310 + mouseX/4, 220, 310 + mouseX/4, 260);
  rect(310 + mouseX/4, 220, 20, 40);
  quad(330 + mouseX/4, 220, 350 + mouseX/4, 200, 350 + mouseX/4, 260, 330 + mouseX/4, 260);

  //Soul
  //As mouseY increases it will move up the screen in a sine wave pattern
  
  //Body
  fill(#2ED1FC);
  rect(170 + 15*sin(mouseY * 0.04), (70 - mouseY * 1.1) + 300, 60, 35);
  triangle(170 + 15*sin(mouseY * 0.04), (100 - mouseY * 1.1) + 300, 170 + 15*sin(mouseY * 0.04), (120 - mouseY * 1.1) + 300, 200 + 15*sin(mouseY * 0.04), (100 - mouseY * 1.1) + 300);
  triangle(170 + 15*sin(mouseY * 0.04), (100 - mouseY * 1.1) + 300, 200 + 15*sin(mouseY * 0.04), (120 - mouseY * 1.1) + 300, 230 + 15*sin(mouseY * 0.04), (100 - mouseY * 1.1) + 300);
  triangle(200 + 15*sin(mouseY * 0.04), (100 - mouseY * 1.1) + 300, 230 + 15*sin(mouseY * 0.04), (100 - mouseY * 1.1) + 300, 230 + 15*sin(mouseY * 0.04), (120 - mouseY * 1.1) + 300);
  ellipse(170 + 15*sin(mouseY * 0.04), (40 - mouseY * 1.1) + 300, 60, 60);

  //Face
  fill(#B4E7FF);
  ellipse(175 + 15*sin(mouseY * 0.04), (45 - mouseY * 1.1) + 300, 50, 50);
  fill(#2ED1FC);
  ellipse(180 + 15*sin(mouseY * 0.04), (60 - mouseY * 1.1) + 300, 10, 10);
  ellipse(210 + 15*sin(mouseY * 0.04), (60 - mouseY * 1.1) + 300, 10, 10);
  arc(190 + 15*sin(mouseY * 0.04), (70 - mouseY * 1.1) + 300, 20, 20, PI, PI*2);

  //Smoke
  //rotates constantly and increases in size as mouseY increases
  //rectMode is temporarily set to CENTER to make rotating easier
  //change origin to center of each smoke puff
  //convert degrees to radians for simplicity
  rectMode(CENTER);
  fill(80);

  pushMatrix();
  translate(70, 310);
  rotate(radians(-frameCount));
  rect(0, 0, 10 + (mouseY * 0.01), 10 + (mouseY * 0.01), 3);
  popMatrix();

  pushMatrix();
  translate(70, 280);
  rotate(radians(-frameCount));
  rect(0, 0, 20 + (mouseY * 0.01), 20 + (mouseY * 0.01), 3);
  popMatrix();

  pushMatrix();
  translate(330, 310);
  rotate(radians(frameCount));
  rect(0, 0, 10 + (mouseY * 0.01), 10 + (mouseY * 0.01), 3);
  popMatrix();

  pushMatrix();
  translate(330, 280);
  rotate(radians(frameCount));
  rect(0, 0, 20 + (mouseY * 0.01), 20 + (mouseY * 0.01), 3);
  popMatrix();

  rectMode(CORNER);

  //Man
  //sinks into the lava and darkens as mouseY increases
  //Body and Head
  fill(230 - mouseY * 0.3);
  rect(180, 300 + 0.02*mouseY, 40, 50);
  ellipse(170, 250 + 0.02*mouseY, 60, 60);
  fill(255 - mouseY * 0.3);
  ellipse(175, 255 + 0.02*mouseY, 50, 50);

  //Face
  //does not move to create the illusion that he is tiliting his head
  fill(220 - mouseY * 0.3);
  ellipse(180, 265, 10, 10);
  ellipse(210, 265, 10, 10);
  arc(190, 270, 20, 20, PI, PI*2);

  //Hands
  //raises hands as he sinks
  ellipse(148, 290 - 0.03*mouseY, 20, 20);
  ellipse(232, 290 - 0.03*mouseY, 20, 20);

  //Lava
  //Lava rises and becomes more yellow as mouseY increases 
  fill(237, 115 + mouseY * 0.06, 67);
  rect(0, 340 - 0.03  *mouseY, 400, 80);

  //Lava Surface   
  ellipse(-20, 330 - 0.03*mouseY, 40, 20);
  ellipse(20, 330 - 0.03*mouseY, 40, 20);
  ellipse(60, 330 - 0.03*mouseY, 40, 20);
  ellipse(100, 330 - 0.03*mouseY, 40, 20);
  ellipse(140, 330 - 0.03*mouseY, 40, 20);
  ellipse(180, 330 - 0.03*mouseY, 40, 20);
  ellipse(220, 330 - 0.03*mouseY, 40, 20);
  ellipse(260, 330 - 0.03*mouseY, 40, 20);
  ellipse(300, 330 - 0.03*mouseY, 40, 20);
  ellipse(340, 330 - 0.03*mouseY, 40, 20);
  ellipse(380, 330 - 0.03*mouseY, 40, 20);
}