Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
 /*
 *  Greetings all. Here's my interactive sketch of Link fighting a phantom. Ejoy!
 *  Move the mouse left and right for a cool parallax effect
 *  Move the mouse up and down to put the torch out
 *  Click to harness the power of the triforce!
 */
 
 void setup() {
  size(400,400);
  background(#BCAE8B);
  noStroke();
}

void draw(){
  frameRate(60);
  //Draw tha background gradient
  backgroundGradient();
  //Draw the door in the background
  door();
  //Draw link
  link();
  //Draw the sword clash effect between link & the phantom
  clash();
  //Draw the phantom
  phantom();
  //Draw the foreground
  foreground();
};

void mousePressed(){
  frameRate(3);  
  
  //Draw a shine around the triforce
  fill(#FFF300,60);
  ellipse(360+(mouseX*0.012),210,100,100);
  
  //Draw the rays coming off the triforce
  fill(#FFF0B2,90);
  triangle(360+(mouseX*0.012),210,260,110,270,110);
  triangle(360+(mouseX*0.012),210,260,150,270,160);
  triangle(360+(mouseX*0.012),210,260,210,270,220);
  triangle(360+(mouseX*0.012),210,400,140,400,130);
  triangle(360+(mouseX*0.012),210,400,180,400,190);
  triangle(360+(mouseX*0.012),210,400,210,400,220);
}

void clash(){
  fill(#FFF300,80);
  ellipse(320,160,30+(sin(mouseX*.02)*20),30+(sin(mouseX*.02)*20));
  fill(#FFD900, 80);
  ellipse(320,160,20+(sin(mouseX*.02)*20),20+(sin(mouseX*.02)*20));
  fill(#FF9A03, 90);
  ellipse(320,160,10+(sin(mouseX*.02)*20),10+(sin(mouseX*.02)*20));
}

void phantom(){
  //right arm
  fill(#958292);
  quad(270+(mouseX*0.025),220,260+(mouseX*0.025),230,210+(mouseX*0.025),180,220+(mouseX*0.025),170);
  
  /////body /////
  fill(#837783);
  quad(220+(mouseX*0.025),170,220+(mouseX*0.025),280,160+(mouseX*0.025),280,160+(mouseX*0.025),170);
  //legs
  fill(#766B76);
  quad(170+(mouseX*0.025),280,193+(mouseX*0.025),280,193+(mouseX*0.025),320,170+(mouseX*0.025),320);
  fill(#837783);
  quad(215+(mouseX*0.025),280,225+(mouseX*0.025),320,200+(mouseX*0.025),320,190+(mouseX*0.025),280);
  //armor skirt thing
  fill(#815281);
  quad(220+(mouseX*0.025),270,230+(mouseX*0.025),290,200+(mouseX*0.025),290,190+(mouseX*0.025),270);
  quad(160+(mouseX*0.025),270,200+(mouseX*0.025),270,180+(mouseX*0.025),290,150+(mouseX*0.025),290);
  
  /////Head/////
  fill(#8E858E);
  quad(175+(mouseX*0.025),130,210+(mouseX*0.025),130,210+(mouseX*0.025),170,175+(mouseX*0.025),170);
  //visor
  fill(#432243);
  quad(200+(mouseX*0.025),140,210+(mouseX*0.025),140,210+(mouseX*0.025),150,200+(mouseX*0.025),150);
  //horns? ears? idek man. helmet spikes.
  fill(#ADA4AB);
  triangle(190+(mouseX*0.025),120,200+(mouseX*0.025),135,190+(mouseX*0.025),135);
  triangle(180+(mouseX*0.025),120,190+(mouseX*0.025),130,180+(mouseX*0.025),130);
  
  /////sword/////
  fill(#646464);
  quad(330+(mouseX*0.025),130,340+(mouseX*0.025),140,250+(mouseX*0.025),240,240+(mouseX*0.025),230);
  triangle(330+(mouseX*0.025),130,350+(mouseX*0.025),120,340+(mouseX*0.025),140);
  fill(#A53C3C);
  quad(260+(mouseX*0.025),200,280+(mouseX*0.025),215,275+(mouseX*0.025),225,255+(mouseX*0.025),205);
  quad(240+(mouseX*0.025),230,243+(mouseX*0.025),227,253+(mouseX*0.025),237,250+(mouseX*0.025),240);
 
  /////arms/////
  fill(#958292);
  quad(160+(mouseX*0.025),170,170+(mouseX*0.025),180,150+(mouseX*0.025),240,140+(mouseX*0.025),230);
  
  /////Shield/////
  fill(#DBCF6F);
  triangle(130+(mouseX*0.025),220,160+(mouseX*0.025),240,130+(mouseX*0.025),240);
  triangle(170+(mouseX*0.025),220,170+(mouseX*0.025),240,150+(mouseX*0.025),240);
  fill(#CBBE54);
  triangle(130+(mouseX*0.025),240,170+(mouseX*0.025),240,150+(mouseX*0.025),280);
  
  /////pauldrons/////
  fill(#ADA4AB);
  triangle(210+(mouseX*0.025),150,230+(mouseX*0.025),180,170+(mouseX*0.025),210);
  triangle(160+(mouseX*0.025),150,200+(mouseX*0.025),200,155+(mouseX*0.025),190);
  
}

void link(){ 
  ///////Arms///////
  fill(#C4BAA0);
  quad(240+(mouseX*0.012),190,280+(mouseX*0.012),200,280+(mouseX*0.012),215,240+(mouseX*0.012),205);
  quad(240+(mouseX*0.012),190,240+(mouseX*0.012),205,265+(mouseX*0.012),175,250+(mouseX*0.012),170);  
  //quad(250,170,265,175,250,210,240,205);
  
  //////Legs///////
  fill(#C4BAA0);
  //left
  quad(270+(mouseX*0.012),290,295+(mouseX*0.012),260,270+(mouseX*0.012),330,250+(mouseX*0.012),330);
  //right
  quad(310+(mouseX*0.012),290,330+(mouseX*0.012),300,350+(mouseX*0.012),330,330+(mouseX*0.012),330); 
  
  ///////Body///////
  fill(#17BC18);
  quad(280+(mouseX*0.012), 200, 340+(mouseX*0.012), 220, 320+(mouseX*0.012), 270,280+(mouseX*0.012), 260);
  fill(#10A211);
  quad(280+(mouseX*0.012),260,320+(mouseX*0.012),270,330+(mouseX*0.012),300,270+(mouseX*0.012),290);
  fill(#FFFFFF);
  triangle(300+(mouseX*0.012),205,330+(mouseX*0.012),215,310+(mouseX*0.012),225);
  //Belt
  stroke(#9B550B);
  strokeWeight(5);
  line(280+(mouseX*0.012),260,320+(mouseX*0.012),270);
  noStroke();
  
  ////////Head////////
  fill(#FFE39B);
  ellipse(320+(mouseX*0.012),195,40,40);
  //hair
  fill(225,199,63);
  triangle(340+(mouseX*0.012),170,350+(mouseX*0.012),200,320+(mouseX*0.012),170);
  triangle(340+(mouseX*0.012),170,290+(mouseX*0.012),200,310+(mouseX*0.012),165);
  
  //////Shield///////
  //hand
  fill(#9B550B);
  ellipse(335+(mouseX*0.012),220,15,15);
  
  fill(#C9C9C9);
  //Top half
  triangle(330+(mouseX*0.012),210,360+(mouseX*0.012),170,390+(mouseX*0.012),200);
  //Bottom Half
  triangle(330+(mouseX*0.012),210,390+(mouseX*0.012),200,360+(mouseX*0.012),260);
  //triforce
  fill(#F0CB13);
  triangle(350+(mouseX*0.012),220,360+(mouseX*0.012),200,370+(mouseX*0.012),220);
  fill(#C9C9C9);
  triangle(355+(mouseX*0.012),210,365+(mouseX*0.012),210,360+(mouseX*0.012),220);

  //////Sword//////
  //handle
  stroke(#984D02);
  strokeWeight(6);
  line(270+(mouseX*0.012),168,250+(mouseX*0.012),170);
  noStroke();
  //blade
  fill(#C9C9C9);
  quad(280+(mouseX*0.012),160,380+(mouseX*0.012),140,380+(mouseX*0.012),155,285+(mouseX*0.012),170);
  //tip
  triangle(380+(mouseX*0.012),140,390+(mouseX*0.012),148,380+(mouseX*0.012),155);
  //Hilt
  fill(#0A13AA);
  triangle(280+(mouseX*0.012),150,290+(mouseX*0.012),175,270+(mouseX*0.012),170);
  //Sword hand
  fill(#9B550B);
  ellipse(260+(mouseX*0.012),170,15,15);
}

void foreground(){  
 //pillar
 fill(#525252);
 rect(30+(mouseX*0.1),0,80,400);

 //torch
 fill(#FFFFFF,90+((mouseY*0.25)*-1));
 ellipse(80+(mouseX*0.1),100,30,30);
 fill(#A26200);
 triangle(80+(mouseX*0.1),100,100+(mouseX*0.1),100,80+(mouseX*0.1),140);
 //flame
 fill(#FFD900,90+((mouseY*0.25)*-1));
 ellipse(90+(mouseX*0.1),95,20,20);
 ellipse(90+(mouseX*0.1),95,20,20);
 ellipse(90+(mouseX*0.1),95,20,20);
 ellipse(90+(mouseX*0.1),85,10,10);
 ellipse(90+(mouseX*0.1),85,10,10);
 fill(#FF9900,90+((mouseY*0.25)*-1));
 ellipse(90+(mouseX*0.1),95,15,15);
 ellipse(90+(mouseX*0.1),95,15,15);
 //shine
 fill(#FFD900,60+((mouseY*0.2)*-1));
 ellipse(90+(mouseX*0.1),95,60+(sin(frameCount*.07)*10),60+(sin(frameCount*.07)*10));
  
  //floor
  fill(#3E3E3E);
  rect(0,320,400,400);
  
  //foreground smoke clouds
 fill(0, 150); 
 ellipse(40,360,180+(sin(frameCount*.071)*12),180+(sin(frameCount*.073)*10)); 
 ellipse(140,370,150+(sin(frameCount*.074)*14),150+(sin(frameCount*.072)*10));
 ellipse(230,370,140+(sin(frameCount*.072)*10),140+(sin(frameCount*.076)*12));
 ellipse(350,360,170+(sin(frameCount*.077)*11),170+(sin(frameCount*.073)*10));
 
 //fade to black based on mouseY
 fill(0, mouseY*0.5);
 rect(0,0,400,400);
}
void door(){
  stroke(#934200);
  strokeWeight(3);
  fill(0);
  rectMode(CORNERS);
  rect(200+(mouseX*0.011),120,300+(mouseX*0.011),320);
  
  //Draw the bars on the door
  strokeWeight(5);
  stroke(#A0A0A0);
  line(210+(mouseX*0.011),123,210+(mouseX*0.011),320);
  line(230+(mouseX*0.011),123,230+(mouseX*0.011),320);
  line(250+(mouseX*0.011),123,250+(mouseX*0.011),320);
  line(270+(mouseX*0.011),123,270+(mouseX*0.011),320);
  line(290+(mouseX*0.011),123,290+(mouseX*0.011),320);
  
  noStroke();
  rectMode(CORNER);
}

void backgroundGradient(){
  //Gradient Background
  background(#BCAE8B);
  fill(#D83F07, 90);
  rect(0,250,400,400);
  fill(#A58C66,90);
  rect(0,150,400,250);
  fill(0,30);
  rect(340,0,400,400);
  
  //background smoke clouds
  fill(0,99); 
 ellipse(60,340,140+(sin(frameCount*.075)*12),180+(sin(frameCount*.072)*15)); 
 ellipse(170,350,140+(sin(frameCount*.073)*9),150+(sin(frameCount*.077)*10));
 ellipse(320,330,120+(sin(frameCount*.076)*10),140+(sin(frameCount*.072)*12));
 ellipse(250,340,100+(sin(frameCount*.076)*10),100+(sin(frameCount*.072)*12));
}