Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*

Crab Island
by: Daniel Nava
Sept 19 2016

Moving the cursor up and down will shift through a day (sun and clouds) and night (moon and stars) cycle.
It will also move the sail boat out of the frame at night.
Billy the crab will move up, down, left or right depending on the position of the cursor.
*/

void setup () {
  size (400, 400);
}

void draw() {

  //light blue to dark blue
  background(106 - mouseY /3, 214 - mouseY/3, 255 - mouseY /3);

  //SUN 
  fill(#FFFA64);
  stroke(#FFFA64);
  ellipse(60, 50 + mouseY / 2, 80, 80);

  //MOON
  fill(#DEDEDE);
  stroke(#DEDEDE);
  ellipse(320, 200 - mouseY / 3, 60, 60);

  //CLOUDS
  fill(#F2F2F2, 200 - mouseY);
  stroke(#F2F2F2, 200 - mouseY);
  ellipse(170, 50, 80, 30);
  ellipse(210, 30, 80, 30);
  ellipse(300, 60, 80, 30);
  ellipse(335, 75, 40, 20);

  //STARS
  fill(255, 0 + mouseY/2);
  stroke(255, 0 + mouseY/2);
  ellipse(150, 60, 5, 5);
  ellipse(200, 50, 5, 5);
  ellipse(70, 80, 5, 5);
  ellipse(30, 100, 5, 5);
  ellipse(40, 20, 5, 5);
  ellipse(15, 60, 5, 5);
  ellipse(385, 60, 5, 5);
  ellipse(110, 110, 5, 5);
  ellipse(230, 18, 5, 5);
  ellipse(295, 25, 5, 5);
  ellipse(355, 15, 5, 5);
  ellipse(275, 115, 5, 5);
  ellipse(365, 110, 5, 5);
  ellipse(150, 20, 5, 5);
  ellipse(248, 78, 5, 5);
  ellipse(95, 35, 5, 5);

  //BOAT
  fill(100 - mouseY/6, 71 - mouseY/7, 38 - mouseY/9);
  stroke(100 - mouseY/6, 71 - mouseY/7, 38 - mouseY/9);
  //main body of boat
  beginShape();
  vertex(40 + mouseY * 1.5, 130);
  vertex(100 + mouseY * 1.5, 130);
  vertex(90  + mouseY * 1.5, 150);
  vertex(55  + mouseY * 1.5, 150);
  endShape();
  //flagpole
  strokeWeight(4);
  fill(255);
  line(70 + mouseY * 1.5, 130, 70 + mouseY * 1.5, 110);
  strokeWeight(1);
  //flag
  fill(242 - mouseY/6, 66 - mouseY/4, 56 - mouseY/4);
  stroke(242 - mouseY/6, 66 - mouseY/4, 56 - mouseY/4);
  triangle(70 + mouseY * 1.5, 110, 70 + mouseY * 1.5, 120, 85 + mouseY * 1.5, 115);


  //WATER
  fill(80 - mouseY/3, 230 - mouseY/3, 200 - mouseY/4);
  stroke(80 - mouseY/3, 230 - mouseY/3, 200 - mouseY/4);
  rectMode(CORNERS);
  rect(-10, 145 - mouseY/65, 420, 420);

  //ISLAND SAND
  fill(252 - mouseY/3, 239 - mouseY/3, 173 - mouseY/4);
  stroke(252 - mouseY/3, 239 - mouseY/3, 173 - mouseY/4);
  ellipseMode(CENTER);
  //right
  ellipse(240, 240, 180, 100);
  //left
  ellipse(140, 240, 180, 100);
  //top
  ellipse(190, 210, 195, 60);
  //mini chunk bottom center
  rectMode(CENTER);
  rect(190, 280, 20, 10);

  //TREE TRUNK
  fill(131 - mouseY/6, 91 - mouseY/7, 38 - mouseY/9);
  stroke(131 - mouseY/6, 91 - mouseY/7, 38 - mouseY/9);
  //bottom trunk
  quad(178, 190, 198, 183, 210, 230, 190, 230);
  //mid trunk
  quad(175, 150, 195, 150, 200, 190, 178, 190);
  //top trunk
  quad(182, 120, 200, 120, 195, 155, 175, 155);


  //TREE LEAVES
  fill(61 - mouseY/4, 144 - mouseY/8, 20 - mouseY/4);
  stroke(61 - mouseY/4, 144 - mouseY/8, 20 - mouseY/4);
  //Leaf 1
  beginShape(); 
  // inital points at the top 
  vertex(190, 125);
  vertex(190, 105);
  //right side points
  vertex(220, 135);  
  vertex(225, 145);
  vertex(230, 170);
  //final point at bottom
  vertex(227, 190);
  //left side points
  vertex(216, 160);
  vertex(205, 142);
  endShape(CLOSE);

  //Leaf 2
  beginShape(); 
  // inital points at the top 
  vertex(190, 125);
  vertex(190, 105);
  //left side points
  vertex(148, 135);  
  vertex(140, 145);
  vertex(135, 170);
  //final point at bottom
  vertex(138, 190);
  //right side points
  vertex(150, 160);
  vertex(160, 142);
  endShape(CLOSE);

  //Leaf 3
  beginShape(); 
  // inital points at the top 
  vertex(190, 115);
  vertex(190, 95);
  //left side points
  vertex(148, 105);  
  vertex(140, 110);
  vertex(135, 115);
  //final point at bottom
  vertex(120, 140);
  //right side points
  vertex(150, 122);
  vertex(160, 118);
  endShape(CLOSE);

  //Leaf 4
  beginShape(); 
  // inital points at the top 
  vertex(190, 115);
  vertex(190, 95);
  //right side points
  vertex(230, 110);  
  vertex(235, 112);
  vertex(240, 115);
  //final point at bottom
  vertex(260, 140);
  //left side points
  vertex(230, 125);
  vertex(220, 122);
  endShape(CLOSE);

  //Leaf 5
  beginShape(); 
  // inital points at the top 
  vertex(190, 105);
  vertex(200, 100);
  //left side points
  vertex(180, 85);  
  vertex(160, 80);
  vertex(135, 85);
  //final point at bottom
  vertex(120, 90);
  //right side points
  vertex(150, 90);
  vertex(160, 93);
  endShape(CLOSE);

  //CRAB
  fill(242 - mouseY/6, 66 - mouseY/4, 56 - mouseY/4);
  stroke(242 - mouseY/6, 66 - mouseY/4, 56 - mouseY/4);
  //body
  ellipse(mouseX/3 + 130, 260 - mouseY/25, 40, 20);
  //legs
  strokeWeight(3);
  line(mouseX/3 +114, 256- mouseY/25, mouseX/3 +106, 260- mouseY/25);
  line(mouseX/3 +114, 262- mouseY/25, mouseX/3 +105, 264- mouseY/25);
  line(mouseX/3 +120, 266- mouseY/25, mouseX/3 +106, 269- mouseY/25);

  line(mouseX/3 +148, 256- mouseY/25, mouseX/3 +155, 260- mouseY/25);
  line(mouseX/3 +148, 262- mouseY/25, mouseX/3 +156, 264- mouseY/25);
  line(mouseX/3 +142, 266- mouseY/25, mouseX/3 +157, 269- mouseY/25);
  //left + right eye
  strokeWeight(2);
  fill(255 - mouseY/6); 
  stroke(255 - mouseY/6);
  ellipse(mouseX/3 +125, 250- mouseY/25, 10, 10);
  ellipse(mouseX/3 +135, 250- mouseY/25, 10, 10);
  //left + right pupil
  fill(0);
  stroke(0);
  ellipse(mouseX/3 +125, 250- mouseY/25, 5, 5);
  ellipse(mouseX/3 +135, 250- mouseY/25, 5, 5);
  //mouth 
  strokeWeight(1);
  line(mouseX/3 +125, 265- mouseY/25, mouseX/3 +135, 265- mouseY/25);
}