Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*assignment 1: interactive drawing
 The Train by Vivian Ha*/

/*interactions: 
 move mouse right to open the train doors, 
 and move left to close them.
 click mouse to flicker the lights 
 and invite a visitor
 (he's easy to miss, so if you can't
 see him, click a bunch of times 
 until you can make him out*/

/*note about comments: 
 purpose of "bg patch-up" is to colour in necessary
 parts that were missed*/

//setup canvas and modes
void setup() {
  size(400, 400);
  frameRate(10);
  rectMode(CORNERS);
  noStroke();
}

//input code for drawing
void draw() {
  //input background colour (the colour of the sky, seen when doors open)
  background (242, 241, 241);

  //DOORS

  //left door bg colour + bg patch-up: entire left bg of train from that point
  fill(203, 217, 215);
  rect(0-mouseX/4, 0, 378-mouseX/4, 400);

  //right door bg colour + bg patch-up remaining right bg of train from that point
  rect(378+mouseX/4, 0, 400+mouseX/4, 400);

  //bg patch-up: rest of train bg above doors
  rect(0, 0, 400, 65);

  //doors: window (first section: long, top and bottom portruding)
  fill(233, 236, 235);
  rect(283-mouseX/4, 110, 340-mouseX/4, 215);

  //doors: window (second section: wide, sides portruding)
  rect(275-mouseX/4, 115, 345-mouseX/4, 210);

  //doors: window (frame: top left corner)
  fill(57, 107, 102);
  rectMode(CORNER);
  rect(275-mouseX/4, 110, 8, 8);

  //doors: window (frame: bottom left corner)
  rectMode(CORNERS);
  rect(275-mouseX/4, 207, 283-mouseX/4, 215);

  //doors: window (frame: top right corner)
  rectMode(CORNER);
  rect(337-mouseX/4, 110, 8, 8);

  //doors: window (frame: bottom right corner)
  rect(337-mouseX/4, 207, 8, 8);

  //doors: window (frame: vertical lines)
  rect(267-mouseX/4, 118, 8, 89);
  rect(345-mouseX/4, 118, 8, 89);

  //doors: window (frame: horizontal lines)
  rect(283-mouseX/4, 102, 54, 8);
  rect(283-mouseX/4, 215, 54, 8);

  //doors: window (shading around framee: top two left corners)
  fill(159, 188, 184);
  rect(267-mouseX/4, 110, 8, 8);
  rect(275-mouseX/4, 102, 8, 8);

  //doors: window (shading around frame: bottom two left corners)
  rect(267-mouseX/4, 207, 8, 8);
  rect(275-mouseX/4, 215, 8, 8);

  //doors: window (shading around frame: top two right corners)
  rect(337-mouseX/4, 102, 8, 8);
  rect(345-mouseX/4, 110, 8, 8);

  //doors: window (shading around frame: bottom two right corners)
  rect(337-mouseX/4, 215, 8, 8);
  rect(345-mouseX/4, 207, 8, 8);

  //doors: window (shading around frame: vertical lines)
  rect(259-mouseX/4, 118, 8, 90);
  rect(353-mouseX/4, 118, 8, 90);

  //doors: window (shading around frame: horizontal lines)
  rect(283-mouseX/4, 94, 54, 8);
  rect(283-mouseX/4, 223, 54, 8);

  //white paper on door window
  fill(255);
  rect(310-mouseX/4, 120, 20, 30);

  //blue paper on door window
  fill(159, 188, 184);
  rect(285-mouseX/4, 170, 25, 30);

  //square on top right corner of door
  fill(233, 235, 234);
  rect(360-mouseX/4, 90, 10, 10);

  //doors: left centre line
  fill(57, 107, 102);
  rectMode(CORNERS);
  rect(370-mouseX/4, 90, 378-mouseX/4, 400);

  //doors: right centre line
  rect(378+mouseX/4, 90, 386+mouseX/4, 400);

  //doors: handle (dark part)
  rect(320-mouseX/4, 240, 335-mouseX/4, 280);

  //doors: handle (light part)
  fill(91, 148, 142);
  rect(328-mouseX/4, 250, 335-mouseX/4, 275);

  //doors: first top line (longer, thinner)
  fill(23, 43, 41);
  rect(180, 65, 400, 75);

  //doors: second top line (shorter, thicker)
  fill(57, 107, 102);
  rect(230, 75, 400, 90);

  //doors: bg patch-up: colour between two most-left vertical lines
  fill(203, 217, 215);
  rect(238, 90, 246, 400);

  //doors: first vertical line from left
  fill(57, 107, 102);
  rect(230, 90, 238, 400);

  //doors: second vertical line from left
  rect(246, 90, 254, 400);

  /*bg patch-up: left of doors, to cover over handle 
   and window when they move outside door frame*/
  fill(203, 217, 215);
  rect(150, 80, 230, 400);

  //ADVERTISEMENTS (shapes ordered from left to right, top to bottom)

  //bottom line of all advertisements
  fill(57, 107, 102);
  rectMode(CORNER);
  rect(0, 50, 400, 10);

  //lines separating advertisements
  rect(30, 0, 10, 30);
  rect(40, 0, 10, 60);
  rect(140, 0, 10, 30);
  rect(150, 0, 10, 60);
  rect(370, 0, 10, 30);

  //ads: white shapes
  fill(255);
  rect(150, 0, 100, 30);
  rect(160, 30, 100, 20);
  rect(270, 0, 100, 18);
  rect(270, 0, 80, 30);
  rect(270, 0, 65, 48);

  //ads: light blue shapes
  fill(233, 235, 234);
  rect(40, 0, 80, 30);
  rect(50, 30, 90, 20);
  rect(365, 30, 40, 19);
  rect(380, 0, 40, 40);

  //last ad line
  fill(57, 107, 102);
  rect(360, 30, 10, 30);  

  //ads: blue shapes
  fill(159, 190, 187);
  rect(60, 15, 30, 10);
  rect(75, 33, 40, 10);
  rect(175, 0, 60, 50);
  rect(235, 33, 10, 17);
  rect(270, 20, 38, 28);

  //ads: dark blue shapes (lines)
  fill(91, 148, 142);
  rect(162, 11, 30, 10);
  rect(180, 25, 30, 10);
  rect(200, 33, 35, 10);

  //ads: dark blue shapes (upside-down triangle shape)
  rect(258, 0, 50, 20);
  rect(265, 17, 20, 20);
  rect(270, 30, 8, 18);

  //POSTER

  //poster: bg
  fill(233, 235, 234);
  rect(190, 115, 35, 70);

  //poster: rectangle
  fill(159, 190, 187);
  rect(195, 120, 25, 50);

  //WINDOW

  //window: cloud one
  fill(255);
  rect(0, 110, 15, 43);
  rect(15, 120, 10, 10);
  rect(0, 130, 40, 50);
  rect(0, 145, 50, 10);
  rect(0, 155, 80, 20);
  rect(0, 165, 95, 10);


  //window: cloud two
  rect(130, 200, 30, 20);
  rect(150, 190, 20, 30);

  //window: frame (vertical line)
  fill(57, 107, 102);
  rectMode(CORNERS);
  rect(170, 100, 180, 240);

  //window: frame (horizontal lines)
  rect(0, 90, 170, 100);
  rect(0, 240, 170, 250);

  //window: shading around frame (top right corner)
  fill(159, 190, 187);
  rect(180, 90, 170, 100);

  //window: shading around frame (bottom right corner)
  rect(170, 240, 180, 250);

  //window: shading around frame (vertical line)
  rect(180, 100, 190, 240);

  //window: shading around frame (bottom horizontal line)
  rect(0, 250, 180, 270);

  //BENCHES

  //bench: bg
  fill(57, 107, 102);
  rect(0, 260, 170, 400);
  rect(0, 270, 180, 400);
  rect(0, 280, 190, 400);

  //bench: outline
  fill(91, 148, 142);
  rect(10, 260, 20, 320);
  rect(0, 320, 10, 330);
  rect(20, 320, 190, 330);
  rect(20, 360, 180, 370);
  rect(0, 380, 190, 390);
  rect(0, 390, 170, 400);

  //POLE

  //pole: top vertical lines
  fill(91, 148, 142);
  rect(0, 0, 10, 80);
  rect(0, 44, 20, 80);
  rect(110, 0, 125, 60);
  rect(118, 44, 138, 80);

  //pole: horizontal line + downward curve
  rect(0, 65, 180, 80);
  rect(155, 70, 200, 90);
  rect(190, 80, 210, 400);

  //black loop
  fill(23, 43, 41);
  rect(60, 60, 90, 70);
  rect(70, 60, 90, 80);
  rect(60, 80, 80, 90);

  //white connecting piece
  fill(255);
  rect(55, 90, 90, 110);

  //silver grip
  fill(233, 235, 234);
  rect(55, 100, 90, 110);
  rect(45, 110, 55, 135);
  rect(55, 135, 90, 145);
  rect(90, 110, 100, 135);

  //GIRL

  //head
  fill(239, 241, 241);
  rect(80, 200, 120, 260);

  //her right leg
  fill(159, 190, 187);
  rectMode(CORNER);
  rect(65, 350, 30, 30);
  rect(75, 380, 20, 30);

  //her left leg
  rect(105, 350, 30, 30);
  rect(105, 350, 20, 50);

  //her right hand
  fill(239, 241, 241);
  rectMode(CORNERS);
  rect(70, 340, 80, 360);
  rect(80, 345, 85, 360);

  //her left hand
  rect(115, 340, 125, 360);
  rect(110, 345, 115, 360);

  //eyes
  fill(23, 43, 41);
  rect(85, 235, 90, 245);
  rectMode(CORNER);
  rect(110, 235, 5, 10);

  //hair
  rectMode(CORNERS);
  rect(85, 190, 115, 220);
  rect(75, 200, 125, 210);
  rectMode(CORNER);
  rect(65, 210, 30, 10);
  rect(65, 210, 30, 20);
  rect(65, 210, 15, 60);
  rect(95, 220, 10, 5);
  rect(120, 210, 10, 50);
  rect(130, 220, 5, 60);

  //jacket
  fill(255);
  rectMode(CORNERS);
  rect(60, 270, 140, 320);
  rect(70, 280, 130, 340);

  //jacket zipper
  fill(159, 190, 187);
  rectMode(CORNER);
  rect(95, 295, 5, 45);

  //jacket outline
  rect(70, 335, 20, 5);
  rect(110, 335, 20, 5);

  //scarf
  rectMode(CORNERS);
  rect(70, 255, 125, 275);
  rect(95, 250, 120, 275);
  rect(125, 260, 130, 270);
  rect(60, 270, 70, 300);
  rect(70, 270, 80, 310);

  //hair over jacket
  fill(23, 43, 41);
  rectMode(CORNER);
  rect(125, 270, 10, 25);

  //shade under scarf

  fill(57, 107, 102);
  rect(70, 265, 10, 10);
  rect(80, 275, 45, 10);
  rect(110, 285, 15, 5);

  rectMode(CORNERS);
}

/*if mouse clicked, everything darkens, 
 the sky turns red, and a figure appears 
 from open doors. copy pasted necessary 
 code to recreate setup and drawing, then 
 change colours.
 
 changes underneath noted*/
void mousePressed() {
  //setup
  rectMode(CORNERS);
  noStroke();

  //same drawing with different colours and added figure

  //input background colour (the colour of the sky, seen when doors open)
  background (242, 241, 241);

  //DOORS

  //left door bg colour + bg patch-up: entire left bg of train from that point
  fill(132, 170, 166);
  rect(0, 0, 378, 400);

  //right door bg colour + bg patch-up remaining right bg of train from that point
  rect(378, 0, 400, 400);

  //bg patch-up: rest of train bg above doors
  rect(0, 0, 400, 65);

  //doors: window (first section: long, top and bottom portruding)
  fill(233, 236, 235);
  rect(283, 110, 340, 215);

  //doors: window (second section: wide, sides portruding)
  rect(275, 115, 345, 210);

  //doors: window (frame: top left corner)
  fill(57, 107, 102);
  rectMode(CORNER);
  rect(275, 110, 8, 8);

  //doors: window (frame: bottom left corner)
  rectMode(CORNERS);
  rect(275, 207, 283, 215);

  //doors: window (frame: top right corner)
  rectMode(CORNER);
  rect(337, 110, 8, 8);

  //doors: window (frame: bottom right corner)
  rect(337, 207, 8, 8);

  //doors: window (frame: vertical lines)
  rect(267, 118, 8, 89);
  rect(345, 118, 8, 89);

  //doors: window (frame: horizontal lines)
  rect(283, 102, 54, 8);
  rect(283, 215, 54, 8);

  //doors: window (shading around framee: top two left corners)
  fill(159, 188, 184);
  rect(267, 110, 8, 8);
  rect(275, 102, 8, 8);

  //doors: window (shading around frame: bottom two left corners)
  rect(267, 207, 8, 8);
  rect(275, 215, 8, 8);

  //doors: window (shading around frame: top two right corners)
  rect(337, 102, 8, 8);
  rect(345, 110, 8, 8);

  //doors: window (shading around frame: bottom two right corners)
  rect(337, 215, 8, 8);
  rect(345, 207, 8, 8);

  //doors: window (shading around frame: vertical lines)
  rect(259, 118, 8, 90);
  rect(353, 118, 8, 90);

  //doors: window (shading around frame: horizontal lines)
  rect(283, 94, 54, 8);
  rect(283, 223, 54, 8);

  //white paper on door window
  fill(255);
  rect(310, 120, 20, 30);

  //blue paper on door window
  fill(159, 188, 184);
  rect(285, 170, 25, 30);

  //square on top right corner of door
  fill(233, 235, 234);
  rect(360, 90, 10, 10);

  //doors: left centre line
  fill(57, 107, 102);
  rectMode(CORNERS);
  rect(370, 90, 378, 400);

  //doors: right centre line
  rect(378, 90, 386, 400);

  //doors: handle (dark part)
  rect(320, 240, 335, 280);

  //doors: handle (light part)
  fill(91, 148, 142);
  rect(328, 250, 335, 275);

  //doors: first top line (longer, thinner)
  fill(23, 42, 40);
  rect(180, 65, 400, 75);

  //doors: second top line (shorter, thicker)
  fill(57, 107, 102);
  rect(230, 75, 400, 90);

  //doors: bg patch-up: colour between two most-left vertical lines
  fill(132, 170, 166);
  rect(238, 90, 246, 400);

  //doors: first vertical line from left
  fill(57, 107, 102);
  rect(230, 90, 238, 400);

  //doors: second vertical line from left
  rect(246, 90, 254, 400);

  //change 1: doors open, see a red sky
  fill(135, 36, 35);
  rect(254, 90, 400, 400);

  /*bg patch-up: left of doors, to cover over handle 
   and window when they move outside door frame*/
  fill(132, 170, 166);
  rect(150, 80, 230, 400);

  //ADVERTISEMENTS (shapes ordered from left to right, top to bottom)

  //bottom line of all advertisements
  fill(44, 80, 77);
  rectMode(CORNER);
  rect(0, 50, 400, 10);

  //lines separating advertisements
  rect(30, 0, 10, 30);
  rect(40, 0, 10, 60);
  rect(140, 0, 10, 30);
  rect(150, 0, 10, 60);
  rect(370, 0, 10, 30);

  //ads: white shapes
  fill(155, 184, 180);
  rect(150, 0, 100, 30);
  rect(160, 30, 100, 20);
  rect(270, 0, 100, 18);
  rect(270, 0, 80, 30);
  rect(270, 0, 65, 48);

  //ads: light blue shapes
  fill(233, 235, 234);
  rect(40, 0, 80, 30);
  rect(50, 30, 90, 20);
  rect(365, 30, 40, 19);
  rect(380, 0, 40, 40);

  //last ad line
  fill(44, 80, 77);
  rect(360, 30, 10, 30);  

  //ads: blue shapes
  fill(159, 190, 187);
  rect(60, 15, 30, 10);
  rect(75, 33, 40, 10);
  rect(175, 0, 60, 50);
  rect(235, 33, 10, 17);
  rect(270, 20, 38, 28);

  //ads: dark blue shapes (lines)
  fill(91, 148, 142);
  rect(162, 11, 30, 10);
  rect(180, 25, 30, 10);
  rect(200, 33, 35, 10);

  //ads: dark blue shapes (upside-down triangle shape)
  rect(258, 0, 50, 20);
  rect(265, 17, 20, 20);
  rect(270, 30, 8, 18);

  //POSTER

  //poster: bg
  fill(155, 184, 180);
  rect(190, 115, 35, 70);

  //poster: rectangle
  fill(98, 151, 145);
  rect(195, 120, 25, 50);

  //WINDOW

  //change 2: red sky from window
  fill(135, 36, 35);
  rect(0, 100, 170, 170);

  //window: cloud one
  fill(104, 10, 38);
  rect(0, 110, 15, 43);
  rect(15, 120, 10, 10);
  rect(0, 130, 40, 50);
  rect(0, 145, 50, 10);
  rect(0, 155, 80, 20);
  rect(0, 165, 95, 10);


  //window: cloud two
  rect(130, 200, 30, 20);
  rect(150, 190, 20, 30);

  //window: frame (vertical line)
  fill(44, 80, 77);
  rectMode(CORNERS);
  rect(170, 100, 180, 240);

  //window: frame (horizontal lines)
  rect(0, 90, 170, 100);
  rect(0, 240, 170, 250);

  //window: shading around frame (top right corner)
  fill(98, 151, 145);
  rect(180, 90, 170, 100);

  //window: shading around frame (bottom right corner)
  rect(170, 240, 180, 250);

  //window: shading around frame (vertical line)
  rect(180, 100, 190, 240);

  //window: shading around frame (bottom horizontal line)
  rect(0, 250, 180, 270);

  //BENCHES

  //bench: bg
  fill(44, 80, 77);
  rect(0, 260, 170, 400);
  rect(0, 270, 180, 400);
  rect(0, 280, 190, 400);

  //bench: outline
  fill(60, 113, 108);
  rect(10, 260, 20, 320);
  rect(0, 320, 10, 330);
  rect(20, 320, 190, 330);
  rect(20, 360, 180, 370);
  rect(0, 380, 190, 390);
  rect(0, 390, 170, 400);

  //POLE

  //pole: top vertical lines
  fill(60, 113, 108);
  rect(0, 0, 10, 80);
  rect(0, 44, 20, 80);
  rect(110, 0, 125, 60);
  rect(118, 44, 138, 80);

  //pole: horizontal line + downward curve
  rect(0, 65, 180, 80);
  rect(155, 70, 200, 90);
  rect(190, 80, 210, 400);

  //black loop
  fill(23, 42, 40);
  rect(60, 60, 90, 70);
  rect(70, 60, 90, 80);
  rect(60, 80, 80, 90);

  //white connecting piece
  fill(155, 184, 180);
  rect(55, 90, 90, 110);

  //silver grip
  fill(155, 184, 180);
  rect(55, 100, 90, 110);
  rect(45, 110, 55, 135);
  rect(55, 135, 90, 145);
  rect(90, 110, 100, 135);

  //GIRL

  //head
  fill(159, 189, 186);
  rect(80, 200, 120, 260);

  //her right leg
  fill(98, 151, 145);
  rectMode(CORNER);
  rect(65, 350, 30, 30);
  rect(75, 380, 20, 30);

  //her left leg
  rect(105, 350, 30, 30);
  rect(105, 350, 20, 50);

  //her right hand
  fill(159, 189, 186);
  rectMode(CORNERS);
  rect(70, 340, 80, 360);
  rect(80, 345, 85, 360);

  //her left hand
  rect(115, 340, 125, 360);
  rect(110, 345, 115, 360);

  //eyes
  fill(23, 42, 40);
  rect(85, 235, 90, 245);
  rectMode(CORNER);
  rect(110, 235, 5, 10);

  //hair
  rectMode(CORNERS);
  rect(85, 190, 115, 220);
  rect(75, 200, 125, 210);
  rectMode(CORNER);
  rect(65, 210, 30, 10);
  rect(65, 210, 30, 20);
  rect(65, 210, 15, 60);
  rect(95, 220, 10, 5);
  rect(120, 210, 10, 50);
  rect(130, 220, 5, 60);

  //jacket
  fill(155, 184, 180);
  rectMode(CORNERS);
  rect(60, 270, 140, 320);
  rect(70, 280, 130, 340);

  //jacket zipper
  fill(98, 151, 145);
  rectMode(CORNER);
  rect(95, 295, 5, 45);

  //jacket outline
  rect(70, 335, 20, 5);
  rect(110, 335, 20, 5);

  //scarf
  rectMode(CORNERS);
  rect(70, 255, 125, 275);
  rect(95, 250, 120, 275);
  rect(125, 260, 130, 270);
  rect(60, 270, 70, 300);
  rect(70, 270, 80, 310);

  //hair over jacket
  fill(23, 42, 40);
  rectMode(CORNER);
  rect(125, 270, 10, 25);

  //shade under scarf

  fill(44, 80, 77);
  rect(70, 265, 10, 10);
  rect(80, 275, 45, 10);
  rect(110, 285, 15, 5);

  //FIGURE

  //figure's head outline (top horizontal lines)
  fill(23, 42, 40);
  rect(290, 110, 20, 10);
  rect(310, 100, 30, 10);
  rect(340, 110, 20, 10);

  //figure's body
  fill(23, 42, 40);
  rect(290, 110, 70, 150);
  rect(280, 170, 90, 150);
  rect(270, 190, 120, 90);
  rect(260, 230, 10, 150);
  rect(290, 110, 30, 300);
  rect(330, 330, 30, 300);
  rect(380, 220, 10, 180);

  //figure's head
  fill(159, 189, 186);
  rect(310, 110, 30, 70);
  rect(300, 120, 50, 50);

  rectMode(CORNERS);
}