← Back CP 🐠 Aquarium Animator
🌊 Ocean Lab — In Canvas Circus you painted a picture that just sat there. Now make it swim, bubble, and sway! Meet requestAnimationFrame — the JavaScript trick that runs your code 60 times every second. Change the speed, grow the fish, fill the bubbles, and watch your aquarium come alive!

🎬 Animation = a Loop that Draws Over & Over

In Canvas Circus you drew shapes once. Animation is the same shapes — drawn again and again, 60 times a second! Each frame: erase the last picture, move things a tiny bit, draw again. That tiny movement adds up to swimming! The engine is requestAnimationFrame — it says "do it again!"

// the animation loop — runs ~60 times per second!
function animate() {
  ctx.clearRect(0,0,320,280);  // erase last frame
  fish.x += speed;          // move the fish a tiny bit
  drawFish();             // draw it in the new spot
  requestAnimationFrame(animate);// "do it again!"
}
animate();// 🚀 start the loop!
🎯 Missions Paint your fish blue! Make the fish swim FAST! Finish all 5 challenges!
🐠 aquarium.js — Live Animation Loop
1// 🌊 ANIMATION LOOP — runs ~60 times every second!
2function animate() {
3  ctx.clearRect(0, 0, 320, 280);  // erase last frame
4  drawWater();                 // paint the ocean
5  drawSeaweed();               // swaying plants
6  fish.x += 3 * fish.dir;  // ⬅️➡️ MOVE the fish
7  drawFish(fish.x, 145, 22, fish.dir);
8  riseBubbles();              // bubbles float up
9  requestAnimationFrame(animate);// 🔁 ask for NEXT frame
10}
11animate();  // 🚀 START the loop!
🐠 Live Aquarium — your code is running right now!
🎬 Animation running: 60 fps

🎛️ Your Aquarium Controls

🐠 The Fish
Color
Size
22
Speed
3
🫧 Bubbles
Count
6
🌊 The Water
Color

🎯 Aquarium Challenges

1
🐠 Paint the Fish: Change the fish's color to blue — same fillStyle you learned in Canvas Circus!
fillStyle
✅
2
⚡ Speed Up! Drag the Speed slider to 5 or more — that's the fish.x += speed variable!
variable
✅
3
🐋 Big Fish: Drag the Size slider to 30 or more — watch the arc radius grow every frame!
arc
✅
4
🫧 Bubble Storm: Drag Bubbles to 10 or more — a loop draws them rising every frame!
loop
✅
5
🏆 Master Animator: A blue fish, fast (5+), big (30+), AND 10+ bubbles — your dream aquarium!
combine
✅
🌟 Ocean Animator Progress0%

🐠 Welcome to Aquarium Animator!

You painted a still picture in Canvas Circus. Today you make it MOVE! Meet requestAnimationFrame — the loop that runs your code 60 times a second to create real animation.

🐠Pick a color & drag Size — your fish redraws every frame
⚡Crank the Speed — watch fish.x += speed move it
🫧Add bubbles — a loop draws them rising every frame
🏆Finish all 5 challenges to become an Ocean Animator!