/************************************************************************************
The Pesky Fly
Designed, Programmed and Tested by:
Kyle Budge
For additional notes or for viewing rough sketches see attached pages.
Created as Assignment #1 (Interactive Drawing) for:
Nicolas Hesler
Introduction to Media Computation
Designed, programmed and tested with Processing v3.2.1
************************************************************************************/
/*
Instructions:
1. Moving the mouse will move the fly around the window.
2. Clicking will try to swat the fly.
*/
void setup() {
/*
Setting up window size, removing cursor from the drawing and smoothing shapes.
Removed cursor to make it seem like the fly is your cursor.
Smooth was required to make the animations smoother when moving the fly around.
*/
size(400, 400);
noCursor();
smooth(2);
}
void draw() {
/*
Setting the background and frame rate.
While frameRate(60) is not needed on initialization, it is needed to reset
frame rate after the Swatter is created and changes the frame rate.
View mousePressed() function for reference.
*/
frameRate(60);
background(157, 244, 247);
ellipseMode(CENTER);
rectMode(CENTER);
//Setting
/*
Drawing background and all shapes contained in the setting.
Nothing in the setting has any interaction with the mouse.
Everything is static in the setting.
*/
//Grass
//Requires rectMode(CORNERS) to place outside of window properly
rectMode(CORNERS);
strokeWeight(1);
stroke(37, 72, 22);
fill(75, 144, 45);
rect(-10, 160, 410, 410);
rectMode(CENTER);
//Clouds
/*
Requires 2 layers to get the right effect.
First layer is shadows and second layer is the cloud on top of first layer.
*/
//Cloud Shadows
noStroke();
fill(200, 200);
//Leftmost Group
ellipse(15, 20, 40, 40);
ellipse(55, 40, 20, 20);
ellipse(35, 20, 40, 40);
ellipse(35, 50, 40, 40);
ellipse(15, 40, 40, 40);
//Central Group
ellipse(225, 30, 20, 20);
ellipse(225, 40, 20, 20);
ellipse(205, 40, 20, 20);
ellipse(215, 20, 20, 20);
ellipse(215, 50, 20, 20);
ellipse(205, 30, 20, 20);
//Rightmost Group
ellipse(375, 20, 40, 40);
ellipse(355, 0, 40, 40);
ellipse(325, 20, 40, 40);
ellipse(345, 30, 40, 40);
//White Clouds
fill(250, 200);
//Leftmost Group
ellipse(20, 20, 40, 40);
ellipse(60, 40, 20, 20);
ellipse(40, 20, 40, 40);
ellipse(40, 50, 40, 40);
ellipse(20, 40, 40, 40);
//Central Group
ellipse(230, 30, 20, 20);
ellipse(230, 40, 20, 20);
ellipse(210, 40, 20, 20);
ellipse(220, 20, 20, 20);
ellipse(220, 50, 20, 20);
ellipse(210, 30, 20, 20);
//Rightmost Group
ellipse(380, 20, 40, 40);
ellipse(360, 0, 40, 40);
ellipse(330, 20, 40, 40);
ellipse(350, 30, 40, 40);
//Picnic Blanket
/*
Requires a lot of quads all connected together to create a whole shape.
Shadow is a solid shape placed behind and left of the other quads.
Reading the blanket quads code may be quite tricky, good luck.
*/
//Blanket Shadow
noStroke();
fill(37, 77, 22);
quad(115, 200, 55, 345, 320, 345, 255, 200);
//Setting stroke for entire blanket
stroke(128);
//White Blanket Pieces
//Fill changes per row to show shading effect.
//Row 1
fill(195);
quad(120, 200, 110, 220, 135, 220, 140, 200);
quad(165, 200, 160, 220, 190, 220, 190, 200);
quad(215, 200, 220, 220, 242, 220, 235, 200);
//Row 2
fill(205);
quad(135, 220, 130, 240, 158, 240, 160, 220);
quad(190, 220, 190, 240, 222, 240, 220, 220);
quad(242, 220, 250, 240, 279, 240, 270, 220);
//Row 3
fill(215);
quad(102, 240, 95, 260, 122, 260, 130, 240);
quad(158, 240, 155, 260, 190, 260, 190, 240);
quad(222, 240, 225, 260, 255, 260, 250, 240);
//Row 4
fill(225);
quad(122, 260, 118, 280, 150, 280, 155, 260);
quad(190, 260, 190, 280, 230, 280, 225, 260);
quad(255, 260, 260, 280, 295, 280, 288, 260);
//Row 5
fill(235);
quad(85, 280, 79, 300, 110, 300, 118, 280);
quad(150, 280, 145, 300, 190, 300, 190, 280);
quad(230, 280, 232, 300, 268, 300, 260, 280);
//Row 6
fill(245);
quad(110, 300, 105, 320, 142, 320, 145, 300);
quad(190, 300, 190, 320, 235, 320, 232, 300);
quad(268, 300, 275, 320, 311, 320, 305, 300);
//Row 7
fill(255);
quad(70, 320, 60, 340, 100, 340, 105, 320);
quad(142, 320, 140, 340, 190, 340, 190, 320);
quad(235, 320, 240, 340, 280, 340, 275, 320);
//Coloured Blanket Pieces
//Fill changes per row to show shading effect.
//Row 1
fill(219, 60, 60);
quad(140, 200, 135, 220, 160, 220, 165, 200);
quad(190, 200, 190, 220, 220, 220, 215, 200);
quad(235, 200, 242, 220, 270, 220, 260, 200);
//Row 2
fill(219, 50, 50);
quad(110, 220, 102, 240, 130, 240, 135, 220);
quad(160, 220, 158, 240, 190, 240, 190, 220);
quad(220, 220, 222, 240, 250, 240, 242, 220);
//Row 3
fill(219, 40, 40);
quad(130, 240, 122, 260, 155, 260, 158, 240);
quad(190, 240, 190, 260, 225, 260, 222, 240);
quad(250, 240, 255, 260, 288, 260, 279, 240);
//Row 4
fill(219, 30, 30);
quad(95, 260, 85, 280, 118, 280, 122, 260);
quad(155, 260, 150, 280, 190, 280, 190, 260);
quad(225, 260, 230, 280, 260, 280, 255, 260);
//Row 5
fill(219, 20, 20);
quad(118, 280, 110, 300, 145, 300, 150, 280);
quad(190, 280, 190, 300, 232, 300, 230, 280);
quad(260, 280, 268, 300, 305, 300, 295, 280);
//Row 6
fill(219, 10, 10);
quad(79, 300, 70, 320, 105, 320, 110, 300);
quad(145, 300, 142, 320, 190, 320, 190, 300);
quad(232, 300, 235, 320, 275, 320, 268, 300);
//Row 7
fill(219, 0, 0);
quad(105, 320, 100, 340, 140, 340, 142, 320);
quad(190, 320, 190, 340, 240, 340, 235, 320);
quad(275, 320, 280, 340, 320, 340, 311, 320);
//Blanket Corners
strokeWeight(5);
point(120, 200);
point(260, 200);
point(60, 340);
point(320, 340);
strokeWeight(3);
line(120, 200, 115, 195);
line(260, 200, 265, 195);
line(60, 340, 50, 350);
line(320, 340, 330, 350);
//Pesky Fly
/*
Fly is constructed using various shapes and techniques.
Motion is, mostly, done through simple pmouseX/Y calculations.
Back body is caluclated differently because it needs to trail further behind.
Wings use a simple Sine calculation to adjust height of ellipse and create
the illusion of flapping.
Editor Note: Curves were difficult to create correctly. Binding them to mouse
movement and create a layering effect turned out to be more difficult
than anticpated.
*/
//Back Body
strokeWeight(1);
stroke(150);
fill(50);
ellipse(pmouseX-(1.25*(mouseX-pmouseX)), pmouseY-(1.25*(mouseY-pmouseY)), 40, 40);
//Fly Wings
fill(255, 150);
stroke(222, 150);
//Left Wing
ellipse(pmouseX-20, pmouseY-20, 35, 20*((float)Math.sin(3*(frameCount*0.1))));
//Right Wing
ellipse(pmouseX+20, pmouseY-20, 35, 20*((float)Math.sin(3*(frameCount*0.1))));
//Legs
stroke(0);
noFill();
//Backmost Legs
curve(pmouseX-25, pmouseY+155, pmouseX-22, pmouseY+15, pmouseX+22, pmouseY+15, pmouseX+25, pmouseY+155);
//Middle Legs
curve(pmouseX-18, pmouseY+155, pmouseX-15, pmouseY+20, pmouseX+15, pmouseY+20, pmouseX+18, pmouseY+155);
//Front Legs
curve(pmouseX-10, pmouseY+155, pmouseX-7, pmouseY+22, pmouseX+7, pmouseY+22, pmouseX+10, pmouseY+155);
//Front Body
fill(66);
stroke(178);
ellipse(pmouseX, pmouseY, 40, 40);
//Fly Eyes
fill(0);
//Left Eye
ellipse(mouseX-10, mouseY-5, 15, 15);
//Right Eye
ellipse(mouseX+10, mouseY-5, 15, 15);
//Eye Mesh
strokeWeight(1);
stroke(178);
//Veritcal Lines
//Left Side
line(mouseX-14, mouseY-11, mouseX-14, mouseY);
line(mouseX-10, mouseY-13, mouseX-10, mouseY+2);
line(mouseX-6, mouseY-11, mouseX-6, mouseY);
//Right Side
line(mouseX+6, mouseY-11, mouseX+6, mouseY);
line(mouseX+10, mouseY-13, mouseX+10, mouseY+2);
line(mouseX+14, mouseY-11, mouseX+14, mouseY);
//Horizontal Lines
//Left Side
line(mouseX-16, mouseY-10, mouseX-5, mouseY-10);
line(mouseX-18, mouseY-6, mouseX-3, mouseY-6);
line(mouseX-16, mouseY-1, mouseX-5, mouseY-1);
//Right Side
line(mouseX+5, mouseY-1, mouseX+16, mouseY-1);
line(mouseX+3, mouseY-6, mouseX+18, mouseY-6);
line(mouseX+5, mouseY-10, mouseX+16, mouseY-10);
}
void mousePressed() {
/*
Creates a Fly Swatter at mouse location when clicked.
Lasts for 1/10th of a second and disappears.
Also prints "Ouch!" to the screen to indicate you hit the fly.
*/
//Using framRate(6) to keep the Swatter onscreen for desired time.
frameRate(6);
//Swatter
/*
Swatter is created using basic shapes and lines.
Every shape is create with the mouse as the reference point.
Using CENTER for rectMode made things easy, aside from one shape which uses
CORNER to allow for precision placement.
*/
//Frame
rectMode(CENTER);
//Frame requires noFill() to look normal and allow you to see through.
noFill();
strokeWeight(3);
stroke(101, 77, 240);
rect(mouseX, mouseY-15, 70, 70);
//Handle
rectMode(CORNER);
fill(101, 77, 240);
strokeWeight(1);
rect(mouseX-5, mouseY+20, 10, 70);
rectMode(CENTER);
//Handle Cap
fill(0);
stroke(0);
rect(mouseX, mouseY+90, 10, 5);
//Handle Binding
fill(77, 203, 240);
rect(mouseX, mouseY+23, 10, 3);
//Mesh
//Veritcal Lines
strokeWeight(3);
stroke(1);
line(mouseX-30, mouseY-50, mouseX-30, mouseY+20);
line(mouseX-20, mouseY-50, mouseX-20, mouseY+20);
line(mouseX-10, mouseY-50, mouseX-10, mouseY+20);
line(mouseX, mouseY-50, mouseX, mouseY+20);
line(mouseX+10, mouseY-50, mouseX+10, mouseY+20);
line(mouseX+20, mouseY-50, mouseX+20, mouseY+20);
line(mouseX+30, mouseY-50, mouseX+30, mouseY+20);
//Horizontal Lines
line(mouseX-35, mouseY-40, mouseX+35, mouseY-40);
line(mouseX-35, mouseY-30, mouseX+35, mouseY-30);
line(mouseX-35, mouseY-20, mouseX+35, mouseY-20);
line(mouseX-35, mouseY-10, mouseX+35, mouseY-10);
line(mouseX-35, mouseY, mouseX+35, mouseY);
line(mouseX-35, mouseY+10, mouseX+35, mouseY+10);
//Printing line "Ouch!" to indicate you hit the fly.
//Pesky Fly is resilient and takes minimal damage.
println("Ouch!");
}
