TNT Tool Time — Entry #4 — p5.js Interactive

Ethan’s Baby Shark

Baby Shark, doo doo doo!
Color-pulsing ocean, animated mouth, rising bubbles, and a lyric that floats up top. Built with sin(), map(), and push()/pop(). Copy it. Doo doo doo it better.

🦈 Tool Time Entry #4 — Original Sketch

doo doo doo — From the Deep

Ethan built a front-facing Baby Shark in p5.js — the whole sketch is 137 lines of honest, enthusiastic, first-draft code. The ocean background pulses between dark and light blue on every frame using a sine wave. Fifteen bubbles drift upward at random speeds, resetting off-screen (Ethan credits Grayson’s presentation for that pattern — good attribution!). The shark’s mouth opens and closes on its own cycle, also driven by sin(). The lyric floats at the top with a drop shadow drawn by rendering the text twice.

Ethan used AI to learn the bubble array technique and the mouth animation — and documented this honestly in the comments. That kind of transparent annotation is exactly the practice Tool Time is built to celebrate. The code works, it looks great, and it has plenty of room to grow.

We are not analyzing this code deeply here. We are showcasing it. Copy it, paste it into editor.p5js.org, watch it run. Then ask: what would you add?

Live Animation

Watch the mouth open and close —
sin(frameCount * 0.1) drives it.
Bubbles reset below screen via off-screen reset.

By Ethan (EU) • p5.js Sketch • 137 lines • CS Innovations Studio Canvas 500→400 • textSize 41→28 (magic number) — all other code is Ethan’s exactly as written

Your Turn — Make It Swim Further

Hit Copy above, paste into editor.p5js.org, and watch Baby Shark immediately. Then start improving. Everything in this sketch is already working — your job is to make it work more.

🎵 Audio-reactive mouth 🐟 Add more sea creatures 🐵 Mama Shark variant 🔧 OOP refactor 🖱️ Click to change song ✨ Particle effects 🐍 Java port 📱 Responsive canvas

🔧 Use C.R.A.F.T. deliberately. Before prompting: Context (what this sketch does, what you want to add), Role (“act as a creative p5.js developer who knows animation”), Action (add, animate, port, refactor), Form (full code? just the changed function? with comments?), Tight constraints (“preserve the animated mouth and rising bubbles”).
See the full C.R.A.F.T. breakdown ↓