Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
float x = 0; //cloud speed 
float speedX = 0.25; //speed change


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

void draw(){
  frameRate(60);
  //sky
  background(150,150,255,100);
  
  //sun
  noStroke();
  fill(255,230,100);
  ellipse(0,0,60,60);
  
  //clouds
  fill(255);
 
 //group 1
  ellipse(x-10,90,100,30);
  ellipse(x-25,80,90,30);
  ellipse(x-50,90,120,35);
  ellipse(x-25,100,110,30);
  
  //group 2
  ellipse(x-110,30,100,30);
  ellipse(x-145,20,90,30);
  ellipse(x-150,30,120,35);
  
  //group 3
  ellipse(x-140,190,140,30);
  ellipse(x-155,180,90,30);
  ellipse(x-160,190,120,35);
  ellipse(x-180,186,130,30);
 
 //group 4
 ellipse(x-430,35,150,30);
 ellipse(x-380,50,100,30);
  ellipse(x-415,40,90,30);
   ellipse(x-420,50,120,35);
   
   //group 5
   ellipse(x-310,130,100,30);
  ellipse(x-345,120,90,30);
   ellipse(x-350,130,120,35);
   
   //clouds second time through
   //gruop 1
    ellipse(x-510,90,100,30);
  ellipse(x-555,80,90,30);
  ellipse(x-550,90,120,35);
  ellipse(x-525,100,110,30);
  
  //group 2
  ellipse(x-610,30,100,30);
  ellipse(x-645,20,90,30);
  ellipse(x-650,30,120,35);
  
  //group 3
  ellipse(x-640,190,140,30);
  ellipse(x-655,180,90,30);
  ellipse(x-660,190,120,35);
  ellipse(x-680,186,130,30);
 
 //group 4
 ellipse(x-930,35,150,30);
 ellipse(x-880,50,100,30);
  ellipse(x-915,40,90,30);
   ellipse(x-920,50,120,35);
   
   //group 5
   ellipse(x-810,130,100,30);
  ellipse(x-845,120,90,30);
   ellipse(x-850,130,120,35);
   
   //clouds move from right to left
   x=x+speedX;
   
   //background structures
   fill(0);
   //temple
  quad(200,170,210,180,310,180,320,170);
   rect(220,230,10,100);
   rect(240,230,10,100);
   rect(260,230,10,100);
   rect(280,230,10,100);
   rect(300,230,10,100);
   
   stroke(0);
   //statue left
    quad(170,150,180,140,180,200,170,310);
    ellipse(170,140,20,5);
    ellipse(179,140,7,25);
    ellipse(175,139,12,10);
    ellipse(175,150,18,5);
    ellipse(165,165,22,4);
    line(156,155,166,205);
    quad(152,150,152,140,157,148,156,155);
    
    //statue right
    quad(350,150,340,140,340,200,350,310);
    ellipse(350,140,20,5);
    ellipse(341,140,7,25);
    ellipse(345,139,12,10);
    ellipse(345,150,18,5);
    ellipse(355,165,22,4);
    line(364,155,354,205);
    quad(368,150,368,140,363,148,364,155);
   
   
   //hills
   fill(230,170,60);
    ellipse(350,340,500,270);
   ellipse(100,330,550,270);
   noStroke();
   rect(300,330,300,200);
   
   fill(180);
   stroke(0);
   //left pillar
   quad(-10,180,-10,170,30,170,15,180);
   quad(-10,360,-10,180,15,180,20,360);
   quad(-10,360,20,360,50,390,-20,390);
   
   //right pillar
   quad(410,180,410,170,370,170,385,180);
    quad(410,360,410,180,385,180,380,360);
   quad(410,360,380,360,350,390,420,390);
   
   //floor
   stroke(0);
   rect(0,405,50,30);
   rect(50,405,50,30);
   rect(100,405,50,30);
   rect(150,405,50,30);
   rect(200,405,50,30);
   rect(250,405,50,30);
   rect(300,405,50,30);
   rect(350,405,50,30);
   rect(400,405,50,30);
   
    rect(20,410,60,30);
   rect(75,410,50,30);
   rect(125,410,50,30);
   rect(175,410,50,30);
   rect(225,410,50,30);
   rect(275,410,50,30);
   rect(325,410,50,30);
   rect(375,410,50,30);
   rect(425,410,50,30);
   
   //little people
   //man 1
   fill(230,230,140);
   stroke(0);
   ellipse(360,362,10,10);
   noStroke();
   fill(255);
   triangle(350,400,360,380,360,390);
   triangle(360,380,370,400,360,390);
   rect(360,375,5,20);
   triangle(374,364,360,375,360,369);
   triangle(344,364,360,375,360,369);
   
   //man 2
   fill(230,230,140);
   stroke(0);
   ellipse(340,362,10,10);
   noStroke();
   fill(255);
   triangle(330,400,340,380,340,390);
   triangle(340,380,350,400,340,390);
   rect(340,375,5,20);
   triangle(354,364,340,375,340,369);
   triangle(324,364,340,375,340,369);
   
   //man 3
   fill(230,230,140);
   stroke(0);
   ellipse(375,362,10,10);
   noStroke();
   fill(255);
   triangle(365,400,375,380,375,390);
   triangle(375,380,385,400,375,390);
   rect(375,375,5,20);
   triangle(389,364,375,375,375,369);
   triangle(359,364,375,375,375,369);
   
   //all dragon points relative to mouse
   //dragon body fill
   fill(120,200,0);
   noStroke();
   quad(mouseX-40,370,mouseX-30,370,mouseX-10,395,mouseX-30,395);
   quad(mouseX-30,370,mouseX-20,365,mouseX+10,387,mouseX-10,395);
   quad(mouseX-20,365,mouseX-10,355,mouseX+22,375,mouseX+10,387);
   
   quad(mouseX-10,355,mouseX-20,345,mouseX+25,370,mouseX+22,375);
   quad(mouseX-20,345,mouseX-30,340,mouseX+30,360,mouseX+25,370);
   quad(mouseX-30,340,mouseX-40,330,mouseX+30,350,mouseX+30,360);
   
   quad(mouseX-40,330,mouseX-50,310,mouseX+25,340,mouseX+30,350);
   quad(mouseX-50,310,mouseX-50,300,mouseX+15,330,mouseX+25,340);
   quad(mouseX-50,300,mouseX-45,280,mouseX+10,325,mouseX+15,330);
   
   quad(mouseX-45,280,mouseX-40,270,mouseX-2,315,mouseX+5,320);
   quad(mouseX-40,270,mouseX-30,260,mouseX-7,310,mouseX-2,315);
   quad(mouseX-30,260,mouseX-20,255,mouseX-10,305,mouseX-7,310);
   triangle(mouseX-20,255,mouseX-13,300,mouseX-10,305);
   triangle(mouseX-20,255,mouseX-13,295,mouseX-13,300);
   triangle(mouseX-20,255,mouseX-10,285,mouseX-13,295);
   triangle(mouseX-20,255,mouseX-5,278,mouseX-10,285);
   triangle(mouseX-20,255,mouseX+2,273,mouseX-5,278);
   
   //tail fill
   quad(mouseX-80,370,mouseX-40,370,mouseX-30,395,mouseX-80,395);
   quad(mouseX-90,365,mouseX-80,370,mouseX-80,395,mouseX-100,385);
   quad(mouseX-115,360,mouseX-125,350,mouseX-115,343,mouseX-105,350);
   triangle(mouseX-125,350,mouseX-135,345,mouseX-115,343);
   triangle(mouseX-115,360,mouseX-105,350,mouseX-90,365);
   quad(mouseX-100,385,mouseX-110,375,mouseX-115,360,mouseX-90,365);
   
   
   //head fill
   fill(255);
   //horn 1
   triangle(mouseX-20,255,mouseX-50,230,mouseX-20,240);
   //horn 2
   triangle(mouseX-20,240,mouseX-35,220,mouseX-10,235);
   //horn 3
   triangle(mouseX-10,235,mouseX-20,220,mouseX,235);
   
   fill(120,200,0);
   quad(mouseX-20,255,mouseX-20,240,mouseX+1,268,mouseX+2,273);
   triangle(mouseX-20,240,mouseX-10,235,mouseX+1,268);
   triangle(mouseX-10,235,mouseX,235,mouseX+1,268);
   quad(mouseX,235,mouseX+13,235,mouseX+23,245,mouseX+1,268);
   triangle(mouseX+23,245,mouseX+48,245,mouseX+59,255);
   quad(mouseX+59,255,mouseX+54,275,mouseX+49,267,mouseX+29,262);
   triangle(mouseX+23,245,mouseX+59,255,mouseX+29,262);
  triangle(mouseX+23,245,mouseX+14,264,mouseX+29,262);
  triangle(mouseX+1,268,mouseX+14,264,mouseX+23,245);
   triangle(mouseX+1,268,mouseX+14,264,mouseX+19,275);
   triangle(mouseX+1,268,mouseX+19,275,mouseX+2,273);
   triangle(mouseX+2,273,mouseX+19,275,mouseX+9,285);
   quad(mouseX+19,275,mouseX+29,285,mouseX+24,295,mouseX+9,285);
   quad(mouseX+29,285,mouseX+47,288,mouseX+39,295,mouseX+24,295);
   
   //mouth
   fill(255,190,190);
   triangle(mouseX+14,264,mouseX+29,262,mouseX+19,275);
   //teeth
   fill(255);
   triangle(mouseX+29,262,mouseX+33,264,mouseX+31,270);
   triangle(mouseX+33,264,mouseX+39,266,mouseX+35,272);
   triangle(mouseX+39,266,mouseX+45,266,mouseX+41,274);
   triangle(mouseX+45,266,mouseX+50,268,mouseX+48,276);
   
   
   
   //dragon body left lines
   stroke(0);
   line(mouseX-60,370,mouseX-40,370);
   line(mouseX-40,370,mouseX-30,370);
   line(mouseX-30,370,mouseX-20,365);
   line(mouseX-20,365,mouseX-10,355);
   
   line(mouseX-10,355,mouseX-20,345);
   line(mouseX-20,345,mouseX-30,340);
   line(mouseX-30,340,mouseX-40,330);
   
   line(mouseX-40,330,mouseX-50,310);
   line(mouseX-50,310,mouseX-50,300);
   line(mouseX-50,300,mouseX-45,280);
   
   line(mouseX-45,280,mouseX-40,270);
   line(mouseX-40,270,mouseX-30,260);
   line(mouseX-30,260,mouseX-20,255);
   
   //head
   line(mouseX-20,255,mouseX-50,230);
   line(mouseX-50,230,mouseX-20,240);
   line(mouseX-20,240,mouseX-15,242);
   
   line(mouseX-20,240,mouseX-35,220);
   line(mouseX-35,220,mouseX-10,235);
   line(mouseX-10,235,mouseX-7,238);
   
   line(mouseX-10,235,mouseX-20,220);
   line(mouseX-20,220,mouseX,235);
   line(mouseX,235,mouseX+13,235);
   line(mouseX+13,235,mouseX+23,245);
   line(mouseX+23,245,mouseX+48,245);
   line(mouseX+48,245,mouseX+54,250);
   line(mouseX+54,250,mouseX+59,255);
   line(mouseX+59,255,mouseX+54,275);
   line(mouseX+54,275,mouseX+49,267);
   line(mouseX+49,267,mouseX+29,262);
   line(mouseX+29,262,mouseX+14,264);
   line(mouseX+14,264,mouseX+19,275);
   line(mouseX+19,275,mouseX+29,285);
   line(mouseX+29,285,mouseX+47,288);
   line(mouseX+47,288,mouseX+39,295);
   line(mouseX+39,295,mouseX+24,295);
   line(mouseX+24,295,mouseX+9,285);
   line(mouseX+9,285,mouseX+2,273);
   line(mouseX+2,273,mouseX+1,268);
   
   //dragon body right lines
   line(mouseX+2,273,mouseX-5,278);
   line(mouseX-5,278,mouseX-10,285);
   line(mouseX-10,285,mouseX-13,295);
   
   line(mouseX-13,295,mouseX-13,300);
   line(mouseX-13,300,mouseX-10,305);
   line(mouseX-10,305,mouseX-7,310);
   
   line(mouseX-7,310,mouseX-2,315);
   line(mouseX-2,315,mouseX+5,320);
   line(mouseX+5,320,mouseX+10,325);
   
   line(mouseX+10,325,mouseX+15,330);
   line(mouseX+15,330,mouseX+25,340);
   line(mouseX+25,340,mouseX+30,350);
   
   line(mouseX+30,350,mouseX+30,360);
   line(mouseX+30,360,mouseX+25,370);
   line(mouseX+25,370,mouseX+22,375);
   
   line(mouseX+22,375,mouseX+10,387);
   line(mouseX+10,387,mouseX-10,395);
   line(mouseX-10,395,mouseX-80,395);
   
   //tail
   line(mouseX-80,395,mouseX-100,385);
   line(mouseX-100,385,mouseX-110,375);
   line(mouseX-110,375,mouseX-115,360);
   line(mouseX-115,360,mouseX-125,350);
   line(mouseX-125,350,mouseX-135,345);
   
   line(mouseX-135,345,mouseX-115,343);
   line(mouseX-115,343,mouseX-105,350);
   line(mouseX-105,350,mouseX-90,365);
   line(mouseX-90,365,mouseX-80,370);
   line(mouseX-80,370,mouseX-60,370);
   
   // dragon nose slit
   fill(0);
   triangle(mouseX+52,256,mouseX+55,256,mouseX+54,259);
   //dragon eye
   triangle(mouseX+5,240,mouseX+15,246,mouseX+7,247);
   fill(200,50,50);
   ellipse(mouseX+10,245,4,4);
   
   }
   
   void mousePressed(){
     //dragon fire relative to mouse point
     fill(200,70,0,200);
     noStroke();
     //show fire at 2 frames per second
     frameRate(2);
     triangle(mouseX+40,275,mouseX+120,320,mouseX+45,290);
     triangle(mouseX+60,270,mouseX+120,280,mouseX+40,275);
     quad(mouseX+40,275,mouseX+60,275,mouseX+130,300,mouseX+60,288);
     
   }
   
   void keyPressed(){
     //speech bubble
     // show at 1.5 frames per second
     frameRate(1.5);
  noStroke();
 fill(255);
 ellipse(345,330,60,30);
 triangle(330,330,350,330,345,355);
 //"help"
 
 stroke(0);
 //letter H
 line(322,322,322,335);
 line(322,329,328,329);
 line(328,322,328,335);
 //letter E
 line(334,322,334,335);
 line(334,322,340,322);
 line(334,328,340,328);
 line(334,335,340,335);
 //letter L
 line(346,322,346,335);
 line(346,335,351,335);
 //letter P
 line(357,322,357,335);
 line(357,322,363,325);
 line(363,325,357,330);
 // "!"
 line(368,322,368,331);
 line(368,334,368,336);
 }