Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup () {
  size (400, 400);
  frameRate(30);
}


void draw() {
  background (98, 64, 49);

  //using lines to create a brick pattern on the background.
  strokeWeight ( 10);
  stroke(42, 27, 24);
  line (0, 165, 400, 165);
  line (40, 310, 40, 165); 
  line (160, 310, 160, 0);
  line ( 360, 310, 360, 165);
  fill (78, 45, 38);

  //floor
  stroke (0);
  strokeWeight (4);
  rect ( 0, 310, 400, 90);

  //devil fire
  noStroke();
  //chagning opacity of fire depening on mouse position
  fill (255, 100, 10, (mouseX - 100 /0.75));

  /* animating fire using sinusodal functions and frame count
   ( amplitude * sin ( 1/period * frameCount + function offset) + default position) */

  triangle ( 5 * sin(0.03 * frameCount) + 220, 30, 15 * sin(0.03 * frameCount) + 220, 10 * sin(0.03 * frameCount) + 65, 15 * sin(0.03 * frameCount ) + 240, 10 * sin(30 + 0.03 * frameCount) + 60);
  quad ( 15 * sin(0.03 * frameCount) + 220, 10 * sin(0.03 * frameCount) + 65, 15 * sin(0.03 * frameCount ) + 240, 10 * sin(30 + 0.03 * frameCount) + 60, 10 * sin (0.03 * frameCount) + 235, 10 * sin (0.03 * frameCount) + 90, 10 * sin (0.03 * frameCount) + 205, 10 * sin (0.03 * frameCount) + 100);
  quad ( 220, 140,  260, 130, 10 * sin (0.03 * frameCount) + 235, 10 * sin (0.03 * frameCount) + 90, 10 * sin (0.03 * frameCount) + 205, 10 * sin (0.03 * frameCount) + 100);

  triangle ( 5* sin (0.03 * frameCount) + 330, 170, 5* sin (0.03 * frameCount) + 320, 5* sin (0.03 * frameCount) + 210, 5* sin (0.03 * frameCount) + 335, 5* sin (0.03 * frameCount) + 200);
  quad (  5* sin (0.03 * frameCount) + 320, 5* sin (0.03 * frameCount) + 210, 5* sin (0.03 * frameCount) + 335, 5* sin (0.03 * frameCount) + 200, 5* sin (0.03 * frameCount) + 360, 5* sin (0.03 * frameCount) + 230, 5* sin (0.03 * frameCount) + 325, 5* sin (0.03 * frameCount) + 230 );
  quad (5* sin (0.03 * frameCount) + 360, 5* sin (0.03 * frameCount) + 230, 5* sin (0.03 * frameCount) + 325, 5* sin (0.03 * frameCount) + 230, 5* sin (0.03 * frameCount) + 310, 5* sin (0.03 * frameCount)+ 260, 5* sin (0.03 * frameCount) + 350, 5* sin (0.03 * frameCount) + 280);
  quad (5* sin (0.03 * frameCount) + 310, 5* sin (0.03 * frameCount)+ 260, 5* sin (0.03 * frameCount) + 350, 5* sin (0.03 * frameCount) + 280, 320, 320, 230, 320);

  triangle (5* sin (0.03 * frameCount) + 270, 5* sin (0.03 * frameCount) + 90, 5* sin (0.03 * frameCount) + 260, 5* sin (0.03 * frameCount) + 130, 5* sin (0.03 * frameCount) + 280, 5* sin (0.03 * frameCount) + 120 );
  quad (5* sin (0.03 * frameCount) + 260, 5* sin (0.03 * frameCount) + 130, 5* sin (0.03 * frameCount) + 280, 5* sin (0.03 * frameCount) + 120, 310, 170, 265, 165);
  quad (310, 170, 265, 165, 200, 320, 320, 320);

  triangle ( 5* sin (0.03 * frameCount) + 70, 170, 5* sin (0.03 * frameCount) + 80, 5* sin (0.03 * frameCount) + 210, 5* sin (0.03 * frameCount) + 65, 5* sin (0.03 * frameCount) + 200);
  quad (  5* sin (0.03 * frameCount) + 80, 5* sin (0.03 * frameCount) + 210, 5* sin (0.03 * frameCount) + 65, 5* sin (0.03 * frameCount) + 200, 5* sin (0.03 * frameCount) + 40, 5* sin (0.03 * frameCount) + 230, 5* sin (0.03 * frameCount) + 75, 5* sin (0.03 * frameCount) + 230 );
  quad (5* sin (0.03 * frameCount) + 40, 5* sin (0.03 * frameCount) + 230, 5* sin (0.03 * frameCount) + 75, 5* sin (0.03 * frameCount) + 230, 5* sin (0.03 * frameCount) + 90, 5* sin (0.03 * frameCount)+ 260, 5* sin (0.03 * frameCount) + 50, 5* sin (0.03 * frameCount) + 280);
  quad (5* sin (0.03 * frameCount) + 90, 5* sin (0.03 * frameCount)+ 260, 5* sin (0.03 * frameCount) + 50, 5* sin (0.03 * frameCount) + 280, 80, 320, 170, 320); 

  triangle (5* sin (0.03 * frameCount) + 130, 5* sin (0.03 * frameCount) + 90, 5* sin (0.03 * frameCount) + 140, 5* sin (0.03 * frameCount) + 130, 5* sin (0.03 * frameCount) + 120, 5* sin (0.03 * frameCount) + 120 );
  quad (5* sin (0.03 * frameCount) + 140, 5* sin (0.03 * frameCount) + 130, 5* sin (0.03 * frameCount) + 120, 5* sin (0.03 * frameCount) + 120, 90, 170, 135, 165);
  quad (90, 170, 145, 165, 200, 320, 80, 320);

  //holy light
  fill(255, 127, 50, 400 - (mouseX + 100 /0.75));
  ellipse (200, 170, 250, 250);
  fill ( 255, 242, 100, 400 - (mouseX + 100 /0.75));
  triangle ( 180, 180, 220, 180, 200, 20 +  20* sin (0.03 * frameCount));
  triangle ( 40 +  20* sin (0.03 * frameCount), 170, 170, 150, 170, 190);
  triangle ( 160, 180, 190, 150, 100 + 20* sin (0.03 * frameCount + 15), 50 +  20* sin (0.03 * frameCount + 15));

  triangle ( 240, 180, 210, 150, 300 - 20* sin (0.03 * frameCount + 15), 50 + 20* sin (0.03 * frameCount + 15));
  triangle ( 360  -  20* sin (0.03 * frameCount), 170, 230, 150, 230, 190);
  triangle (70 + 20* sin (0.03 * frameCount + 15), 280 - 20* sin (0.03 * frameCount + 15), 180, 170, 190, 210);
  triangle ( 330 -20* sin (0.03 * frameCount + 15), 280 - 20* sin (0.03 * frameCount + 15), 220, 170, 210, 210);

  strokeWeight(4);

  fill(65, 65, 65, (mouseX - 100 /0.75));

  //devil right wing
  //using shapes to fill/colour in wings
  
   
  quad (235, 245, 230, 265, 280, 230, 270, 225);
  quad (280, 230, 270, 227, 295, 195, 300, 200);
  triangle (295, 198, 320, 190, 305, 165) ;

  quad (320, 190, 305, 190, 315, 215, 330, 215);
  quad (315, 215, 330, 215, 330, 250, 319, 250);
  triangle (320, 250, 330, 250, 321, 285);

  quad (308, 190, 300, 190, 295, 240, 305, 240);
  quad (295, 240, 305, 240, 293, 280, 285, 280);
  triangle (293, 280, 285, 280, 279, 300);

  quad (295, 195, 303, 195, 285, 250, 277, 250); 
  quad (285, 250, 277, 250, 257, 280, 265, 280);
  triangle (257, 280, 265, 280, 240, 300);

  noFill();
  stroke(0, 0, 0, 0 + (mouseX - 100/ 0.75));
  
  //devil right wing outline
  curve (120, 225, 235, 245, 305, 165, 300, 0);
  curve (205, 100, 305, 165, 314, 300, 100, 600);
  curve (250, 400, 314, 300, 305, 190, 200, 100);
  curve (220, 150, 305, 190, 279, 300, 200, 300); 
  curve (200, 400, 279, 300, 297, 210, 310, 0);
  curve (320, 0, 297, 210, 240, 300, 150, 280);
  curve (180, 300, 240, 300, 287, 220, 330, 0);
  curve (375, 100, 287, 220, 230, 255, 100, 300);

  //devil left wing
  noStroke(); 
  fill(65, 65, 65,(mouseX - 100 /0.75)); 

  quad (165, 245, 170, 265, 120, 230, 130, 225);
  quad (120, 230, 130, 227, 105, 195, 100, 200);
  triangle (107, 198, 80, 190, 95, 165) ;

  quad (80, 190, 95, 190, 85, 215, 70, 215 );
  quad (85, 215, 70, 215, 70, 250, 81, 250);
  triangle (80, 250, 70, 250, 81, 285);

  quad (92, 190, 100, 190, 105, 240, 95, 240);
  quad (105, 240, 95, 240, 107, 280, 115, 280);
  triangle (107, 280, 115, 280, 121, 300);

  quad (105, 195, 97, 195, 115, 250, 123, 250); 
  quad ( 115, 250, 123, 250, 143, 280, 135, 280);
  triangle ( 143, 280, 135, 280, 160, 300);

  noFill();
  stroke(0, 0, 0, 0 + (mouseX - 100/ 0.75));
  //left wing outline
  curve ( 280, 225, 165, 245, 95, 165, 100, 0);
  curve (195, 100, 95, 165, 86, 300, 300, 600);
  curve ( 150, 400, 86, 300, 95, 190, 200, 100 );
  curve ( 180, 150, 95, 190, 121, 300, 200, 300 ); 
  curve ( 200, 400, 121, 300, 103, 210, 90, 0);
  curve ( 80, 0, 103, 210, 160, 300, 250, 280 );
  curve ( 220, 300, 160, 300, 113, 220, 70, 0 );
  curve ( 25, 100, 113, 220, 170, 255, 300, 300 );

  //angel left wing
  noStroke();
  quad (70, 220, 60, 250, 160, 250, 160, 220);
  fill ( 255, 255, 255, 400 - (mouseX + 100/ 0.75));
  quad (70, 220, 55, 250, 160, 250, 160, 220);
  quad ( 55, 250, 160, 250, 160, 260, 50, 260);
  quad (75, 250, 130, 250, 130, 270, 70, 270);
  quad (70, 270, 95, 270, 70, 305, 55, 290); 
  quad (70, 305, 55, 290, 50, 290, 52, 305 );

  quad ( 50, 255, 75, 260, 45, 278, 40, 260 );
  quad ( 45, 278, 40, 260, 30, 260, 35, 270);

  stroke(0, 0, 0, 400 - (mouseX + 100/ 0.75));
  curve ( 50, 1000, 70, 220, 160, 220, 400, 190 );
  noFill();

  //angel left wing outline
  curve ( 120, 0, 70, 220, 30, 260, 20, 240 );
  curve ( 40, 200, 30, 260, 50, 275, 70, 250 );
  curve (-50, 300, 50, 275, 75, 245, 70, 250);
  curve (50, 200, 75, 245, 50, 290, 0, 280);
  curve ( 70, 220, 50, 290, 65, 305, 100, 280 );
  fill(255, 255, 255, 400 - (mouseX + 100/ 0.75));
  curve (140, 200, 135, 260, 145, 260, 140, 100 );
  curve ( 100, 150, 115, 275, 135, 250, 120, 100 );
  curve ( 110, 50, 90, 275, 120, 250, 105, 0 );

  noFill();
  curve (000, 300, 65, 305, 100, 240, 100, 100 );
  stroke(0);

  //angel right wing
  noStroke();
  quad (330, 220, 340, 250, 240, 250, 240, 220);
  fill ( 255, 255, 255, 400 - (mouseX + 100/ 0.75));
  quad (330, 220, 345, 250, 240, 250, 240, 220);
  quad ( 345, 250, 240, 250, 240, 260, 350, 260);
  quad (325, 250, 270, 250, 270, 270, 330, 270);
  quad (330, 270, 305, 270, 330, 305, 345, 290); 
  quad (330, 305, 345, 290, 350, 290, 348, 305 );

  quad ( 350, 255, 325, 260, 355, 278, 360, 260 );
  quad ( 355, 278, 360, 260, 370, 260, 365, 270);

  stroke ( 0, 0, 0, 400 - (mouseX + 100/ 0.75));
  curve ( 350, 1000, 330, 220, 240, 220, 0, 190 );
  noFill();

  //angel right wing outline
  curve ( 280, 0, 330, 220, 370, 260, 380, 240 );
  curve ( 360, 200, 370, 260, 350, 275, 330, 250 );
  curve (450, 300, 350, 275, 325, 245, 330, 250);
  curve (350, 200, 325, 245, 350, 290, 400, 280);
  curve ( 330, 220, 350, 290, 335, 305, 300, 280 );
  fill(255, 255, 255, 400 - (mouseX + 100/ 0.75));
  curve (260, 200, 265, 260, 255, 260, 260, 100 );
  curve ( 300, 150, 285, 275, 265, 250, 280, 100 );
  curve ( 290, 50, 310, 275, 280, 250, 295, 0 );

  noFill();
  curve (400, 300, 335, 305, 300, 240, 300, 100 );
  stroke(0);

  fill(250 - (mouseX/2.16), 210 - (mouseX/2.75), 200 - (mouseX/2.96));
  //right arm
  curve( 180, 100, 240, 280, 240, 220, 80, 0);
  //left arm
  curve (220, 100, 160, 280, 160, 220, 320, 0);

  //body 

  ellipse (200, 260, 85, 90);

  //curve and triangle used to smooth between body and head
  curve ( 170, 0, 235, 220, 242, 270, 240, 300);
  noStroke();
  triangle (240, 260, 222, 250, 235, 220);

  stroke(0);
  curve ( 230, 0, 165, 220, 158, 270, 160, 300);
  noStroke();
  triangle( 160, 260, 178, 250, 165, 220);

  //left leg 
  rect (157, 270, 33, 60);
  stroke(0);
  curve (170, 100, 158, 270, 160, 330, 170, 300);
  line (160, 330, 190, 330);
  curve (185, 500, 191, 330, 191, 305, 185, 100 );

  //right leg
  noStroke();
  rect (210, 270, 32, 60);
  stroke(0);
  curve (235, 100, 242, 270, 240, 330, 235, 300);
  line (240, 330, 210, 330);
  curve (215, 500, 209, 330, 209, 305, 215, 100);

  //curve (0,290 , 185, 305, 215, 305, 400 ,290);

  //head
  stroke(0);
  strokeWeight(5);
  ellipse (200, 185, 130, 120);


  //tears
  fill(100, 255, 255, 400 - (mouseX + 100 /0.75));
  noStroke();
  quad (155, 190, 180, 190, 180, 215, 155, 210 ); 
  quad ( 180, 215, 155, 210, 150, 220, 160, 230);

  quad (245, 190, 220, 190, 220, 215, 245, 210 ); 
  quad ( 220, 215, 245, 210, 250, 220, 240, 230); 
  
  //pentagram
  stroke( 150, 0 ,0, (mouseX - 100 /0.75));
  strokeWeight(2);
  line ( 213, 150, 187, 170);
  line ( 187, 150, 213, 170);
  line ( 187, 170, 213, 170);
  line ( 200, 180, 213, 150);
  line ( 200, 180, 187, 150);

  //left eye 
  fill(0 + (mouseX /4.2), 0, 0);
  stroke (0);
  strokeWeight(1);
  ellipse (167, 185, 33, 33);

  fill (255);
  noStroke();
  ellipse (162, 178, 12, 12);
  ellipse (174, 192, 6, 6);

  //right eye
  fill(0 + (mouseX /4.2), 0, 0);
  stroke(0);
  ellipse (233, 185, 33, 33 );

  fill (255, 255);
  noStroke();
  ellipse (228, 178, 12, 12);
  ellipse (240, 192, 6, 6);

  //mouth 

  noFill();
  stroke(0);
  strokeWeight (4);
  curve (115, 250, 185, 210, 215, 210, 275, 250);

  //right horn
  stroke(0, 0, 0, 0 + (mouseX - 100/ 0.75));
  fill(42, 42, 42, 0 + (mouseX - 100 /0.75));

  arc  (300, 120, 40, 40, PI, TWO_PI);
  noStroke();
  triangle ( 300, 120, 320, 120, 310, 140);
  triangle ( 300, 120, 285, 120, 285, 140);
  stroke(0, 0, 0, 0 + (mouseX - 100/ 0.75));
  line ( 300, 120, 310, 140);
  line (320, 120, 310, 140);
  line (300, 120, 285, 140);
  quad ( 255, 165, 230, 145, 255, 105, 285, 120);
  quad ( 255, 105, 280, 95, 300, 145, 275, 155);

  //left horn
  stroke(0, 0, 0, 0 + (mouseX - 100/ 0.75));
  arc  (100, 120, 40, 40, PI, TWO_PI);
  noStroke();
  triangle ( 100, 120, 80, 120, 90, 140);
  triangle ( 100, 120, 115, 120, 115, 140);
  stroke(0, 0, 0, 0 + (mouseX - 100/ 0.75));
  line ( 100, 120, 90, 140);
  line (80, 120, 90, 140);
  line (100, 120, 115, 140);
  quad ( 145, 165, 170, 145, 145, 105, 115, 120);
  quad ( 145, 105, 120, 95, 100, 145, 125, 155);
}

void mousePressed () {
  println (" Mother is watching");
}