Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* 
 
 -Flame in the darkness-
 by Vicky Liu
 
 In the darkness,
 Eyes of the demons are staring at you,
 The only light source floats upon your palm.
 Light it up brightly with your power, and
 Let it escort you through the danger.
 
 */

void setup() {
  size(400, 400);
  rectMode(CENTER);
  ellipseMode(RADIUS);
}

void draw() {
  frameRate(50);
  background(30, 30, 0);

  //evil eyes with a shaky movement
  //first layer, red semicircles
  strokeWeight(4);
  stroke(66, 0, 43);
  fill(124, 14, 34, 150);
  arc(200+sin(frameCount*0.8), 150+sin(frameCount*0.8), 80, 80, 0, PI);
  arc(80+sin(frameCount*0.8), 80+sin(frameCount*0.8), 60, 60, 0, PI);
  arc(120+sin(frameCount*0.8), 300+sin(frameCount*0.8), 90, 90, 0, PI);
  arc(340+sin(frameCount*0.8), 25+sin(frameCount*0.8), 90, 90, 0, PI);
  //second layer, red ellipses
  fill(255, 126, 126, 60);
  ellipse(200+sin(frameCount*0.8), 190+sin(frameCount*0.8), 20, 40);
  ellipse(80+sin(frameCount*0.8), 110+sin(frameCount*0.8), 10, 30);
  ellipse(120+sin(frameCount*0.8), 350+sin(frameCount*0.8), 30, 45);
  ellipse(340+sin(frameCount*0.8), 70+sin(frameCount*0.8), 30, 45);

  //hand
  noStroke();
  fill(118, 20, 103);
  //palm
  quad(180, 260, 320, 320, 270, 400, 100, 400);
  //thumb
  quad(75, 335, 115, 315, 140, 340, 100, 410);
  quad(80, 250, 110, 270, 115, 316, 75, 336);
  quad(110, 210, 125, 235, 110, 271, 80, 251);
  //index finger
  quad(195, 215, 220, 230, 210, 280, 180, 261);
  quad(220, 170, 240, 185, 220, 231, 195, 216);
  quad(245, 140, 260, 150, 240, 186, 220, 171);
  //middle finger
  quad(255, 235, 280, 250, 250, 295, 220, 285);
  quad(275, 187, 295, 198, 280, 251, 255, 236);
  quad(292, 148, 313, 155, 295, 199, 275, 188);
  //index finger
  quad(285, 258, 305, 271, 290, 315, 262, 305); 
  quad(303, 218, 322, 230, 305, 272, 285, 259);
  quad(319, 182, 331, 188, 322, 231, 303, 219);
  //pinky
  quad(329, 287, 340, 302, 315, 325, 295, 310);
  quad(350, 271, 360, 283, 340, 303, 329, 288);
  quad(360, 252, 375, 255, 360, 284, 350, 272);
  //hand shadow
  fill(85, 20, 87);
  triangle(115, 375, 140, 401, 100, 410); 
  quad(75, 335, 95, 325, 115, 375, 100, 410);
  quad(80, 250, 95, 261, 95, 325, 75, 336);
  triangle(110, 210, 95, 261, 80, 250);
  //palm print
  strokeWeight(3);
  stroke(85, 20, 87);
  line(170, 290, 190, 321);
  line(190, 320, 200, 341);
  line(200, 341, 220, 360);
  line(220, 360, 240, 385);
  line(200, 300, 220, 310);
  line(220, 310, 240, 330);
  line(240, 330, 260, 340);

  //Lights and light effects move and change colour corresponding to mouse position
  //light effects
  noStroke();
  fill(mouseY*.2+219, 255, -mouseY*0.2+152, 20);
  ellipse((mouseX+700)*.25, (mouseY+700)*.25, 25, 25);
  ellipse((mouseX+700)*.25, (mouseY+700)*.25, 35, 35);
  ellipse((mouseX+700)*.25, (mouseY+700)*.25, 45, 45);
  ellipse((mouseX+700)*.25, (mouseY+700)*.25, 55, 55);
  ellipse((mouseX+700)*.25, (mouseY+700)*.25, 65, 75);
  ellipse((mouseX+700)*.25, (mouseY+700)*.25, 85, 95);
  ellipse((mouseX+800)*.25, (mouseY+1200)*.25, 20, 15);

  //light source
  noStroke();
  fill(mouseY*.2+180, 219, -mouseY*0.2+13, 150);
  ellipse((mouseX+700)*.25, (mouseY+700)*.25, 20, 15);

  //other small lights
  fill(181, 255, 160, 150);
  ellipse((mouseX+500)*.35, (mouseY+350)*.35, 3, 2);
  ellipse((mouseX+500)*.15, (mouseY+1200)*.15, 6, 5);
  ellipse((mouseX+500)*.25, (mouseY+1600)*.15, 5, 4);
  ellipse((mouseX+700)*.35, (mouseY+700)*.25, 5, 4);
  ellipse((mouseX+300)*.35, (mouseY+200)*.35, 4, 2);
}

void mousePressed() {
  frameRate(2);
  background(0, 97, 141);

  //hand
  noStroke();
  fill(189, 193, 224);
  //thumb
  quad(180, 260, 320, 320, 270, 400, 100, 400);
  quad(75, 335, 115, 315, 140, 340, 100, 410);
  quad(80, 250, 110, 270, 115, 316, 75, 336);
  quad(110, 210, 125, 235, 110, 271, 80, 251);
  //index finger
  quad(195, 215, 220, 230, 210, 280, 180, 261);
  quad(220, 170, 240, 185, 220, 231, 195, 216);
  quad(245, 140, 260, 150, 240, 186, 220, 171);
  //middle finger
  quad(255, 235, 280, 250, 250, 295, 220, 285);
  quad(275, 187, 295, 198, 280, 251, 255, 236);
  quad(292, 148, 313, 155, 295, 199, 275, 188);
  //index finger
  quad(285, 258, 305, 271, 290, 315, 262, 305); 
  quad(303, 218, 322, 230, 305, 272, 285, 259);
  quad(319, 182, 331, 188, 322, 231, 303, 219);
  //pinky
  quad(329, 287, 340, 302, 315, 325, 295, 310);
  quad(350, 271, 360, 283, 340, 303, 329, 288);
  quad(360, 252, 375, 255, 360, 284, 350, 272);
  //hand shadow
  fill(50, 20, 100);
  triangle(115, 375, 140, 401, 100, 410); 
  quad(75, 335, 95, 325, 115, 375, 100, 410);
  quad(80, 250, 95, 261, 95, 325, 75, 336);
  triangle(110, 210, 95, 261, 80, 250);
  //palm print
  strokeWeight(3);
  stroke(85, 20, 87);
  line(170, 290, 190, 321);
  line(190, 320, 200, 341);
  line(200, 341, 220, 360);
  line(220, 360, 240, 385);
  line(200, 300, 220, 310);
  line(220, 310, 240, 330);
  line(240, 330, 260, 340);

  //light effects and flame's positions are determined by mouse position
  //light effects
  noStroke();
  fill(0, 155, 170, 30);
  ellipse(mouseX, mouseY-30, 90, 90);
  ellipse(mouseX, mouseY-30, 100, 100);
  ellipse(mouseX, mouseY-30, 110, 110);
  ellipse(mouseX, mouseY-30, 130, 130);
  ellipse(mouseX, mouseY-30, 150, 150);
  ellipse(mouseX, mouseY-30, 160, 160);
  ellipse(mouseX, mouseY-30, 175, 175);
  ellipse(mouseX, mouseY-30, 195, 195);

  //flame
  //bottom layer
  noStroke();
  fill(56, 90, 255, 220);
  ellipse(mouseX, mouseY, 80, 50);
  triangle(mouseX-80, mouseY-70, mouseX-40, mouseY-20, mouseX-80, mouseY);
  triangle(mouseX+20, mouseY-160, mouseX+50, mouseY-30, mouseX-50, mouseY-30);
  triangle(mouseX+70, mouseY-100, mouseX+80, mouseY, mouseX+50, mouseY-30);
  triangle(mouseX+10, mouseY-190, mouseX+40, mouseY-45, mouseX-10, mouseY-50);
  triangle(mouseX-40, mouseY-120, mouseX, mouseY-50, mouseX-40, mouseY-40);
  triangle(mouseX-60, mouseY-90, mouseX-60, mouseY-50, mouseX-70, mouseY-70);
  triangle(mouseX+80, mouseY-90, mouseX+100, mouseY-50, mouseX+80, mouseY-70);

  //second layer
  fill(40, 10, 255, 225);
  ellipse(mouseX, mouseY, 70, 40);
  triangle(mouseX-70, mouseY-50, mouseX-30, mouseY, mouseX-70, mouseY+10);
  triangle(mouseX+20, mouseY-130, mouseX+40, mouseY-30, mouseX-40, mouseY-30);
  triangle(mouseX+70, mouseY-80, mouseX+70, mouseY-20, mouseX+60, mouseY-30);
  triangle(mouseX+10, mouseY-170, mouseX+30, mouseY-65, mouseX-10, mouseY-50);
  triangle(mouseX-40, mouseY-120, mouseX, mouseY-50, mouseX-40, mouseY-40);
  triangle(mouseX-60, mouseY-90, mouseX-60, mouseY-50, mouseX-70, mouseY-70);
  triangle(mouseX+80, mouseY-90, mouseX+100, mouseY-50, mouseX+80, mouseY-70);

  //third layer
  fill(0, 200, 255);
  ellipse(mouseX, mouseY, 60, 20);
  triangle(mouseX-68, mouseY-38, mouseX-35, mouseY, mouseX-60, mouseY);
  triangle(mouseX+18, mouseY-110, mouseX+40, mouseY-10, mouseX-40, mouseY-15);
  triangle(mouseX+70, mouseY-80, mouseX+70, mouseY-40, mouseX+60, mouseY-48);
  triangle(mouseX+10, mouseY-145, mouseX+20, mouseY-65, mouseX-5, mouseY-50);
  triangle(mouseX-40, mouseY-120, mouseX-15, mouseY-80, mouseX-50, mouseY-60);
  triangle(mouseX-60, mouseY-90, mouseX-60, mouseY-50, mouseX-70, mouseY-70);
  triangle(mouseX+80, mouseY-90, mouseX+100, mouseY-50, mouseX+80, mouseY-70);
}