/*
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Name: Andrew Taylor
Block: Wednesday, 3:00 - 6:00PM, P02
My interactive drawing tells a simple story of a person crossing a bridge. Clicking the mouse will restart the story,
while pressing any key will display the narritive in which this drawing is poetically based. I tried to recreate a simple
2-Point perspective (see process work) where the angles of the pillars in the background and foreground are created in
relation the left and right vanishing points.
Mouse Click = Restarts story
Key Pressed = Displays Story
Mouse Movement = Pan veriticall & Horizontally across the scene
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
// Setup ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Tells Processing to create a canvas once.
void setup() {
// Ensures that anti aliasing is on
smooth();
// Set's canvas size to 400 x 400 pixels
size(400, 400);
// Starts drawing at framecount 1000
frameCount = 1200;
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Draw ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void draw() {
// Ensure that every shape drawn does not have a stroke around the perimeter, unless re-activated in specific circumstances
noStroke();
// Sets the defeault rect() angle argument to have values ( x, y, width, h);
// (I do change the defeault through the project)
rectMode(CORNER);
// OCEAN ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Colours the rectangle which makes up the ocean dark blue
fill(4, 16, 33);
// Creates the background for the water, which is built upon by the following lines (1 Shape)
rect(-400+mouseX/9, 200+mouseY/9, 1200, 1000);
// Dark blue portion of waves (15 shapes total)
// Colours rectangles dark blue
fill(31, 44, 63);
// Draws the rectangle shapes.
// Each shapes Y coordinate is based on the current status of the frame count.
// as the framecount gets higher, the Y value will increase at a rate of framecount/11,
// draws it lower after each frame.
rect(-300+mouseX/4, 350+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 330+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 310+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 290+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 270+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 250+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 230+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 210+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 190+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 170+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 150+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 130+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 110+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 90+mouseY/9+frameCount/11, 1000, 15);
rect(-300+mouseX/4, 70+mouseY/9+frameCount/11, 1000, 15);
// Gray portion of the waves (15 shapes total)
// Colours the middle section of the wave grey
fill(175);
// Draws the rectangle shapes.
// Each shapes Y coordinate is based on the current status of the frame count.
// as the framecount gets higher, the Y value will increase at a rate of framecount/11,
// draws it lower after each frame.
rect(-300+mouseX/4, 350+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 330+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 310+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 290+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 270+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 250+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 230+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 210+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 190+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 170+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 150+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 130+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 110+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 90+mouseY/9+frameCount/11, 1000, 5);
rect(-300+mouseX/4, 70+mouseY/9+frameCount/11, 1000, 5);
// Bright white portion of waves
// Colours the top shapes white (15 shapes total);
fill(255);
// Draws the rectangle shapes.
// Each shapes Y coordinate is based on the current status of the frame count.
// as the framecount gets higher, the Y value will increase at a rate of framecount/11,
// draws it lower after each frame.
rect(-300+mouseX/4, 347+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 327+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 307+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 287+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 267+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 247+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 227+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 207+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 187+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 167+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 147+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 127+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 107+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 87+mouseY/9+frameCount/11, 1000, 4);
rect(-300+mouseX/4, 67+mouseY/9+frameCount/11, 1000, 4);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// SKY ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Instead of creating a flat background, I decided to create multiple rectangles, which colour changes
// with the current state of the mouse X & Y location as well as the current framecount. As well, they
// are coded to change location based on the X & Y locations of the mouse as well.
// ** Each rectangle has a different fill value, as well as varying locations.
// Starting from TOP to Bottom, each rectangle gets gradually darker, and is
// created from the bottom of the previous rectangle, to 50 pixels below the
// inital Y axis coordinate.
// 12 Shapes total
fill(20, 25, 30+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, 250+mouseY/10, 1200, 50);
fill(21, 26, 31+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, 200+mouseY/10, 1200, 50);
fill(22, 27, 32+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, 150+mouseY/10, 1200, 50);
fill(23, 28, 33+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, 100+mouseY/2, 1200, 50);
fill(24, 29, 34+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, 50+mouseY/2, 1200, 50);
fill(25, 30, 35+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, mouseY/2, 1200, 50);
fill(26, 31, 36+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, -50+mouseY/2, 1200, 50);
fill(27, 32, 37+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, -100+mouseY/2, 1200, 50);
fill(28, 33, 38+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, -150+mouseY/2, 1200, 50);
fill(29, 33, 39+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, -200+mouseY/2, 1200, 50);
fill(30, 34, 40+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, -250+mouseY/2, 1200, 50);
fill(31, 35, 41+mouseY/15+frameCount/10);
rect(-400+mouseX/1.5, -300+mouseY/2, 1200, 50);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Lens Flare ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Fills the ellipse in the top right corner, based on location as well as the current frame count
fill(31, 35, 41+mouseY/15+frameCount/10);
ellipse(300+mouseX/6, mouseY/6, 225+mouseX/6, 150+mouseY/6);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Cloud # 1 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
fill(25+frameCount/6);
rect(frameCount/3+mouseX/5, 15+mouseY/2, 150, 50, 8);
fill(50+frameCount/6);
rect(frameCount/3+mouseX/3, mouseY/2, 150, 50, 8);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// LEFT PILLARS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// FURTHEST PILLAR ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Colours left quad shape dark brown
fill(141, 78, 23 );
// Created left quad angles based on the Left Vanishing Point
quad(-10+mouseX/9, 30+mouseY/9, 30+mouseX/9, 10+mouseY/9, 30+mouseX/9, 365+mouseY/9, -10+mouseX/9, 360+mouseY/9);
// Right quad
// Colours right quad lighter brown
fill(178, 112, 54);
// Creates right quad angles based on the right Vanishing Point
quad(30+mouseX/9, 10+mouseY/9, 120+mouseX/9, 20+mouseY/9, 120+mouseX/9, 360+mouseY/9, 30+mouseX/9, 365+mouseY/9);
// CLOSEST PILLAR ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// LOWER QUADS: shapes
// Colours bottom left quad light brown
fill(178, 112, 54);
// Creates bottom left quad based on the left Vanishing Point
quad(45+mouseX/8.5, 50+mouseY/8.5, 150+mouseX/8.5, 60+mouseY/8.5, 150+mouseX/8.5, 378+mouseY/8.5, 45+mouseX/8.5, 385+mouseY/8.5);
// Colours bottom right quad dark brown
fill(111, 48, 3);
// Creates bottom right quad based on the right Vanishing Point
quad(20+mouseX/8.5, 60+mouseY/8.5, 45+mouseX/8.5, 50+mouseY/8.5, 45+mouseX/8.5, 385+mouseY/8.5, 20+mouseX/8.5, 380+mouseY/8.5);
// UPPER QUADS: shapes and shadows ///////////////////////////////////////////////////////////////////////////////////////////////
// Colours top left quad dark green
fill(28, 70, 35);
// Creates top left quad based on the angle of the left vanishing point
quad(15+mouseX/8.5, 53+mouseY/8.5, 45+mouseX/8.5, 40+mouseY/8.5, 45+mouseX/8.5, 65+mouseY/8.5, 15+mouseX/8.5, 75+mouseY/8.5);
// Colours bottom left quad (SHADOW) dark brown
fill(61, 28, 0);
// Creates bottom left quad (SHADOW)
quad(15+mouseX/8.5, 75+mouseY/8.5, 45+mouseX/8.5, 65+mouseY/8.5, 48+mouseX/8.5, 70+mouseY/8.5, 20+mouseX/8.5, 80+mouseY/8.5);
// Colours top right quad light green
fill(76, 124, 84);
// Creates top left quad based on the angles towards the right Vanishing Point.
quad(45+mouseX/8.5, 40+mouseY/8.5, 155+mouseX/8.5, 55+mouseY/8.5, 155+mouseX/8.5, 75+mouseY/8.5, 45+mouseX/8.5, 65+mouseY/8.5);
//Colours bottom right quad (SHADOW) darker brown
fill(141, 78, 23);
// Creates bottom right quad
quad(45+mouseX/8.5, 65+mouseY/8.5, 152+mouseX/8.5, 75+mouseY/8.5, 152+mouseX/8.5, 80+mouseY/8.5, 45+mouseX/8.5, 70+mouseY/8.5);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// LEFT PILLAR ACCENTS /////////////////////////////////////////////////////////////////////////////////////////////////////////
// Creates the green grass quads, as well as their darker shadows and high lights (8 Shapes total)
// Sets default rectangle mode to CORNERS.
rectMode(CORNERS);
// Colours and creates the dark green shadows of the grass
fill(28, 70, 35);
rect(55+mouseX/8.5, 67+mouseY/8.5, 57+mouseX/8.5, 275+mouseY/8.5);
rect(95+mouseX/8.5, 70+mouseY/8.5, 97+mouseX/8.5, 225+mouseY/8.5);
rect(125+mouseX/8.5, 73+mouseY/8.5, 127+mouseX/8.5, 250+mouseY/8.5);
// Colours and creates the light green, primary portion of the rectangles
fill(76, 124, 84);
quad(57+mouseX/8.5, 45+mouseY/8.5, 77+mouseX/8.5, 50+mouseY/8.5, 77+mouseX/8.5, 275+mouseY/8.5, 57+mouseX/8.5, 275+mouseY/8.5 );
quad(97+mouseX/8.5, 55+mouseY/8.5, 117+mouseX/8.5, 60+mouseY/8.5, 117+mouseX/8.5, 225+mouseY/8.5, 97+mouseX/8.5, 225+mouseY/8.5);
quad(127+mouseX/8.5, 65+mouseY/8.5, 155+mouseX/8.5, 70+mouseY/8.5, 155+mouseX/8.5, 250+mouseY/8.5, 127+mouseX/8.5, 250+mouseY/8.5);
// Colours and creates the bright green high lights of the grass
fill(167, 218, 176);
quad(45+mouseX/8.5, 40+mouseY/8.5, 155+mouseX/8.5, 55+mouseY/8.5, 155+mouseX/8.5, 57+mouseY/8.5, 45+mouseX/8.5, 42+mouseY/8.5);
quad(153+mouseX/8.5, 55+mouseY/8.5, 155+mouseX/8.5, 55+mouseY/8.5, 155+mouseX/8.5, 248+mouseY/8.5, 153+mouseX/8.5, 248+mouseY/8.5);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Cloud #2///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Sets rectangle creation mode to CORNER
rectMode(CORNER);
// Colours clouds, starting at gray and increasing per framecount until white
fill(75+frameCount/6);
// Creates the cloud rectangle
rect(frameCount/1.5+mouseX/2, 100+mouseY/2, 200, 75, 8);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///Character/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Colours the character yellow
fill(175, 175, 0);
// Draws the character repedeatly based on the current framecount
// This gives the character a timed movement
rect(frameCount/5, 240+mouseY/5, 5, 10);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Right Pillar///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Colours and creates the bottom left quad, light brown
fill(141, 78, 23 );
quad(320+mouseX/10, 80+mouseY/4, 370+mouseX/10, 70+mouseY/4, 370+mouseX/10, 500+mouseY/4, 320+mouseX/10, 475+mouseY/4);
// Colours and creates the middle Left quad, darker brown (SHADOW)
fill(61, 28, 01);
quad(322+mouseX/10, 80+mouseY/4, 370+mouseX/10, 70+mouseY/4, 370+mouseX/10, 96+mouseY/4, 322+mouseX/10, 103+mouseY/4);
// Colours and creates the bottom right quad, dark brown
fill(61, 28, 01);
quad(370+mouseX/10, 70+mouseY/4, 420+mouseX/10, 80+mouseY/4, 420+mouseX/10, 600+mouseY/4, 370+mouseX/10, 600+mouseY/4);
// Colours and creates the middle right quad, darkest brown (SHADOW)
fill(21, 10, 1);
quad(370+mouseX/10, 90+mouseY/4, 420+mouseX/10, 105+mouseY/4, 420+mouseX/10, 110+mouseY/4, 370+mouseX/10, 95+mouseY/4);
// Colours and creates grass rectangles light green
fill(76, 124, 84);
rect(335+mouseX/10, 75+mouseY/5, 13, 250);
rect(310+mouseX/10, 80+mouseY/5, 13, 100);
//Colours and creates grass rectangle shadows dark green
fill(28, 70, 35);
rect(348+mouseX/10, 78+mouseY/5, 4, 247);
rect(323+mouseX/10, 83+mouseY/5, 4, 97);
// Creates the doors of the pillar
// Dark brown portion
fill(61, 28, 01);
rect(325+mouseX/10, 235+mouseY/5, 5, 15);
rect(325+mouseX/10, 230+mouseY/5, 10, 5);
// Darkest brown portion
fill(21, 10, 1);
rect(330+mouseX/10, 235+mouseY/5, 5, 15);
// Green QUAD ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Creates and colours the top left quad bright green
fill(76, 124, 84);
quad(310+mouseX/10, 50+mouseY/4, 370+mouseX/10, 30+mouseY/4, 370+mouseX/10, 90+mouseY/4, 310+mouseX/10, 100+mouseY/4);
// Creates and colours the top right quad dark green
fill(28, 70, 35);
quad(370+mouseX/10, 30+mouseY/4, 422+mouseX/10, 60+mouseY/4, 422+mouseX/10, 105+mouseY/4, 370+mouseX/10, 90+mouseY/4);
// Creates and colours the bright green highlights
fill(167, 218, 176);
rectMode(CORNERS);
rect(310+mouseX/10, 50+mouseY/4, 312+mouseX/10, 180+mouseY/5);
quad(310+mouseX/10, 48+mouseY/4, 370+mouseX/10, 30+mouseY/4, 370+mouseX/10, 33+mouseY/4, 310+mouseX/10, 51+mouseY/4);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Cloud # 3 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Changes rectangle mode to "CORNER"
rectMode(CORNER);
// Fills the cloud with a dark grey colour, which gradually
// becomes white through out the scene, based on the frame count
fill(75+frameCount/6);
// Creates the rectangle of the cloud. The X coordinate is based on the frame
// count meaning that it gradually will translate to the right side of the scene
rect(frameCount/3+mouseX/1, 250+mouseY/2, 100, 75, 8);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/// Bridge ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Fills the bridge and bridge supports red
fill(162, 38, 38);
// Creates the horizontal and vertical components of the bridge
rect(-400+mouseX/10, 250+mouseY/5, 735, 5);
rect(100+mouseX/10, 250+mouseY/5, 10, 150);
rect(200+mouseX/10, 250+mouseY/5, 10, 150);
// Fills the bridge railing a slightly brighter red
fill(180, 44, 4);
// Creates the horizontal bridge railing
rect(-400+mouseX/10, 245+mouseY/5, 735, 2);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///Mouse Clicked///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void mouseClicked() {
// When mouse is clicked, the frame count of the drawing is reset to the 5th iteration of the interactve drawing.
// This is used as a pseudo variable to display motion within the drawing and it is used by the majority of objects
// in my drawing. For example, the clouds and the character; when the mouse is pressed they are moved back to their
// initial position + 5(FrameCount) and gradually move as the framecount is increased.
frameCount = 5;
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Key Pressed/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void keyPressed() {
// When any key is pressed, this text will display at bottom of the interactive drawing
println("May the bridges I burn today, light the way to the ones I bunr tomorrow. I will not be burdened by the missteps of yesterday, but be fearless with every deliberate step I take, that propels me on m quest toward new horizons. I have but one life and it will live enormously. - L. Scott Harell");
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
