Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* Placid Pond
 Calvin Leveille 9/22/2016
 Horizontal mouse movement changes horizontal perspective, makes grass 
 in the foreground sway
 Vertical mouse movement causes fish to swim back and forth
 Clicking the mouse makes the frog's throat expand
 Dragonfly moves around with cursor
 */

void setup() {
  // Set canvas size
  size(400, 400);
  // Makes cursor invisible
  noCursor();
  // Set modes to draw shapes
  rectMode(CORNERS);
  ellipseMode(RADIUS);
}

void draw() {
  // Draw dark green background
  background(89, 108, 89);

  // Draw water
  noStroke();
  fill(142, 196, 177);
  rect(0, 120, 400, 400);

  // Draw trees with mouseX-dependant horizontal movement

  // leaves
  fill(96, 142, 89);
  ellipse(10 - mouseX / 80, 20, 50, 40);
  ellipse(75 - mouseX / 80, 30, 75, 40);
  ellipse(140 - mouseX / 80, 30, 40, 20);
  ellipse(200 - mouseX / 80, 0, 80, 50);
  ellipse(280 - mouseX / 80, 10, 70, 40);
  ellipse(325 - mouseX / 80, 30, 70, 40);
  ellipse(390 - mouseX / 80, 20, 50, 30);

  // trunks
  fill(90, 81, 56);
  quad(60  - mouseX / 80, 80, 80  - mouseX / 80, 80, 100 - mouseX / 80, 120, 70  - mouseX / 80, 120);
  quad(60 - mouseX / 80, 80, 80 - mouseX / 80, 80, 85 - mouseX / 80, 40, 70 - mouseX / 80, 40);
  quad(65 - mouseX / 80, 30, 70 - mouseX / 80, 30, 80 - mouseX / 80, 40, 70 - mouseX / 80, 40);
  triangle(70 - mouseX / 80, 30, 65 - mouseX / 80, 30, 50 - mouseX / 80, 20);
  quad(85 - mouseX / 80, 30, 90 - mouseX / 80, 30, 85 - mouseX / 80, 40, 70 - mouseX / 80, 40);
  triangle(115 - mouseX / 80, 10, 90 - mouseX / 80, 30, 85 - mouseX / 80, 30);
  triangle(90 - mouseX / 80, 15, 100 - mouseX / 80, 20, 98 - mouseX / 80, 23);
  quad(190 - mouseX / 80, 90, 220 - mouseX / 80, 90, 215 - mouseX / 80, 120, 170 - mouseX / 80, 120);
  quad(195 - mouseX / 80, 60, 220 - mouseX / 80, 60, 220 - mouseX / 80, 90, 190 - mouseX / 80, 90);
  quad(185 - mouseX / 80, 10, 205 - mouseX / 80, 10, 220 - mouseX / 80, 60, 195 - mouseX / 80, 60);
  quad(175 - mouseX / 80, 0, 190 - mouseX / 80, 0, 200 - mouseX / 80, 10, 190 - mouseX / 80, 30);
  quad(205 - mouseX / 80, 0, 215 - mouseX / 80, 0, 210 - mouseX / 80, 25, 200 - mouseX / 80, 10);
  quad(320 - mouseX / 80, 120, 345 - mouseX / 80, 120, 345 - mouseX / 80, 100, 325 - mouseX / 80, 100);
  quad(345 - mouseX / 80, 100, 325 - mouseX / 80, 100, 312 - mouseX / 80, 70, 326 - mouseX / 80, 70);
  quad(312 - mouseX / 80, 70, 326 - mouseX / 80, 70, 330 - mouseX / 80, 50, 320 - mouseX / 80, 50);
  quad(330 - mouseX / 80, 40, 335 - mouseX / 80, 40, 326 - mouseX / 80, 70, 323 - mouseX / 80, 50);
  triangle(330 - mouseX / 80, 40, 335 - mouseX / 80, 40, 350 - mouseX / 80, 30);
  quad(327 - mouseX / 80, 50, 320 - mouseX / 80, 50, 315 - mouseX / 80, 40, 320 - mouseX / 80, 40);
  triangle(320 - mouseX / 80, 40, 315 - mouseX / 80, 40, 300 - mouseX / 80, 30);
  triangle(310 - mouseX / 80, 35, 320 - mouseX / 80, 20, 311 - mouseX / 80, 36);

  // Draw fish with mouseY-dependant horizontal movement
  stroke(118, 162, 159, 10);
  strokeWeight(8);
  fill(118, 162, 159, 50);
  ellipse(400 - mouseY / 2, 140, 20, 5);
  triangle(410 - mouseY / 2, 140, 425 - mouseY / 2, 135, 425 - mouseY / 2, 145);
  stroke(118, 162, 159, 50);
  fill(118, 162, 159, 100);
  ellipse(0 + mouseY / 1.5, 190, 35, 10);
  triangle(-30 + mouseY / 1.5, 190, -50 + mouseY / 1.5, 180, -50 + mouseY / 1.5, 200);
  stroke(118, 162, 159, 100);
  fill(118, 162, 159, 150);
  ellipse(400 - mouseY, 340, 80, 20);
  triangle(460 - mouseY, 340, 500 - mouseY, 320, 500 - mouseY, 360);

  // Draw lilypads with mouseX-dependant horizontal movement
  noStroke();
  fill(182, 234, 140);
  ellipse(320 - mouseX / 50, 220, 70, 25);
  fill(213, 250, 129);
  ellipse(250 - mouseX / 40, 255, 110, 40);
  fill(149, 222, 119);
  ellipse(100 - mouseX / 60, 150, 50, 15);
  fill(142, 196, 177);
  triangle(200 - mouseX / 40, 270, 170 - mouseX / 40, 300, 140 - mouseX / 40, 290);
  triangle(300 - mouseX / 40, 210, 260 - mouseX / 40, 190, 290 - mouseX / 40, 190);
  triangle(120 - mouseX / 60, 155, 160 - mouseX / 60, 155, 140 - mouseX / 60, 170);

  // Draw frog with mouseX-dependant horizontal movement

  // body
  fill(102, 183, 92);
  rect(200 - mouseX / 40, 230, 300 - mouseX / 40, 260, 10);

  // arms + head
  fill(125, 211, 92);
  rect(220 - mouseX / 40, 200, 280 - mouseX / 40, 230, 10);
  rect(220 - mouseX / 40, 230, 230 - mouseX / 40, 260, 10);
  rect(270 - mouseX / 40, 230, 280 - mouseX / 40, 260, 10);
  ellipse(230 - mouseX / 40, 200, 10, 10);
  ellipse(270 - mouseX / 40, 200, 10, 10);

  // eyes + throat
  fill(255, 77, 92);
  ellipse(250 - mouseX / 40, 240, 20, 10);
  ellipse(230 - mouseX / 40, 200, 4, 4);
  ellipse(270 - mouseX / 40, 200, 4, 4);

  // mouth
  fill(102, 183, 92);
  ellipse(230 - mouseX / 40, 220, 4, 4);
  ellipse(270 - mouseX / 40, 220, 4, 4);
  strokeWeight(2);
  stroke(102, 183, 92);
  line(230 - mouseX / 40, 220, 270 - mouseX / 40, 220);

  // Dragonfly moves with cursor 
  noStroke();
  fill(189, 219, 234, 100);
  ellipse(mouseX - 10, mouseY - 10, 18, 5);
  fill(103, 155, 193);
  ellipse(mouseX - 17, mouseY - 3, 4, 8);
  fill(81, 91, 106);
  ellipse(mouseX, mouseY, 10, 10);
  ellipse(mouseX - 10, mouseY, 7, 10);
  ellipse(mouseX + 20, mouseY - 6, 35, 4);
  fill(103, 155, 193);
  ellipse(mouseX - 8, mouseY - 3, 4, 8);
  fill(189, 219, 234, 100);
  ellipse(mouseX + 30, mouseY - 10, 25, 5);

  // Grass with mouse-dependant horizontal movement, perspective + sway 
  fill(238, 255, 165);
  quad(140 - mouseX / 20, 400, 110 - mouseX / 20, 400, 80 - mouseX / 10, 0, 100 - mouseX / 10, 0);
  quad(90 - mouseX / 20, 400, 60 - mouseX / 20, 400, 50 - mouseX / 10, 230, 70 - mouseX / 10, 210);
  quad(70 - mouseX / 10, 210, 50 - mouseX / 10, 230, 0, 110 + mouseX / 10, 0, 80 + mouseX / 10);
  quad(300 - mouseX / 20, 400, 330 - mouseX / 20, 400, 350 - mouseX / 10, 170, 330 - mouseX / 10, 150);
  quad(350 - mouseX / 10, 170, 330 - mouseX / 10, 150, 400, 30 + mouseX / 20, 400, 60 + mouseX / 20);
}

void mousePressed() {
  // Frog throat expands when mouse is pressed
  noStroke();
  fill(125, 211, 92);
  ellipse(230 - mouseX / 40, 200, 10, 10);
  ellipse(270 - mouseX / 40, 200, 10, 10);
  fill(255, 77, 92);
  ellipse(230 - mouseX / 40, 200, 4, 4);
  ellipse(270 - mouseX / 40, 200, 4, 4);
  fill(125, 211, 92);
  rect(220 - mouseX / 40, 202, 280 - mouseX / 40, 230, 10);
  // Change frame rate to keep throat expanded longer
  frameRate(2);
  fill(102, 183, 92);
  ellipse(230 - mouseX / 40, 214, 4, 4);
  ellipse(270 - mouseX / 40, 214, 4, 4);
  strokeWeight(2);
  stroke(102, 183, 92);
  line(230 - mouseX / 40, 214, 270 - mouseX / 40, 214);
  fill(255, 77, 92);
  ellipse(250 - mouseX / 40, 240, 30, 20);

  // Dragonfly and grass are drawn again over the frog so they overlap correctly
  noStroke();
  fill(189, 219, 234, 100);
  ellipse(mouseX - 10, mouseY - 10, 18, 5);
  fill(103, 155, 193);
  ellipse(mouseX - 17, mouseY - 3, 4, 8);
  fill(81, 91, 106);
  ellipse(mouseX, mouseY, 10, 10);
  ellipse(mouseX - 10, mouseY, 7, 10);
  ellipse(mouseX + 20, mouseY - 6, 35, 4);
  fill(103, 155, 193);
  ellipse(mouseX - 8, mouseY - 3, 4, 8);
  fill(189, 219, 234, 100);
  ellipse(mouseX + 30, mouseY - 10, 25, 5);

  fill(238, 255, 165);
  quad(140 - mouseX / 20, 400, 110 - mouseX / 20, 400, 80 - mouseX / 10, 0, 100 - mouseX / 10, 0);
  quad(90 - mouseX / 20, 400, 60 - mouseX / 20, 400, 50 - mouseX / 10, 230, 70 - mouseX / 10, 210);
  quad(70 - mouseX / 10, 210, 50 - mouseX / 10, 230, 0, 110 + mouseX / 10, 0, 80 + mouseX / 10);
  quad(300 - mouseX / 20, 400, 330 - mouseX / 20, 400, 350 - mouseX / 10, 170, 330 - mouseX / 10, 150);
  quad(350 - mouseX / 10, 170, 330 - mouseX / 10, 150, 400, 30 + mouseX / 20, 400, 60 + mouseX / 20);
}

void mouseReleased() {
  // Return frame rate to normal
  frameRate(60);
}