Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
// Billy the Ghost
void setup() {
  size(400, 400);
  frameRate(60);
}

void draw() {
  //setting rectMode and ellipseMode
  background(31, 39, 64);
  ellipseMode(CENTER);
  rectMode(CORNERS);

  // the moon
  fill(176, 182, 191);
  ellipse(80, 80, 120, 120);
  fill(158, 166, 191);
  ellipseMode(CORNERS);
  ellipse(110, 80, 120, 90);
  ellipse(120, 100, 130, 110);
  ellipse(100, 110, 110, 120);

  // ground/grass 
  fill(51, 64, 48);
  rect(0, 240, 400, 400);

  //dirt pathway
  fill(64, 55, 43);
  rect(180, 240, 240, 400);

  //clouds  

  /*
  In order to make the clouds seem like they're moving, I use the function
   called frameCount() in order to set the speed of the clouds according to the x axis
   */
  strokeWeight(0.5);
  stroke(50, 51, 51);
  ellipseMode(CORNER);
  fill(146, 147, 148);
  ellipse(160+frameCount/85, 70, 180+frameCount/85, 60);
  fill(153, 155, 156);
  ellipse(198+frameCount/85, 50, 110+frameCount/85, 30);
  ellipse(130+frameCount/85, 110, 140+frameCount/85, 30);
  fill(146, 147, 148);
  ellipse(240+frameCount/85, 133, 120+frameCount/85, 30);


  //grave stones (made up of ellipse and rect)

  //gravestone 1
  noStroke();
  ellipseMode(CORNERS);
  ellipse(40, 220, 90, 270);
  rect(40, 240, 90, 300);
  textSize(20);
  fill(50, 51, 51);
  text("RIP", 50, 245);
  textSize(10);
  text("GG", 57, 260);

  //gravestone 2
  fill(146, 147, 148);
  ellipse(100, 320, 140, 360);
  rect(100, 340, 140, 380);
  fill(50, 51, 51);
  textSize(15);
  text("RIP", 107, 340);

  //gravestone 3
  fill(146, 147, 148); 
  ellipse(260, 200, 300, 240);
  rect(260, 220, 300, 280);
  fill(50, 51, 51);
  textSize(15);
  text("RIP", 270, 230);

  // Billy the Ghost
  fill(255, 255, 255);

  /* In order to allow billy to move according to the mouse, 
   every X and Y  value is replaced by mouseX and mouseY while adding each point's
   offset respectively to these values. */


  // Billy's arms
  /* the use of pmouseX and pmouseY are used to give the effect of the arms 
   flailing around while Billy is flying.*/
  stroke(255, 255, 255);
  strokeWeight(13);
  //line(190, 230, 170, 245);
  //line(220, 230, 245, 245);
  line(mouseX-15, mouseY+25, pmouseX-35, pmouseY+40); //left arm
  line(mouseX+15, mouseY+25, pmouseX+40, pmouseY+40); //right arm

  // removing unwanted strokes
  noStroke();

  // Billy's body
  fill(255, 255, 255);
  rectMode(CENTER);
  //rect(205, 235, 40, 30);
  rect(mouseX, mouseY+30, 40, 30);

  // Billy's head
  ellipseMode(CENTER);
  //ellipse(205, 205, 60, 60);
  ellipse(mouseX, mouseY, 60, 60);

  // Billy's eyes 
  /* mouseY in fill() allows Billy's eyes to turn red accoring to the mouse's 
   horizontal movements*/
  fill(mouseY, 0, 0);
  //ellipse(195, 200, 10, 30);
  //ellipse(215, 200, 10, 30);
  ellipse(mouseX-10, mouseY-5, 10, 30); // left eye
  ellipse(mouseX+10, mouseY-5, 10, 30); // right eye

  // Billy's mouth
  //ellipse(205, 225, 5, 10);
  fill(0,0,0);
  if (mousePressed==true) { 
    ellipse(mouseX, mouseY+20, 25, 25);
  } // this allows Billy to open up his mouth when pressing the mouse button.
  ellipse(mouseX, mouseY+20, 5, 10);
}