Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//AUTOBIOGRAPHY//

/*

 INTERACTIVE MEDIA COMPUTATION 
 DEAN ELLIOTT
 SEPT. 19, 2017
 
 Horizontal movement of the cursor readjusts the eyes and ears. Verticle movement readjusts eyes along the Y-axis and drops the pants! Clicking the mouse causes a wink.
 
 */






void setup() 
{
  size(400, 400);
}



void draw() 
{

  // Establishing a constant frame rate. This ensures that the clock (see below) runs independently. This also resets the frame rate after the mouse is clicked for a wink.
  frameRate(60); 



  //Setting up background stage.

  noStroke();

  // Set Background (wall) to taupe.
  background(196, 183, 168);
  noStroke();


  // Floor
  fill(175, 175, 175);
  rect(0, 320, 400, 400);

  // Shadow
  fill(0, 0, 0, 55);
  ellipse(210, 355, 115, 35);

  // Clock - Sine and Cosine are utilized to make the outer ends of the lines (clock arms) revolve.  
  stroke(0, 0, 0);
  fill(255, 255, 255);
  ellipse(50, 80, 60, 60);
  line((cos(frameCount*0.01))*30+50, (sin(frameCount*0.01))*30+80, 50, 80);
  line((cos(frameCount*0.001))*20+50, (sin(frameCount*0.001))*20+80, 50, 80);


  //Resetting noStroke after it was used for the clock
  noStroke();

  //Locker Base
  fill(92, 174, 158);
  rectMode(CORNERS);
  rect(110, 107, 400, 320);



  // Locker Doors
  fill(152, 212, 200);


  //Door 1
  quad(120, 120, 116, 320, 184, 320, 176, 118);

  //Door 2
  quad(179, 117, 189, 320, 238, 320, 241, 120);

  //Door 3
  quad(245, 121, 242, 320, 298, 320, 290, 121);

  //Door 4
  quad(296, 122, 303, 320, 343, 320, 348, 117);

  //Door 5
  quad(352, 120, 348, 320, 400, 320, 390, 120);



  // Locker Handles
  stroke(46, 67, 63);
  strokeWeight(2);


  //Handle 1
  line(137, 210, 127, 210);
  line(127, 210, 126, 237);
  line(126, 237, 138, 239);

  //Handle 2
  line(200, 200, 190, 200);
  line(190, 200, 189, 227);
  line(189, 227, 200, 231);

  //Handle 3
  line(260, 207, 250, 207);
  line(250, 207, 249, 230);
  line(249, 230, 261, 233);

  //Handle 4
  line(315, 200, 305, 200);
  line(305, 200, 304, 227);
  line(304, 227, 316, 231);

  //Handle 5
  line(370, 207, 360, 207);
  line(360, 207, 359, 230);
  line(359, 230, 371, 233);



  // Locker Vents


  //Vent 1
  line(130, 132, 162, 130);
  line(130, 137, 162, 135);
  line(130, 142, 162, 140);
  line(130, 147, 162, 145);

  //Vent 2
  line(190, 127, 222, 130);
  line(190, 132, 222, 135);
  line(190, 137, 222, 140);
  line(190, 142, 222, 145);

  //Vent 3
  line(250, 129, 282, 130);
  line(250, 134, 282, 135);
  line(250, 139, 282, 140);
  line(250, 144, 282, 145);

  //Vent 4
  line(310, 132, 340, 130);
  line(310, 137, 340, 135);
  line(310, 142, 340, 140);
  line(310, 147, 340, 145);

  //Vent 5 
  line(360, 129, 382, 130);
  line(360, 134, 382, 135);
  line(360, 139, 382, 140);
  line(360, 144, 382, 145);



  // Locker Locks
  fill(205, 205, 205);


  //Lock 1
  ellipse(136, 248, 6, 6);

  // Lock 2
  ellipse(198, 240, 6, 6);

  //Lock 3
  ellipse(258, 242, 6, 6);

  //Lock 4
  ellipse(311, 237, 6, 6);

  //Lock 5
  ellipse(366, 240, 6, 6);
  rectMode(CORNER);



  // Creating Geek Guy


  // Shadow
  noStroke();
  fill(0, 0, 0, 55);
  ellipse(210, 355, 115, 35);


  //Skin colour used
  fill(234, 223, 201);


  // Ears - Moves horizontally against the direction of the cursor.
  fill(234, 223, 201);


  //Left Ear
  ellipse(157 - (mouseX*0.01), 110, 16, 25);

  //Right Ear
  ellipse(247- (mouseX*0.01), 110, 16, 25);

  //Left inner ear lobe
  ellipse(157, 110, 6, 12);

  //Right inner ear lobe
  ellipse(246, 110, 6, 12);



  // Head
  rect(160, 60, 80, 60);



  // Neck
  rect(200, 140, 10, 30);



  // Jaw
  ellipse(200, 120, 80, 60);



  // Legs


  //Left Leg
  rect(192, 284, 8, 58);

  //Right Leg
  rect(222, 284, 8, 58);



  //Arms


  //Left Arm
  quad(172, 177, 145, 210, 150, 220, 180, 182);
  quad(143, 212, 174, 240, 174, 235, 155, 210);
   
  //Right Arm 
  quad(248, 177, 269, 210, 264, 220, 240, 182);
  quad(270, 212, 245, 240, 245, 235, 260, 210);



  // Hands


  //Left Hand
  rect(170, 234, 10, 25);

  //Right Hand
  rect(240, 234, 10, 25);



  // Nose
  fill(227, 215, 172);
  triangle(192, 120, 206, 120, 200, 127);



  // Hair


  //Large hair
  fill(113, 101, 84);
  triangle(180, 60, 192, 36, 240, 60);

  //Small Hair
  triangle(160, 60, 172, 50, 180, 60);

  //Left Side hair
  triangle(160, 60, 160, 80, 167, 60);

  //Right Side Hair
  triangle(240, 60, 240, 83, 233, 60);



  // Glasses
  fill(255, 255, 255);
  stroke(0, 0, 0);
  strokeWeight(2);


  //Left Lens
  rect(165, 95, 27, 15);

  //Right Lens
  rect(205, 95, 27, 15);

  //Bridge
  line(194, 105, 205, 105);



  // Mouth
  noFill();
  curve(100, 100, 180, 135, 220, 135+(mouseY*-0.05), 100+(mouseY*-0.05), 100);



  // Cheeks
  noStroke();
  fill(255, 77, 77, 0+(mouseY*+0.09));


  //Left Blush
  ellipse(180, 120, 16, 16);

  //Right Blush
  ellipse(220, 120, 16, 16);




  // Torso

  //Vest
  fill(224, 196, 138);
  rect(180, 160, 60, 95);

  //Buttons
  fill(0, 0, 0);
  ellipse(210, 187, 3, 3);
  ellipse(210, 195, 3, 3);

  //Pocket and Pens
  strokeWeight(1);
  stroke(0,0,0);
  line(220, 176, 235, 176);
  strokeWeight(2);
  stroke(119, 140, 211);
  line(230, 178, 230, 171);
  stroke(0, 0, 0);
  line(225, 178, 223, 171);

  // Undershirt
  noStroke();
  fill(255, 255, 255);

  //Left Shoulder
  triangle(180, 160, 180, 185, 168, 170);

  //Right Shoulder
  triangle(240, 160, 240, 185, 252, 170);

  //Middle
  triangle(203, 160, 210, 174, 217, 160);




  // Underpants
  fill(255, 255, 255);
  rect(180, 255, 60, 30);
  fill(250, 115, 115);

  //Polka Dots - radians were used to specify the end sides of the arc
  ellipse(192, 278, 10, 10);
  ellipse(218, 278, 10, 10);
  ellipse(208, 262, 10, 10);
  arc(180, 255, 14, 14, radians(350), radians(460)); 
  arc(240, 255, 14, 14, radians(90), radians(180));
  arc(240, 285, 14, 14, radians(180), radians(270));
  fill(152, 212, 200);
  rect(203, 280, 17, 5);



  // Pupils - Follow cursor vertically and horizonatally. 
  fill(0, 0, 0);
  rectMode(CENTER);

  //Left pupil
  rect(175 + (mouseX *0.02), 97 + (mouseY *0.03), 12, 6);

  // Right pupil
  rect(216+ (mouseX *0.02), 97+ (mouseY *0.03), 12, 6);



  //Pants - Raise and lower along the Y-axis to reveal underpants beneath.
  rectMode(CORNER);

  //Crotch
  fill(119, 140, 211);
  rect(180, 255+ mouseY/6, 60, 40-mouseY/18);

  //Left Pant
  rect(180, 255+mouseY/6, 20, 100 -mouseY/5);

  //Right Pant
  rect (221, 255 +mouseY/6, 20, 100-mouseY/5);



  // Bowtie
  fill(230, 50, 50);
  triangle(210, 160, 188, 152, 188, 168);
  triangle(210, 160, 232, 152, 232, 168);
  fill(250, 115, 115);
  ellipse(210, 160, 10, 10);

  // Shoes
  fill(0, 0, 0);

  //Left Shoe
  quad(165, 360, 200, 360, 200, 342, 180, 342);

  //Right Shoe
  quad(221, 342, 221, 360, 253, 360, 240, 342);
} 

//Mouse click funtion lowers the frame rate for the wink.
void mousePressed() {
  frameRate(5);
  
  
  //Wink
  fill(234, 223, 201);
  rect(167, 97, 25, 12);
}



/* 

REFERENCES 
The projects listed below are credited to their creators, respectively. They assisted by demonstrating various function abilities.  



//Moving background (Used sin/cos for Clock)
//http://www-acad.sheridanc.on.ca/PROG14998/2015/interactive-drawing/interactive_drawing_27/index.html

// Frame rate drop/Mouse press (Used for Wink)
http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/jason_pushkar_interactive_drawing/index.html

//Object descending with Y-axis (Used for Pants)
http://www-acad.sheridanc.on.ca/PROG14998/2015/interactive-drawing/interactive_drawing_51/index.html
http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/emily_bendevis_interactive_drawing/index.html

//Object moving with X-axis (Used for Ears)
http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/paolo_di_filippo_interactive_drawing/index.html
http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/cael_wood_interactive_drawing/index.html

//Following Eyes
http://www-acad.sheridanc.on.ca/PROG14998/2015/interactive-drawing/interactive_drawing_60/index.html

//Formating
http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/william_lu_interactive_drawing/index.html

*/