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