Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
// Penguin and Dragon - Liliana Nairn
// A penguin's attempt to brush a dragon's teeth
// Just move the mouse up and down to see the drawing move

void setup()
{
  // Set window size to 400 x 400
  size(400, 400);
  // Set rectMode() to CORNERS
  rectMode(CORNERS);
}

void draw()
{
  // Set background to a light blue
  background(73, 228, 255);
  
  // Clouds - To give some backdrop
  // Set colour to white
  fill(255, 255, 255);
  stroke(255, 255, 229);
  // Set ellipseMode() to
  // Cloud on the left
  ellipse(0+mouseY/5, 70, 120, 100);
  ellipse(60+mouseY/5, 70, 120, 120);
  ellipse(120+mouseY/5, 70, 120, 100);
  // Cloud on the right
  ellipse(400+mouseY/5, 120, 80, 80);
  ellipse(360+mouseY/5, 120, 80, 80);

  // The Platform - platform is for penguin to stand on
  // Set colour to brown
  fill(133, 67, 0);
  stroke(133, 67, 0);
  rect(260, 380, 380, 400);
  triangle(260, 380, 260, 400, 240, 400);
  triangle(380, 380, 380, 400, 400, 400);
  
  // The Dragon
  // The Spines
  // Set colour to silver gray
  fill(221, 221, 229);
  stroke(61, 62, 64);
  triangle(50, 230, 80, 230, 70, 250);
  triangle(30, 250, 60, 250, 50, 270);
  triangle(10, 270, 40, 270, 30, 290);
  triangle(0-10, 290, 20, 290, 10, 310);

  // The Neck
  // Set colour to red
  fill(191, 7, 0);
  stroke(127, 5, 0);
  quad(0, 400, 0, 300, 50, 300, 50, 400);
  quad(0, 300, 35, 340, 115, 270, 80, 230);
  // To cover the line that intersects with the two quads
  stroke(191, 7, 0);
  rect(1, 301, 49, 341);

  // The Inside of the Mouth
  // Set colour to off white
  fill(255, 255, 229);
  stroke(229, 229, 206);
  // Top row of Teeth
  triangle(190, 245, 200, 245, 195, 260);
  triangle(200, 245, 210, 245, 205, 260);
  triangle(210, 245, 220, 245, 215, 260);
  triangle(220, 245, 230, 245, 225, 260);
  // Bottom row of Teeth
  triangle(185, 285, 195, 285, 190, 270);
  triangle(195, 285, 205, 285, 200, 270);
  triangle(205, 285, 215, 285, 210, 270);
  triangle(215, 285, 225, 285, 220, 270);
  // Mouth lining - to give mouth a more natural look
  // Set colour to a darker shade of red
  fill(127, 5, 0);
  stroke(127, 5, 0);
  triangle(170, 245, 170, 285, 190, 285);
  triangle(170, 245, 170, 285, 190, 245);

  // The Outside of the Mouth
  // Set back to first red
  fill(191, 7, 0);
  stroke(127, 5, 0);
  // Upper mouth moves up when mouse is moved down and vise veresa
  rect(170, 245-mouseY/20, 230, 265-mouseY/20, 0, 5, 5, 0);
  // Lower mouth moves down when mouse is moved down and vise veresa
  rect(170, 265+mouseY/20, 230, 285+mouseY/20, 0, 5, 5, 0);

  // The Nose
  // Allows the nose to move with the upper mouth
  quad(200, 238-mouseY/20 , 215, 238-mouseY/20, 220, 245-mouseY/20, 205, 245-mouseY/20);
  // Nostril
  // Set to black
  fill(0);
  triangle(208, 240-mouseY/20, 213, 243-mouseY/20, 210, 243-mouseY/20);

  // The Head
  // Set back to first red
  fill(191, 7, 0);
  rect(80, 220, 170, 310, 10); 

  // The Horn
  // Set to silver gray
  fill(221, 221, 229);
  stroke(61, 62, 64);
  triangle(80, 225, 100, 225, 50, 180);
  // Used to create a more rounded effect
  ellipse(90, 225, 21, 10);
  // To cover line between the two objects
  fill(221, 221, 229);
  stroke(221, 221, 229);
  // Set ellipseMode() to CORNERS
  ellipseMode(CORNERS);
  ellipse(80, 219, 97, 229);

  // The Eye
  // Set colour to a lighter red
  fill(229, 9, 0);
  stroke(127, 5, 0);
  // Set ellipseMode() back to default
  ellipseMode(CENTER);
  // The eye outline 
  ellipse(120, 230, 40, 30);
  // Set colour to green
  fill(0, 127, 2);
  // The iris
  ellipse(120, 230, 20, 10);
  // Set colour to black
  fill(0);
  stroke(0, 127, 2);
  // The pupil
  ellipse(120, 230, 5, 10);

  // The Penguin
  // The Neck
  // Set colour to black
  fill(0);
  stroke(0);
  rect(320, 220, 360, 240);

  // The Tail
  triangle(350, 300, 350, 360, 400, 360);

  // The Foot
  // Set colour to orange
  fill(255, 118, 35);
  stroke(255, 118, 35);
  triangle(300, 380, 340, 360, 340, 380);

  // The Beak
  triangle(280, 210, 320, 195, 320, 210);

  // The Main Flipper
  // Set colour to white
  fill(255, 255, 255);
  stroke(0);
  triangle(250, 270, 340, 260, 340, 290);
  // Rectangle to hide part of Flipper
  // Set colour background colour
  fill(73, 228, 255);
  stroke(73, 228, 255);
  rect(245, 260, 270, 280);
  
  // Toothbrush
  // The handle
  // Set colour to dark blue
  fill(27, 0, 255);
  stroke(0);
  rect(275, 230, 280, 285);
  // The brush
  // Set colour to 
  fill(255, 255, 255);
  stroke(0);
  rect(265, 232, 275, 245);
  // Part of Flipper to hold Toothbrush
  fill(0);
  stroke(0);
  triangle(270, 266, 270, 275, 286, 270);

  // The Body
  // Main part of body
  ellipse(340, 300, 80, 140);
  // Set to white
  fill(255, 255, 255);
  stroke(255, 255, 255);
  // The belly
  ellipse(310, 300, 20, 100);

  // The Head
  // Set to black
  fill(0);
  stroke(0);
  ellipse(340, 200, 60, 60);

  // The Eye
  // Set to white
  fill(255, 255, 255);
  stroke(255, 255, 255);
  ellipse(335, 185, 10, 10);

  // The Brow, blocks half eye
  // Set black
  fill(0);
  stroke(0);
  // This hides part of the eye, so it appears the penguin is surprise when uncovers the eye
  rect(330, 180-mouseY/40, 340, 185-mouseY/40); 
   
  // The Front Flipper
  stroke(255, 255, 255);
  triangle(325, 260, 355, 260, 330, 350);
}