Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* Interactive Drawing
 "Haunted Painting"
 Liana Valdez
 Sept. 17, 2018 */

void setup() {
  //set size of window
  size(400, 400);
}

void draw() {
  //set frame rate
  frameRate(60);

  //set background colour (dark grey)
  background(45, 45, 45);

  //wall- wallpaper faded stripes
  noStroke();
  fill(112, 112, 112);
  rect(0, 0, 40, 200);
  rect(80, 0, 40, 200);
  rect(160, 0, 40, 200);
  rect(240, 0, 40, 200);
  rect(320, 0, 40, 200);

  //wall- wallpaper true colours
  fill(77, 55, 99, mouseX/(width*1.0)*255);
  rect(0, 0, 400, 200);
  fill(119, 94, 142, mouseX/(width*1.0)*255);
  rect(0, 0, 40, 200);
  rect(80, 0, 40, 200);
  rect(160, 0, 40, 200);
  rect(240, 0, 40, 200);
  rect(320, 0, 40, 200);

  //wall- divider
  noStroke();
  fill(201, 189, 169);
  rect(0, 200, 400, 30);
  fill(237, 224, 203);
  rect(0, 210, 400, 10);

  //wall- panels
  fill(237, 224, 203);
  rect(0, 230, 400, 170);
  stroke(201, 189, 169);
  strokeWeight(4);
  line(60, 230, 60, 400);
  line(120, 230, 120, 400);
  line(180, 230, 180, 400);
  line(240, 230, 240, 400);
  line(300, 230, 300, 400);
  line(360, 230, 360, 400);

  //painting- frame & background
  noStroke();
  fill(76, 29, 9);
  rect(235, 20, 150, 160);
  fill(107, 41, 13);
  rect(245, 30, 130, 140);
  fill(8, 76, 33);
  rect(255, 40, 110, 120);

  //painting- veil
  fill(31, 33, 31);
  ellipse(310, 90, 40, 40);
  rect(270, 90, 80, 70);

  //painting- body
  ellipseMode(RADIUS);
  fill(109, 8, 37);
  ellipse(310, 135, 30, 15);
  rect(280, 137, 60, 23);

  //painting- arms
  fill(214, 183, 126);
  ellipse(287, 143, 7, 5);
  fill(214, 183, 126);
  ellipse(332, 154, 7, 5);
  fill(135, 21, 54);
  rect(290, 138, 50, 10);
  fill(153, 12, 52);
  rect(280, 149, 50, 10);

  //painting- head & neck
  fill(214, 183, 126);
  ellipse(310, 90, 25, 25);
  rect(305, 110, 10, 10);
  ellipse(310, 120, 5, 5);

  //painting- nose
  fill(140, 124, 75);
  triangle(307, 100, 310, 95, 312, 100);

  //painting- eyes
  fill(255); 
  ellipse(300, 90, 6, 7);
  ellipse(320, 90, 6, 7);

  //PAINTING'S PUPILS: Follow mouse left, right, up, & down
  //painting- moving pupils
  fill(0);
  ellipse(297+mouseX/50, 85+mouseY/47, 3, 3);
  ellipse(317+mouseX/50, 85+mouseY/47, 3, 3);
  
  //PAINTING EXPRESSION: Sours as mouse moves left
  //painting- moving eyebrows (angled inwards and downwards)
  stroke(0);
  strokeWeight(1.5);
  line(295, 75, 305, 81-mouseX/45);
  line(323, 75, 313, 81-mouseX/45);

  //painting- moving mouth (line of mouth decreases into pout)
  line(305-mouseX/50, 105, 315, 105);

  //table
  noStroke();
  fill(130, 70, 13);
  rect(230, 310, 150, 40);
  fill(81, 44, 8);
  rect(230, 350, 150, 40);
  fill(130, 70, 13);
  rect(250, 360, 110, 20);
  rect(230, 390, 20, 10);
  rect(360, 390, 20, 10);
  fill(242, 203, 104);
  ellipse(305, 370, 5, 5);

  //tablecloth
  stroke(242, 203, 104);
  strokeWeight(2);
  fill(168, 15, 30);
  rect(240, 320, 130, 20);
  
  //FLOWER: Colour drains from petals as mouse moves left
  //flower- faded
  stroke(75, 122, 28);
  strokeWeight(3);
  noFill();
  arc(296, 250, 10, 50, PI+QUARTER_PI, TWO_PI);
  noStroke();
  fill(94, 69, 83);
  ellipse(310, 210, 13, 9);
  ellipse(290, 210, 13, 9);
  ellipse(300, 200, 9, 13);
  ellipse(300, 220, 9, 13);
  fill(40);
  ellipse(300, 210, 6, 6);
  
  //flower- true colours & fade in/out from center effect
  fill(170, 0, 93, mouseX/(width*1.0)*255);
  ellipse(310, 210, mouseX/31, 9);
  ellipse(290, 210, mouseX/31, 9);
  ellipse(300, 200, 9, mouseX/31);
  ellipse(300, 220, 9, mouseX/31);
  fill(255, 234, 104, mouseX/(width*1.0)*255);
  ellipse(300, 210, 6, 6);

  //vase
  fill(75, 163, 163);
  ellipse(305, 300, 30, 35);
  rect(291, 250, 31, 40);

  //person- pants
  stroke(24, 52, 76);
  strokeWeight(40);
  line(157, 340, 125, 400);
  line(187, 340, 200, 400);
  line(157, 360, 184, 360);

  //person- right hand
  noStroke();
  fill(226, 177, 102);
  ellipse(73, 252, 11, 11);

  //person- right arm
  stroke(37, 76, 54);
  strokeWeight(25);
  line(138, 255, 110, 290);
  line(110, 290, 80, 260);

  //CANDLE GLOW: Opacity decreases as mouse moves left
  //candle- fading glow
  noStroke();
  fill(255, 165, 22, mouseX/(width*1.0)*110);
  ellipse(53, 195, 60, 60);
  fill(186, 161, 65, mouseX/(width*1.0)*110);
  ellipse(53, 195, 50, 50);
  fill(255, 235, 25, mouseX/(width*1.0)*75);
  ellipse(53, 195, 40, 40);

  //candle- holder
  fill(158, 137, 56);
  ellipse(53, 250, 25, 15);
  fill(186, 161, 65);
  ellipse(53, 250, 20, 10);

  //candle
  fill(240);
  ellipse(53, 250, 10, 7);
  rect(43, 200, 20, 50);
  fill(200);
  ellipse(53, 200, 10, 7);
  stroke(0);
  strokeWeight(2);
  line(53, 200, 53, 187);
  
  //FLAME: Opacity decreases as mouse moves left
  //candle- fading flame
  noStroke();
  fill(255, 165, 22, mouseX/(width*1.0)*150);
  ellipse(53, 190, 10, 20);
  fill(252, 227, 22, mouseX/(width*1.0)*150);
  ellipse(53, 190, 5, 15);

  //person- body
  noStroke();
  fill(79, 150, 110);
  ellipse(170, 253, 40, 25);
  rect(130, 250, 80, 100);

  //person- left hand
  fill(226, 177, 102);
  ellipse(205, 330, 11, 11);

  //person- left arm
  stroke(37, 76, 54);
  strokeWeight(25);
  line(202, 255, 235, 280);
  line(235, 280, 210, 320);

  //person- head & neck
  noStroke();
  fill(226, 177, 102);
  ellipse(170, 170, 40, 50);
  rect(160, 215, 20, 20);
  ellipse(170, 237, 10, 10);

  //person- nose
  fill(163, 123, 62);
  triangle(160, 187, 167, 177, 170, 187);
  
  /*PERSON'S PUPILS: Follow mouse left, right, up, & down, 
  grows as mouse moves right, shrinks as mouse moves left*/
  //person- eyes
  fill(255);
  ellipse(150, 165, 10, 13);
  ellipse(180, 165, 10, 13);

  //person- moving & shrinking pupils
  fill(0);
  ellipse(145+mouseX/40, 157+mouseY/27, 2+mouseX/80, 2+mouseX/80);
  ellipse(175+mouseX/47, 157+mouseY/27, 2+mouseX/80, 2+mouseX/80);

  //person- mouth
  noFill();
  stroke(0);
  strokeWeight(2);
  arc(165, 205, 15, 10, PI+QUARTER_PI, TWO_PI);

  //person- eyebrows
  line(160, 140, 141, 144);
  line(174, 144, 191, 138);
}

void mousePressed() {
  
  //SCREEN: Goes black for 4 frames, only eyes will be visible
  frameRate(4);
  //darkness flickers
  fill(0);
  rect(0, 0, 400, 400);

  //painting- redrawing eyes
  fill(255); 
  ellipse(300, 90, 6, 7);
  ellipse(320, 90, 6, 7);

  //PAINTING: Pupils turn red
  //painting- red moving pupils
  noStroke();
  fill(255, 0, 0);
  ellipse(297+mouseX/50, 85+mouseY/47, 3, 3);
  ellipse(317+mouseX/50, 85+mouseY/47, 3, 3);

  //person- redrawing eyes
  fill(255);
  ellipse(150, 165, 10, 13);
  ellipse(180, 165, 10, 13);

  //person- moving & shrinking pupils
  fill(0);
  ellipse(145+mouseX/40, 157+mouseY/27, 2+mouseX/80, 2+mouseX/80);
  ellipse(175+mouseX/47, 157+mouseY/27, 2+mouseX/80, 2+mouseX/80);
}

void keyPressed() {
  //DIALOGUE: Prints person's thoughts
  println("I feel like somebody's watching me...");
}