/*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);
}