Interactive Shark Chase
Side ProjectMove your mouse over the canvas to steer the shark fin — waves, fish, and crabs dodge out of the way.
This project is an interactive, typographic digital sea ecosystem built in p5.js that transforms raw keyboard characters into a responsive, interactive ocean. As the user moves around the 'shark fin' across the canvas, collision logic creates a dynamic "spring" effect, forcing characters to dodge the shark fin, which is the cursor. To deepen the immersion effect, the background color reacts to the user's vertical mouse movement to mimic the transition from light blue surface color to dark deep ocean color at the bottom.
Features
- •A school of fish (100) moves across the width of the canvas from left to right.
- •Waves (40) that move left and right.
- •Crabs (3) that stay in the bottom section and move across the width of the canvas from right to left.
- •Shark fin = mouse movement.
- •Background color changes as you move the mouse from top to bottom — light blue surface color at the top, dark deep-ocean color at the bottom.