/* Assignment 1: Interactive Drawing
"Life at Hyrule"
BY: Alina Zhang
- Move the mouse around to drag the iron box with magnetic power, and Link's arm will be moving at the same time
- Move the mouse left and right to cause the clouds moving left and right
- Move the mouse left and right to make Link's hair and clothes flow
- Move the mouse up and down to interact with Link's ears
- Click the mouse to find the iron box that can be caught using magnetic power
- Press a key to get a Blood Moon with Link wearing the Fierce Deity's Mask
*/
void setup() {
// set size of the background
size(400, 400);
}
void draw() {
// set color of the background
background(255, 160, 80);
// set framerate to 60
frameRate(60);
// fill the sky with various orange colors
rectMode(CORNER);
noStroke();
fill(255, 110, 80);
rect(0, 0, 400, 50);
fill(255, 120, 80);
rect(0, 50, 400, 40);
fill(255, 130, 80);
rect(0, 90, 400, 30);
fill(255, 140, 80);
rect(0, 120, 400, 20);
fill(255, 150, 80);
rect(0, 140, 400, 10);
// clouds move horizontally according to change in X-value
fill(211, 189, 240, 127);
rect(300-mouseX, 100, 200, 50, 100);
rect(mouseX*1.2, 130, 150, 50, 100);
// iron box moves around with the mouse at its center
rectMode(CENTER);
fill(92, 88, 103);
rect(mouseX, mouseY, 90, 90);
stroke(137, 133, 147); // decoration to the iron box
strokeWeight(4);
noFill();
rect(mouseX, mouseY, 70, 70);
// grassland
noStroke();
rectMode(CORNERS);
fill(255, 190, 80); // areas affected by the light
quad(0, 280, 0, 400, 150, 400, 150, 300);
quad(150, 300, 150, 400, 400, 400, 400, 255);
rect(115, 297, 170, 320);
fill(160, 150, 80); // areas in normal color
quad(0, 285, 0, 400, 150, 400, 150, 305);
quad(150, 305, 150, 400, 400, 400, 400, 260);
rect(115, 302, 170, 330);
fill(160, 140, 80); // areas in the dark
quad(0, 290, 0, 400, 280, 400, 150, 310);
// magnetic power, controlled by Link's hand, ends near the center of the iron box
stroke(116, 217, 229, 200-(mouseY-150)); // the power will fade away as the iron box disappears from Link's eye sight
strokeWeight(4);
line(150+mouseX/50, 350+mouseY/10, mouseX-15, mouseY);
line(250+mouseX/50, 350+mouseY/10, mouseX+15, mouseY);
// Link's face and neck
stroke(245, 224, 166);
strokeWeight(5);
fill(255, 170, 120);
rectMode(CENTER);
rect(290, 330, 20, 30); // neck
rect(280, 250, 170, 150, 150); // face
// Link's clothes in white(the lower-arm part)
stroke(255);
fill(211, 217, 224);
triangle(220, 355+mouseY/30, 220, 395+mouseY/30, 150+mouseX/50, 350+mouseY/10);
// Link's clothes in blue(the body and upper-arm part)
stroke(116, 217, 229);
fill(72, 147, 203);
arc(290, 400, 110, 110, 0, TWO_PI); // body
quad(270, 350, 220, 350+mouseY/30, 220, 400+mouseY/30, 255, 390); // upper arm
// Link's fringe which can blow as the mouse moves horizontally
noStroke();
fill(250, 204, 4);
triangle(270, 165, 200, 145, 170+mouseX/100, 255);
triangle(270, 165, 195+mouseX/50, 325, 190, 185);
// Link's ears which can move a little bit with the mouse moving around
stroke(245, 224, 166);
strokeWeight(5);
fill(255, 170, 120);
quad(175, 255+mouseY/80, 290, 250, 385, 255+mouseY/80, 290, 300);
// rest of Link's hair; the pony tail can move with the mouse moving left and right
noStroke();
fill(250, 204, 4);
quad(270, 165, 355, 180, 260, 335, 210, 250);
quad(355, 180, 260, 335, 350, 325, 375, 250);
quad(350, 325, 330, 325, 340+mouseX/50, 385, 375+mouseX/50, 365);
}
// When press the mouse, Link is under the condition of trying to catch the iron box.
void mousePressed() {
frameRate(5);
// check the whole image's color
rectMode(CORNER);
fill(245, 0, 164, 150);
rect(0, 0, 400, 400);
// change the color of the iron box
rectMode(CENTER);
fill(255, 226, 0);
rect(mouseX, mouseY, 90, 90);
stroke(214, 192, 26); // decoration to the iron box
strokeWeight(4);
noFill();
rect(mouseX, mouseY, 70, 70);
}
// When press a key, there will be a Blood Moon, and Link will turn into Fierce Deity Link.
void keyPressed() {
// Set the framerate to 3 to make sure the image remains for a relatively long time
frameRate(3);
// fill the background with black
background(0);
// Blood Moon
ellipseMode(CENTER);
fill(255, 0, 0, 100); // inner part
ellipse(80, 80, 80, 80);
fill(255, 0, 0); // outer part
ellipse(80, 80, 60, 60);
// grassland(at night)
noStroke();
rectMode(CORNERS);
fill(219, 95, 97);
quad(0, 280, 0, 400, 150, 400, 150, 300);
quad(150, 300, 150, 400, 400, 400, 400, 255);
rect(115, 297, 170, 320);
fill(76, 83, 121);
quad(0, 285, 0, 400, 150, 400, 150, 305);
quad(150, 305, 150, 400, 400, 400, 400, 260);
rect(115, 302, 170, 330);
fill(61, 49, 85);
quad(0, 290, 0, 400, 280, 400, 150, 310);
// Link's face and neck(at night)
stroke(255, 170, 120);
strokeWeight(5);
fill(201, 138, 101);
rectMode(CENTER);
rect(290, 330, 20, 30);
rect(280, 250, 170, 150, 150);
// Fierce Deity Link's clothes
stroke(160, 160, 160);
fill(124, 124, 124);
triangle(220, 355+mouseY/30, 220, 395+mouseY/30, 150+mouseX/50, 350+mouseY/10);
// Link's Armor
arc(290, 400, 110, 110, 0, TWO_PI); // armor(body part)
stroke(145, 222, 206);
fill(139, 185, 165);
quad(270, 350, 220, 350+mouseY/30, 220, 400+mouseY/30, 255, 390); // armor(arm part)
// Link's fringe
noStroke();
fill(255);
triangle(270, 165, 200, 145, 170+mouseX/100, 255);
triangle(270, 165, 195+mouseX/50, 325, 190, 185);
// Link's ears
stroke(255, 170, 120);
strokeWeight(5);
fill(201, 138, 101);
quad(175, 255+mouseY/80, 290, 250, 385, 255+mouseY/80, 290, 300);
// Link's white hair
noStroke();
fill(255);
quad(270, 165, 355, 180, 260, 335, 210, 250);
quad(355, 180, 260, 335, 350, 325, 375, 250);
// Link's hat
stroke(145, 222, 206);
fill(139, 185, 165);
quad(270, 160, 210, 220, 260, 320, 350, 325);
stroke(139, 185, 165);
triangle(270, 160, 370, 150, 380, 385);
}
