Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* "AQUARIUM" by Bernice Wong
Moving the mouse vertically 
- changes the width and position of the rectangles in the background
- changes the colour of the fish and background
Moving the mouse horizontally:
- changes the position of the fish and bubbles
MISC
- a fish will follow the cursor's movement*/

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

void draw() {
/// BACKGROUND ///
  background(146, -mouseY/50 + 215, mouseY/50 + 229); 

  //UNMOVABLE LAYERS 
  noStroke(); // 5th layer
  fill(84, -mouseY/50 + 126, mouseY/50 + 137);
  rectMode(CORNER);
  rect(0, 350, 400, 50);

  noStroke(); // 4th layer
  fill(90, -mouseY/50 + 136, mouseY/50 + 147);
  rectMode(CORNER);
  rect(0, 300, 400, 50);

  noStroke(); //3rd layer
  fill(100, -mouseY/50+ 150, mouseY/50 + 162);
  rectMode(CORNER);
  rect(0, 250, 400, 50);

  noStroke(); // 2nd layer
  fill(110, -mouseY/50 + 163, mouseY/50 + 175);
  rectMode(CORNER);
  rect(0, 200, 400, 50);

  noStroke(); //1st layer
  fill(126, -mouseY/50 + 188, mouseY/50 + 201);
  rectMode(CORNER);
  rect(0, 150, 400, 50);

  // (bkg) MOVABLE LAYERS
  noStroke(); // 6th layer
  fill(84, -mouseY/50 + 126, mouseY/50 + 137);
  rectMode(CORNER);
  rect(0, mouseY/5 + 350, 400, 50);

  noStroke(); // 5th layer
  fill(90, -mouseY/50 + 136, mouseY/50 + 147);
  rectMode(CORNER);
  rect(0, mouseY/6 + 300, 400, 50);

  noStroke(); //4th layer
  fill(100, -mouseY/50+ 150, mouseY/50 + 162);
  rectMode(CORNER);
  rect(0, mouseY/7 + 250, 400, 50);

  noStroke(); // 3rd layer
  fill(110, -mouseY/50 + 163, mouseY/50 + 175);
  rectMode(CORNER);
  rect(0, mouseY/8 + 200, 400, 50);

  noStroke(); //2nd layer
  fill(126, -mouseY/50 + 188, mouseY/50 + 201);
  rectMode(CORNER);
  rect(0, mouseY/9 + 150, 400, 50);

  noStroke(); //1st layer
  fill(138, -mouseY/50 + 203, mouseY/50 + 216);
  rectMode(CORNER);
  rect(0, mouseY/10 + 100, 400, 50);

  // GROUND (hindground)
  noStroke();
  fill(72, -mouseY/50 + 100, mouseY/50 + 100);
  ellipseMode(CORNER);
  ellipse(100, 325, 600, 200);
  // GROUND(foreground)
  noStroke();
  fill(57, -mouseY/50 + 82, mouseY/50 + 82, 95);
  ellipseMode(CORNER);
  ellipse(- 300, 295, 600, 300);

  //diamond bubbles
  noStroke();
  //diamond 1
  fill(255, 255, 255, 90);
  triangle(100 - mouseX/8, 100, 120 - mouseX/8, 100, 110 - mouseX/8, 90);
  triangle(100 - mouseX/8, 100, 120 - mouseX/8, 100, 110 - mouseX/8, 110);

  //diamond 2
  fill(255, 255, 255, 70);
  triangle(225 - mouseX/10, 200, 245 - mouseX/10, 200, 235 - mouseX/10, 190);
  triangle(225 - mouseX/10, 200, 245 - mouseX/10, 200, 235 - mouseX/10, 210);

  //diamond 3
  fill(255, 255, 255, 95);
  triangle(275 - mouseX/8, 125, 295 - mouseX/8, 125, 285 - mouseX/8, 115);
  triangle(275 - mouseX/8, 125, 295 - mouseX/8, 125, 285 - mouseX/8, 135);

  //diamond 4
  fill(255, 255, 255, 80);
  triangle(325 - mouseX/10, 150, 345 - mouseX/10, 150, 335 - mouseX/10, 140);
  triangle(325 - mouseX/10, 150, 345 - mouseX/10, 150, 335 - mouseX/10, 160);

  //diamond 5
  fill(255, 255, 255, 99);
  triangle(380 - mouseX/9, 50, 400 - mouseX/9, 50, 390 - mouseX/9, 40);
  triangle(380 - mouseX/9, 50, 400 - mouseX/9, 50, 390 - mouseX/9, 60);

  //diamond 6
  fill(255, 255, 255, 60);
  triangle(350 - mouseX/5, 80, 370 - mouseX/5, 80, 360 - mouseX/5, 70);
  triangle(350 - mouseX/5, 80, 370 - mouseX/5, 80, 360 - mouseX/5, 90);

  //diamond 7
  fill(255, 255, 255, 50);
  triangle(50 - mouseX/5, 270, 70 - mouseX/5, 270, 60 - mouseX/5, 260);
  triangle(50 - mouseX/5, 270, 70 - mouseX/5, 270, 60 - mouseX/5, 280);
  
  //diamond 8
  stroke(255, 255, 255, 90);
  line(100 - mouseX/13, 200, 90 - mouseX/13, 210);
  line(100 - mouseX/13, 200, 110 - mouseX/13, 210);
  line(90 - mouseX/13, 210, 100 - mouseX/13, 220);
  line(100 - mouseX/13, 220, 110 - mouseX/13, 210);
  
  //diamond 9
  stroke(255 - mouseX/11, 255, 255, 90);
  line(55 - mouseX/11, 135, 45 - mouseX/11, 145);
  line(45 - mouseX/11, 145, 55 - mouseX/11, 155);
  line(55 - mouseX/11, 155, 65 - mouseX/11, 145);
  line(65 - mouseX/11, 145, 55 - mouseX/11, 135);
  
  //diamond 10
  stroke(255 - mouseX/12, 255, 255, 90);
  line(250 - mouseX/12, 30, 240 - mouseX/12, 40);
  line(240 - mouseX/12, 40, 250 - mouseX/12, 50);
  line(250 - mouseX/12, 50, 260 - mouseX/12, 40);
  line(260 - mouseX/12, 40, 250 - mouseX/12, 30);
  
  //diamond 11
  stroke(255 - mouseX/14, 255, 255 - mouseX/14, 90);
  line(380 - mouseX/14, 280, 370 - mouseX/14, 290);
  line(370 - mouseX/14, 290, 380 - mouseX/14, 300);
  line(380 - mouseX/14, 300, 390 - mouseX/14, 290);
  line(390 - mouseX/14, 290, 380 - mouseX/14, 280);

/// FISH ///
  // SMALLER FISH
  // FISH  1
  noStroke(); // body
  fill(84, 126, 137, mouseY/5 + 25);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 100, 40, 30, 10);
  noStroke();  //tail
  fill(84, 126, 137, mouseY/5 + 85);  
  triangle(mouseX/5 + 130, 45, mouseX/5 + 140, 57, mouseX/5 + 140, 30);

  // FISH 2
  noStroke(); // body
  fill(84, 126, 137, mouseY/5 + 25);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 130, 120, 30, 10);
  noStroke();  // tail
  fill(84, 126, 137, mouseY/5 + 85);  
  triangle(mouseX/5 + 160, 125, mouseX/5 + 170, 137, mouseX/5 + 170, 110);

  // FISH 3
  noStroke(); // body
  fill(mouseY/0.8 + 84, 126, 137, mouseY/5 + 25);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 280, 90, 30, 10);
  noStroke();  // tail
  fill(mouseY/0.8 + 84, 126, 137, mouseY/5 + 85);  
  triangle(mouseX/5 + 310, 95, mouseX/5 + 320, 107, mouseX/5 + 320, 80); 

  // FISH 4
  noStroke(); // body
  fill(mouseY + 84, 126, 137, mouseY/5 + 25);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 40, 240, 30, 10);
  noStroke();  // tail
  fill(mouseY + 84, 126, 137, mouseY/5 + 85);  
  triangle(mouseX/5 + 70, 245, mouseX/5 + 80, 257, mouseX/5 + 80, 230); 

  // FISH 5
  noStroke(); // body
  fill(mouseY/1.2 + 84, 126, 137, mouseY/5 + 25);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 260, 310, 30, 10);
  noStroke();  // tail
  fill(mouseY/1.2 + 84, 126, 137, mouseY/5 + 85);  
  triangle(mouseX/5 + 290, 315, mouseX/5 + 300, 327, mouseX/5 + 300, 300); 

  // FISH 6
  noStroke(); // body
  fill(84, 126, 137, 100);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 150, 70, 30, 10);
  noStroke();  // tail
  fill(84, 126, 137, 100);  
  triangle(mouseX/5 + 180, 75, mouseX/5 + 190, 87, mouseX/5 + 190, 60);

  // FISH 7
  noStroke(); // body
  fill(mouseY/1.4 + 84, 126, 137, mouseY/5 + 25);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 350, 350, 30, 10);
  noStroke();  // tail
  fill(mouseY/1.4 + 84, 126, 137, mouseY/5 + 85);  
  triangle(mouseX/5 + 380, 355, mouseX/5 + 390, 367, mouseX/5 + 390, 340);

  // FISH 8
  noStroke(); // body
  fill(mouseY/1.6 + 84, 126, 137, 75);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 - 20, 270, 30, 10);
  noStroke();  // tail
  fill(mouseY/1.6 + 84, 126, 137, 85);  
  triangle(mouseX/5 + 10, 275, mouseX/5 + 20, 287, mouseX/5 + 20, 260); 

  // FISH 9
  noStroke(); // body
  fill(mouseY/1.8 + 84, 126, 137, 75);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 80, 310, 30, 10);
  noStroke();  // tail
  fill(mouseY/1.8 + 84, 126, 137, 85);  
  triangle(mouseX/5 + 110, 315, mouseX/5 + 120, 327, mouseX/5 + 120, 300); 

  // FISH 10
  noStroke(); // body
  fill(mouseY/2 + 84, 126, 137, 75);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 210, 330, 30, 10);
  noStroke();  // tail
  fill(mouseY/2 + 84, 126, 137, 85);  
  triangle(mouseX/5 + 240, 335, mouseX/5 + 250, 347, mouseX/5 + 250, 320); 

  // LARGER FISH
  // FISH THAT FOLLOWS MOUSE
  noStroke(); // body
  fill(245, 156, 174, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX, mouseY, 40, 20);
  noStroke();  // tail
  fill(245, 156, 174);  
  triangle(mouseX + 40, mouseY + 10, mouseX + 50, mouseY + 30, mouseX + 50, mouseY - 10);
 
  // FISH 1
  noStroke(); // body
  fill(245, 156, 174, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX/3 + 200, 200, 40, 20);
  noStroke();  // tail
  fill(245, 156, 174);  
  triangle(mouseX/3 + 240, 210, mouseX/3 + 255, 230, mouseX/3 + 255, 190);

  // FISH 2
  noStroke(); // body
  fill(mouseY + 250, 156, 164, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX/4 + 160, 175, 40, 20); 
  noStroke();  // tail
  fill(245, 156 - 10, 174);  
  triangle(mouseX/4 + 200, 185, mouseX/4 + 215, 205, mouseX/4 + 215, 165);

  // FISH 3
  noStroke(); // body
  fill(mouseY + 245, 156, 174, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX/3 + 275, 255, 40, 20);
  noStroke();  // tail
  fill(245, 156, 174);  
  triangle(mouseX/3 + 315, 265, mouseX/3 + 330, 285, mouseX/3 + 330, 245);

  // FISH 4
  noStroke(); // body
  fill(mouseY + 235, 156, 164, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX/4 + 300, 122, 40, 20);
  noStroke();  // tail
  fill(245, 156, 174);  
  triangle(mouseX/4 + 340, 132, mouseX/4 + 355, 152, mouseX/4 + 355, 112);

  // FISH 5
  noStroke(); // body
  fill(mouseY + 240, 156, 174, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX/5 + 50, 50, 40, 20);
  noStroke();  // tail
  fill(245, 156, 174);  
  triangle(mouseX/5 + 90, 60, mouseX/5 + 105, 80, mouseX/5 + 105, 40);

  // FISH 6
  // body
  noStroke(); 
  fill(mouseY + 255, 156, 164, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX/3 + 85, 290, 40, 20);
  noStroke();  // tail
  fill(mouseY + random(235, 255), 156, 164);  
  triangle(mouseX/3 + 125, 300, mouseX/3 + 140, 320, mouseX/3 + 140, 280);

  /* // FISH 7
  noStroke(); // body
  fill(mouseY + 225, 156, 174, 98);  
  ellipseMode (CORNER);  
  ellipse(mouseX/3, 100, 40, 20);
  noStroke(); // tail
  fill(245, 156, 174); 
  triangle(mouseX/3 + 40, 110, mouseX/3 + 55, 130, mouseX/3 + 55, 90);  */

}