Your browser does not support the canvas tag.

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

void draw(){
//create the background
//set bg colour
background(0, 0, 50); 

//draw the moon and have it follow the mouse
stroke(230); 
fill(230); 
ellipse (mouseX, mouseY, 80, 80); 
stroke(230, 0); 
fill(230, 50); 
ellipse(mouseX, mouseY, 140, 140); 

//draw the hill 
stroke(0, 50, 50); 
fill(0, 50, 50); 
ellipse(400, 400, 450, 450); 

//draw the ground
stroke(0, 70, 70); 
fill (0, 70, 70); 
rect(200, 360, 400, 80);

//draw the cast shadow and make it move
fill (0, 50, 50); 
stroke(0, 50, 50);
ellipse(400 - mouseX, 380, 450, 50); 

//Set shape modes
rectMode(CENTER); 
ellipseMode(CENTER); 

//draw the head
fill(255); 
stroke(255); 
ellipse(275, 120, 100, 100);  
ellipse(300, 150, 60, 50); 

//draw the ears 
triangle(220, 22, 228, 130, 265, 75); 
triangle(310, 15, 315, 90, 293, 93); 

//draw the nose
fill (125); 
stroke(125); 
ellipse(315, 145, 30, 15); 

//draw the eyes
fill(200, 200, 255); 
stroke (170, 170, 255); 
ellipse(280, 110, 15, 40); 
ellipse(315, 110, 7, 40); 

// draw the grayed out back legs
fill(125); 
stroke(125); 

//draw the front darker leg
quad(275, 225, 240, 230, 230, 260, 265, 255); 
quad( 275, 355, 245, 360, 230, 260, 265, 255); 
quad (275, 355, 245, 360, 260, 380, 300, 380); 
quad(295, 360, 265, 360, 280, 380, 308, 380); 

//draw the back darker leg
quad (190, 230, 153, 241, 180, 300 ,219, 277); 
quad(219, 277,190, 270, 158, 320, 180, 350); 
quad (158, 320, 188, 310, 230, 380 ,200, 380); 

//draw the body  
fill (255); 
stroke(255); 

//draw the neck and body
quad(228, 130, 290, 170, 260, 240, 211, 183); 
ellipse(228, 220, 90, 90); 
quad(211, 183, 231, 265, 140, 250, 150, 193); 
ellipse(155, 223, 60, 60); 

//draw the frontal legs 
//draw the front leg
quad( 229, 229, 187, 233, 180, 258, 218, 256); 
quad(180, 258, 218, 256, 218, 350 ,180, 350); 
quad (218, 350 ,180, 350, 201, 380, 236, 380); 
quad(200, 360, 232, 360, 241, 380, 200, 380); 

//draw the back leg 
quad (125, 220, 180, 240, 145, 295, 103, 282); 
quad (145, 295, 103, 282, 80, 320, 115, 325); 
quad(80, 320, 115, 325, 110, 360 ,80, 360); 
quad(80, 360, 120, 360, 130, 380, 100, 380); 

//draw the tail 
triangle(130, 205, 155, 255, 60, 280); 

//draw the little paw lines and mouth lines
fill(125); 
stroke(125); 
strokeWeight(3); 

//draw the mouth
line (305, 167, 317, 159); 
line (317, 159, 325, 163); 

//draw the front paw lines
line( 210, 368, 219, 380); 
line( 225, 368, 234, 380); 
line( 232, 368, 241, 380); 

//draw the back paw lines
line( 100, 368, 109, 380); 
line( 115, 368, 124, 380); 
line( 122, 368, 131, 380); 
}

//when the mouse is dragged, make the screen change and look spooky
void mouseDragged(){
  
  //make the eyes red
  fill(255, 0, 0); 
stroke (255, 0, 0); 
ellipse(280, 110, 15, 40); 
ellipse(315, 110, 7, 40);

//make the eyes glow
  fill(255, 0, 0, 25); 
  stroke(255, 0, 0, 0); 
  ellipse(280, 110, 40, 60); 
  ellipse(315, 110, 25, 60); 
  
  //expand the mouth
  fill(125); 
stroke(125); 
strokeWeight(3); 
line (305, 167, 282, 144); 
line (282, 144, 269, 157); 
line (269, 157, 249, 120); 

  //have a rectangle appear and faze the screen with an opacity layer, first in red, then in black
  fill(120, 0, 0, 50);  
  stroke(0, 50); 
  rectMode(CORNER); 
  rect(0, 0, 400, 400); 
  
  fill(0, 50);  
  stroke(0, 50); 
  rectMode(CORNER); 
  rect(0, 0, 400, 400); 
  
  
}