Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
Introduction to Media Computation -- Interactive Image project
Prof: Nicholas Hesler

Created by: Nathan Arcari
    "The Boogy Man"

When the player takes a look at his shadow, all seems okay, 
but as soon as he looks away, out comes the monster to play.
The Boogy Man will strike, and when the time is just right,
attempting to strangle his victim with his eyes glowing bright.
*/
void setup() {
  size(400, 400);
  frameRate(30);
}



void draw() {

  //set framerate
  frameRate(40);

  //set background
  background((-mouseY/15)+140, 105, (mouseX/15)+120);
  fill((-mouseY/15)+160, 130, (mouseX/15)+150);
  rect(0, 287.5, 400, 287.5);

  colorMode(RGB, 255, 255, 255, 400);
  noStroke();

  //shadow trail
  fill(100, 0, 100);
  quad(227.5, 287.5, 302.5, 287.5, 140, 350, 90, 350);

  //draw the man
  fill(200, 200, 255);
  ellipse(115, 300, 50, 50);
  rect(90, 300, 50, 50);
  ellipse(115, 250, 50, 50);

  //draw the face
  fill(255);
  quad((mouseX/25)+94, 247, (mouseX/22)+102, 250, (mouseX/23)+105, 257, (mouseX/25)+97, 255);
  quad((mouseX/25)+123, 247, (mouseX/23)+112, 250, (mouseX/23)+109, 257, (mouseX/25)+117, 255);

  //draw normal shadow
  fill(100, 0, 100);
  ellipse(265, 137.5, 75, 75);
  ellipse(265, 212.5, 75, 75);
  rect(227.5, 212.5, 75, 75);

  //draw monster shadow
  fill(100, 0, 100, abs(400-mouseX));

  triangle(152.5, 125, 177.5, 150, 152.5, 100);
  triangle(mouseY/80+138, mouseY/40+65, 152.5, 125, 152.5, 100);
  triangle(152.5, 150, 177.5, 150, 152.5, 125);
  triangle(mouseY/80+138, mouseY/40+102.5, 152.5, 150, 152.5, 125);
  triangle(165, 150, 152.5, 150, 165, 162.5);
  triangle(165, 150, 177.5, 150, 177.5, 162.5);
  quad(mouseY/160+177.5, mouseY/30+40, 165, 62.5, 152.5, 87.5, 171.25, 75);
  quad(171.25, 75, 152.5, 87.5, 152.5, 100, 177.5, 87.5);
  triangle(177.5, 87.5, 152.5, 100, 177.5, 150);
  quad(177.5, 100, 177.5, 137.5, 190, 162.5, 190, 125);
  quad(177.5, 100, 177.5, 87.5, 190, 62.5, 215, mouseY/80+45);
  triangle(abs(400-mouseY)/80+230, mouseY/40+35, 215, mouseY/80+45, 215, 60);
  triangle(215, mouseY/80+45, 177.5, 100, 215, 137.5);
  triangle(177.5, 100, 202.5, 150, 202.5, 125);
  quad(215, 62.5, 215, 112.5, 252.5, 75, 240, 62.5);
  triangle(abs(400-mouseY)/80+265, mouseY/40+52.5, 240, 62.5, 252.5, 75);
  triangle(215, 62.5, 240, 62.5, abs(400-mouseY)/80+252.5, mouseY/40+40);
  triangle(240, 87.5, 252.5, 75, 265, 87.5);
  triangle(abs(400-mouseY)/80+290, mouseY/40+82.5, 265, 87.5, 252.5, 75);
  quad(240, 87.5, 265, 87.5, 227.5, 175, 215, 112.5);
  quad(265, 87.5, 227.5, 175, 215, 200, 265, 200);
  quad(277.5, 125, 265, 185, 302.5, 190, 302.5, 175);
  triangle(abs(400-mouseY)/80+315, mouseY/40+190, 302.5, 190, 302.5, 175);
  triangle(265, 87.5, 265, 125, 302.5, 125);
  triangle(265, 87.5, abs(400-mouseY)/80+315, mouseY/40+115, 302.5, 125);
  triangle(277.5, 125, 302.5, 125, 302.5, 175);
  triangle(302.5, 125, 302.5, 150, abs(400-mouseY)/80+327.5, mouseY/40+152.5);
  triangle(302.5, 150, 302.5, 175, abs(400-mouseY)/80+315, mouseY/40+177.5);
  quad(290, 187.5, 283.75, 200, 302.5, 212.5, 302.5, 190);
  triangle(abs(400-mouseY)/80+308.75, mouseY/40+205.5, 302.5, 190, 302.5, 205);
  triangle(252.5, 200, 202.5, 200, 227.5, 250);
  triangle(215, 200, 202.5, 175, 202.5, 200);
  triangle(202.5, 200, 190, 187.5, 190, 175);
  triangle(202.5, 200, 177.5, 175, 177.5, 200);
  triangle(202.5, 225, 177.5, 225, 165, 187.5);
  triangle(177.5, 225, 202.5, 237.5, 215, 225);
  quad(202.5, 200, 177.5, 200, 202.5, 225, 215, 225);


  //draw shadow eye
  noStroke();
  fill(140, 105, 120, abs(400-mouseX));
  triangle(165, 112.5+mouseY/50, 165, 125, 202.5, 87.5);

  fill(255, 130, 150, abs(400-mouseX));
  ellipse(171, 116, mouseY/50-12, mouseY/50-12);



  /*flying particles with random values (plugged in from an RNG on google)
   
   two colours of particles (pinkish and purple) with the opacity set to change according to mouseX with the shadow
   
   the x values are:
   "phase shift" +sin(framecount*"horizontal speed")*"horizontal distance range"
   
   the y values are:
   abs[<--to reverse the direction]("starting y axis"-((("speed"*abs(400-mouseY)*framecount)/"second speed value")%"distance travelled before looping back to starting y axis"))  */

  fill(200, 20, 150, abs(400-mouseX)/5.8);
  ellipse(100+sin(frameCount*0.07)*20, abs(653-(((3*abs(400-mouseY)*frameCount)/202)%653)), 12, 12);
  ellipse(200+sin(frameCount*0.06)*22, abs(759-(((3.5*abs(400-mouseY)*frameCount)/111)%759)), 17, 17);
  ellipse(300+sin(frameCount*0.07)*13, abs(571-(((2.8*abs(400-mouseY)*frameCount)/286)%571)), 29, 29);
  ellipse(400+sin(frameCount*0.07)*19, abs(710-(((3.1*abs(400-mouseY)*frameCount)/187)%710)), 25, 25);
  ellipse(150+sin(frameCount*0.06)*22, abs(699-(((2.4*abs(400-mouseY)*frameCount)/112)%699)), 11, 11);
  ellipse(250+sin(frameCount*0.07)*20, abs(523-(((3.1*abs(400-mouseY)*frameCount)/214)%523)), 20, 20);
  ellipse(350+sin(frameCount*0.08)*14, abs(491-(((2.9*abs(400-mouseY)*frameCount)/54)%491)), 28, 28);
  ellipse(50+sin(frameCount*0.07)*19, abs(622-(((3.4*abs(400-mouseY)*frameCount)/172)%622)), 21, 21);
  ellipse(sin(frameCount*0.05)*11, abs(469-(((2.5*abs(400-mouseY)*frameCount)/264)%469)), 24, 24);
  //switching the colour slightly
  fill(240, 20, 120, abs(400-mouseX)/5.6);
  ellipse(125+sin(frameCount*0.06)*18, abs(650-(((3.2*abs(400-mouseY)*frameCount)/106)%650)), 50, 50);
  ellipse(225+sin(frameCount*0.06)*15, abs(500-(((3*abs(400-mouseY)*frameCount)/288)%500)), 11, 11);
  ellipse(325+sin(frameCount*0.07)*18, abs(755-(((2.7*abs(400-mouseY)*frameCount)/208)%755)), 44, 44);
  ellipse(425+sin(frameCount*0.06)*12, abs(535-(((3*abs(400-mouseY)*frameCount)/131)%535)), 32, 32);
  ellipse(175+sin(frameCount*0.08)*21, abs(468-(((3.5*abs(400-mouseY)*frameCount)/56)%468)), 10, 10);
  ellipse(275+sin(frameCount*0.06)*16, abs(622-(((2.6*abs(400-mouseY)*frameCount)/140)%622)), 38, 38);
  ellipse(375+sin(frameCount*0.05)*23, abs(485-(((3.4*abs(400-mouseY)*frameCount)/57)%485)), 43, 43);
  ellipse(75+sin(frameCount*0.06)*18, abs(533-(((2.8*abs(400-mouseY)*frameCount)/115)%533)), 18, 18);
  ellipse(25+sin(frameCount*0.06)*10, abs(743-(((2.5*abs(400-mouseY)*frameCount)/93)%743)), 21, 21);
  //switching the colour slightly
  fill(180, 20, 150, abs(400-mouseX)/5.4);
  ellipse(112+sin(frameCount*0.05)*20, abs(441-(((2.5*abs(400-mouseY)*frameCount)/174)%441)), 30, 30);
  ellipse(212+sin(frameCount*0.07)*22, abs(505-(((2.6*abs(400-mouseY)*frameCount)/157)%505)), 16, 16);
  ellipse(312+sin(frameCount*0.09)*13, abs(772-(((3.2*abs(400-mouseY)*frameCount)/283)%772)), 24, 24);
  ellipse(412+sin(frameCount*0.04)*19, abs(496-(((2.6*abs(400-mouseY)*frameCount)/62)%496)), 16, 16);
  ellipse(162+sin(frameCount*0.06)*22, abs(793-(((3.5*abs(400-mouseY)*frameCount)/186)%793)), 29, 29);
  ellipse(262+sin(frameCount*0.09)*20, abs(612-(((3.1*abs(400-mouseY)*frameCount)/284)%612)), 11, 11);
  ellipse(362+sin(frameCount*0.05)*14, abs(654-(((2.9*abs(400-mouseY)*frameCount)/109)%654)), 15, 15);
  ellipse(62+sin(frameCount*0.10)*19, abs(473-(((2.7*abs(400-mouseY)*frameCount)/232)%473)), 11, 11);
  ellipse(12+sin(frameCount*0.04)*11, abs(772-(((3.1*abs(400-mouseY)*frameCount)/264)%772)), 19, 19);
  //switching the colour slightly
  fill(200, 20, 180, abs(400-mouseX)/5.2);
  ellipse(137+sin(frameCount*0.07)*18, abs(482-(((2.9*abs(400-mouseY)*frameCount)/236)%482)), 20, 20);
  ellipse(237+sin(frameCount*0.10)*15, abs(636-(((3*abs(400-mouseY)*frameCount)/113)%636)), 27, 27);
  ellipse(337+sin(frameCount*0.07)*18, abs(411-(((3.4*abs(400-mouseY)*frameCount)/222)%411)), 28, 28);
  ellipse(437+sin(frameCount*0.08)*12, abs(534-(((2.6*abs(400-mouseY)*frameCount)/202)%534)), 25, 25);
  ellipse(187+sin(frameCount*0.05)*21, abs(697-(((2.5*abs(400-mouseY)*frameCount)/260)%697)), 31, 31);
  ellipse(287+sin(frameCount*0.09)*16, abs(581-(((3.6*abs(400-mouseY)*frameCount)/108)%581)), 20, 20);
  ellipse(387+sin(frameCount*0.08)*23, abs(733-(((3*abs(400-mouseY)*frameCount)/185)%733)), 12, 12);
  ellipse(87+sin(frameCount*0.09)*18, abs(675-(((2.6*abs(400-mouseY)*frameCount)/138)%675)), 26, 26);
  ellipse(37+sin(frameCount*0.05)*10, abs(506-(((2.9*abs(400-mouseY)*frameCount)/300)%506)), 19, 19);
}





//set the mouse click to create tentacles and a glow for the eye. The hair will also raise

void mousePressed() {

  //set framerate hack
  frameRate(0.9);

  //set background with lighter colour to represent a flash of light
  background((-mouseY/15)+170, 135, (mouseX/15)+150);
  fill((-mouseY/15)+190, 155, (mouseX/15)+170);
  rect(0, 287.5, 400, 287.5);

  //shadow trail with darker colour
  fill(80, 0, 80);
  quad(227.5, 287.5, 302.5, 287.5, 140, 350, 90, 350);

  //draw normal shadow with darker colour
  fill(80, 0, 80);
  stroke(80, 0, 80);

  ellipse(265, 137.5, 75, 75);
  ellipse(265, 212.5, 75, 75);
  rect(227.5, 212.5, 75, 75);

  /*draw shadow tentacles*/
  //first from the left
  quad(170, 325, 115, 350, 65, 237.5, 90, 237.5);
  quad(90, 237.5, 65, 237.5, 78, 188, 90, 200);
  quad(78, 188, 90, 200, 98, 177, 90, 163);
  quad(98, 177, 90, 163, 115, 175, 115, 188);
  triangle(115, 175, 115, 188, 128, 200);

  //second from the left
  quad(202, 312, 170, 325, 140, 287.5, 165, 287.5);
  quad(140, 287.5, 165, 287.5, 177.5, 250, 152.5, 250);
  quad(177.5, 250, 152.5, 250, 127.5, 212.5, 140, 212.5);
  triangle(127.5, 212.5, 140, 212.5, 152.5, 187.5);

  //third from the left
  quad(227.5, 300, 202.5, 312.5, 182, 287.5, 202.5, 287.5);
  quad(182, 287, 202.5, 287.5, 215, 262.5, 204, 262.5);
  triangle(215, 262.5, 204, 262.5, 200, 250);

  //first to the right
  quad(290, 288, 290, 256, 328, 235, 340, 238);
  quad(328, 235, 340, 238, 347, 194, 340, 200);
  triangle(347, 194, 340, 200, 323, 188);

  //second to the right
  quad(270, 290, 160, 340, 303, 320, 315, 287.5);
  quad(303, 320, 315, 287.5, 353, 263, 365, 287.5);
  quad(353, 263, 365, 287.5, 390, 238, 365, 238);
  quad(390, 238, 365, 238, 365, 188, 379, 190);
  quad(365, 188, 379, 190, 390, 150, 378, 157);
  quad(390, 150, 378, 157, 353, 125, 353, 112);
  quad(353, 125, 353, 112, 328, 138, 340, 138);
  triangle(328, 138, 340, 138, 346, 150);

  //first bottom tentacle from the right
  quad(353, 290, 315, 300, 378, 325, 390, 313);
  quad(390, 313, 378, 325, 385, 331, 400, 338);
  quad(385, 331, 400, 338, 378, 363, 378, 350);
  triangle(378, 363, 378, 350, 353, 350);

  //second bottom tentacle from the right
  quad(315, 300, 265, 313, 253, 350, 290, 350);
  quad(253, 350, 290, 350, 290, 363, 265, 375);
  quad(290, 363, 265, 375, 303, 388, 303, 365);
  quad(303, 388, 303, 365, 328, 350, 328, 364);
  quad(328, 350, 328, 364, 340, 375, 354, 375);
  triangle(340, 375, 354, 375, 340, 388);

  //third bottom tentacle from the right
  quad(215, 313, 153, 325, 203, 350, 240, 350);
  quad(203, 350, 240, 350, 193, 390, 178, 375);
  quad(193, 390, 178, 375, 115, 375, 103, 388);
  quad(115, 375, 103, 388, 66, 365, 78, 363);
  triangle(66, 365, 78, 363, 78, 338);



  //draw monster shadow with hair up and darker colour

  triangle(152.5, 125, 177.5, 150, 152.5, 100);
  triangle(mouseY/80+138, mouseY/20+55, 152.5, 125, 152.5, 100);
  triangle(152.5, 150, 177.5, 150, 152.5, 125);
  triangle(mouseY/80+138, mouseY/20+92.5, 152.5, 150, 152.5, 125);
  triangle(165, 150, 152.5, 150, 165, 162.5);
  triangle(165, 150, 177.5, 150, 177.5, 162.5);
  quad(mouseY/160+177.5, mouseY/15+27, 165, 62.5, 152.5, 87.5, 171.25, 75);
  quad(171.25, 75, 152.5, 87.5, 152.5, 100, 177.5, 87.5);
  triangle(177.5, 87.5, 152.5, 100, 177.5, 150);
  quad(177.5, 100, 177.5, 137.5, 190, 162.5, 190, 125);
  quad(177.5, 100, 177.5, 87.5, 190, 62.5, 215, mouseY/40+40);
  triangle(abs(400-mouseY)/80+230, mouseY/20+25, 215, mouseY/40+40, 215, 60);
  triangle(215, mouseY/40+40, 177.5, 100, 215, 137.5);
  triangle(177.5, 100, 202.5, 150, 202.5, 125);
  quad(215, 62.5, 215, 112.5, 252.5, 75, 240, 62.5);
  triangle(abs(400-mouseY)/80+265, mouseY/20+42.5, 240, 62.5, 252.5, 75);
  triangle(215, 62.5, 240, 62.5, abs(400-mouseY)/80+252.5, mouseY/20+30);
  triangle(240, 87.5, 252.5, 75, 265, 87.5);
  triangle(abs(400-mouseY)/80+290, mouseY/20+72.5, 265, 87.5, 252.5, 75);
  quad(240, 87.5, 265, 87.5, 227.5, 175, 215, 112.5);
  quad(265, 87.5, 227.5, 175, 215, 200, 265, 200);
  quad(277.5, 125, 265, 185, 302.5, 190, 302.5, 175);
  triangle(abs(400-mouseY)/80+315, mouseY/20+180, 302.5, 190, 302.5, 175);
  triangle(265, 87.5, 265, 125, 302.5, 125);
  triangle(265, 87.5, abs(400-mouseY)/80+315, mouseY/20+105, 302.5, 125);
  triangle(277.5, 125, 302.5, 125, 302.5, 175);
  triangle(302.5, 125, 302.5, 150, abs(400-mouseY)/80+327.5, mouseY/20+142.5);
  triangle(302.5, 150, 302.5, 175, abs(400-mouseY)/80+315, mouseY/20+167.5);
  quad(290, 187.5, 283.75, 200, 302.5, 212.5, 302.5, 190);
  triangle(abs(400-mouseY)/80+308.75, mouseY/20+195.5, 302.5, 190, 302.5, 205);
  triangle(252.5, 200, 202.5, 200, 227.5, 250);
  triangle(215, 200, 202.5, 175, 202.5, 200);
  triangle(202.5, 200, 190, 187.5, 190, 175);
  triangle(202.5, 200, 177.5, 175, 177.5, 200);
  triangle(202.5, 225, 177.5, 225, 165, 187.5);
  triangle(177.5, 225, 202.5, 237.5, 215, 225);
  quad(202.5, 200, 177.5, 200, 202.5, 225, 215, 225);

  //draw shadow eye
  noStroke();
  fill(200, 165, 180);
  triangle(165, 112.5+mouseY/50, 165, 125, 202.5, 87.5);

  fill(255, 130, 150);
  ellipse(171, 116, mouseY/70-12, mouseY/70-12);

  //draw the man with a lighter colour
  fill(210, 210, 255);
  ellipse(115, 300, 50, 50);
  rect(90, 300, 50, 50);
  ellipse(115, 250, 50, 50);

  //draw the face
  fill(0);
  quad((mouseX/40)+94, 250, (mouseX/38)+102, 255, (mouseX/38)+105, 257, (mouseX/40)+97, 253);
  quad((mouseX/40)+123, 249, (mouseX/38)+112, 255, (mouseX/38)+109, 257, (mouseX/40)+117, 253);


  //eye glowing
  fill(255, 35, 0, abs((400-mouseY)+50)/10);
  noStroke();

  ellipse(171, 116, 15, 15);
  ellipse(171, 116, 45, 45);
  ellipse(171, 116, 75, 75);
  ellipse(171, 116, 110, 110);
  ellipse(171, 116, 160, 160);
  ellipse(171, 116, 192, 192);
  ellipse(171, 116, 230, 230);
  ellipse(171, 116, 276, 276);
  ellipse(171, 116, 331, 331);
}