Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* A wolf howls at the moon
By Jennifer Stienstra
*/


void setup() {

  size(400, 400);
  println("Click mouse to howl");
}


void draw() {
  //sky
  background(9, 3, 95);
  //change framerate to make stars look more "twinkly"
  frameRate(120);
  //ground
  fill(22, 62, 13);
  //changed rect mode to CORNERS, which creates the rectangle using the upper left corner and the bottom right corner. That's the shape mode I prefer
  rectMode(CORNERS);
  rect(0, 320, 400, 400);

  //moon
  fill(250, 250, 225);
  //ellipse mode CORNER creates the ellipse with the upper left corner and the width and height for shape. This is my prefered mode for ellipses
  ellipseMode(CORNER);
  ellipse(300, 20, 60, 60);

  //stars
  //no stroke means the shapes don't have an outline
  noStroke();

  //star 1
  //brightness added to fill to change opacity and make it look like the stars are twinkling
  //fill includes the rgb values
  fill(255, 255, 167, brightness(mouseX-20));
  triangle(80, 40, 90, 55, 70, 55);
  triangle(80, 60, 90, 45, 70, 45);
  //star 2
  fill(255, 255, 167, brightness(mouseX-5));
  triangle (270, 120, 280, 135, 260, 135);
  triangle(270, 140, 280, 125, 260, 125);
  //star 3
  fill(255, 255, 167, brightness(mouseX));
  triangle(250, 20, 260, 35, 240, 35);
  triangle(250, 40, 260, 25, 240, 25);
  //star 4
  fill(255, 255, 167, brightness(mouseX+5));
  triangle(70, 140, 80, 155, 60, 155);
  triangle(70, 160, 80, 145, 60, 145);
  //star 5
  fill(255, 255, 167, brightness(mouseX-10));
  triangle(370, 100, 380, 115, 360, 115);
  triangle(370, 120, 380, 105, 360, 105);
  //star 6
  fill(255, 255, 167, brightness(mouseX+15));
  triangle(190, 60, 200, 75, 180, 75);
  triangle(190, 80, 200, 65, 180, 65);
  //star 7
  fill(255, 255, 167, brightness(mouseX+9));
  triangle(150, 110, 160, 125, 140, 125);
  triangle(150, 130, 160, 115, 140, 115);
  //star 8
  fill(255, 255, 167, brightness(mouseX-14));
  triangle(30, 80, 40, 95, 20, 95);
  triangle(30, 100, 40, 85, 20, 85);
  brightness(255);


  //wolf (oh god)

  //wolf legs
  fill (65);
  //leg one
  //rectmode is corner, using the x and y coordinates of the upper left corner and the width and height
  rectMode(CORNER);
  rect(110, 280, 10, 40);
  //leg 2
  rectMode(CORNER);
  rect(130, 280, 10, 40);
  //leg 3
  rectMode(CORNER);
  rect(160, 280, 10, 40);
  //leg4
  rectMode(CORNER);
  rect(180, 280, 10, 40);

  //wolf body
  fill (75);
  rectMode(CORNER);
  rect(100, 240, 100, 40);

  //wolf tail
  fill (65);
  triangle(100, 240, 70, 270, 100, 255);

  //wolf neck
  rectMode(CORNER);
  rect(180, 230, 20, 10);
  //not sure if I should make the neck the same colour as the body and head
  //wolf head
  fill(75);
  rectMode(CORNER);
  rect(180, 210, 40, 20);

  //wolf eye
  fill(0);
  ellipseMode(CORNER);
  ellipse(205, 213, 8, 8);

  //wolf mouth
  stroke(0);
  line(205, 225, 220, 225);

  //wolf ear
  noStroke();
  fill(65);
  triangle(190, 200, 185, 210, 195, 210);
}


//animated bit

void mousePressed() {
  //slow down frame rate to show wolf howling
  frameRate(1);
  //sky
  background(9, 3, 95);
  //WOLF HOWLING
  println("AWOOOOOOOOOOO");  
  //ground
  fill(22, 62, 13);
  rectMode(CORNERS);
  rect(0, 320, 400, 400);

  //moon
  fill(250, 250, 225);
  ellipseMode(CORNER);
  ellipse(300, 20, 60, 60);

  //stars
  fill(255, 255, 167);
  noStroke();
  //stars don't twinkle because framerate is too slow
  
  //star 1
  triangle(80, 40, 90, 55, 70, 55);
  triangle(80, 60, 90, 45, 70, 45);
  //star 2
  triangle (270, 120, 280, 135, 260, 135);
  triangle(270, 140, 280, 125, 260, 125);
  //star 3
  triangle(250, 20, 260, 35, 240, 35);
  triangle(250, 40, 260, 25, 240, 25);
  //star 4
  triangle(70, 140, 80, 155, 60, 155);
  triangle(70, 160, 80, 145, 60, 145);
  //star 5
  triangle(370, 100, 380, 115, 360, 115);
  triangle(370, 120, 380, 105, 360, 105);
  //star 6
  triangle(190, 60, 200, 75, 180, 75);
  triangle(190, 80, 200, 65, 180, 65);
  //star 7
  triangle(150, 110, 160, 125, 140, 125);
  triangle(150, 130, 160, 115, 140, 115);
  //star 8
  triangle(30, 80, 40, 95, 20, 95);
  triangle(30, 100, 40, 85, 20, 85);



  //wolf (oh god)

  //wolf legs
  fill (65);
  //leg one
  rectMode(CORNER);
  rect(110, 280, 10, 40);
  //leg 2
  rectMode(CORNER);
  rect(130, 280, 10, 40);
  //leg 3
  rectMode(CORNER);
  rect(160, 280, 10, 40);
  //leg4
  rectMode(CORNER);
  rect(180, 280, 10, 40);

  //wolf body
  fill (75);
  rectMode(CORNER);
  rect(100, 240, 100, 40);

  //wolf tail
  fill (65);
  triangle(100, 240, 70, 270, 100, 255);

  //wolf neck
  rectMode(CORNER);
  rect(180, 230, 20, 10);


  //howl head
  fill(75);
  quad(185, 240, 172, 225, 203, 196, 215, 213);

  // howl eyes
  stroke(0);
  noFill();
  arc(198, 203, 10, 10, radians(100+80), radians(170+80));

  // howl mouth
  noStroke();
  fill(0);
  ellipseMode(CORNER);
  ellipse(205, 209, 6, 6);

  //howl ear
  fill(65);
  triangle(172, 215, 180, 218, 174, 223);
}