creative
Interactive Aquarium Engine
A canvas-based aquarium with entity behaviors, built into this portfolio
Solo Developer
2025
Solo Project
Impact
60
FPS
Smooth rendering
6 Types
Entities
Fish, Shark, Bubble, Seaweed, Lighting, Sand
4
Behaviors
Bold, Shy, Lazy, Energetic
Overview
A custom-built aquarium simulation featuring an entity-component architecture, realistic fish behaviors, and predator-prey dynamics. Fish have distinct personalities (bold, shy, lazy, energetic) that affect their movement patterns and reactions to sharks. The aquarium serves as a visual progress tracker — more fish spawn as my projects advance. Built with vanilla Canvas API and TypeScript, running at 60fps.
Tech Stack
TypeScriptCanvas APIReactGame LoopEntity-Component PatternFramer Motion
Challenges
- 1Creating realistic fish movement without a physics engine
- 2Implementing predator-prey dynamics with flee behaviors
- 3Managing multiple entity types with different update cycles
- 4Integrating canvas rendering within a React application
Solutions
- ✓Built custom steering behaviors with target-seeking and wandering
- ✓Implemented detection radius system where fish personalities affect flee response
- ✓Created an entity-based architecture with shared interfaces and depth sorting
- ✓Wrapped the game loop in a React component with proper cleanup on unmount
Key Learnings
01
Game loop architecture (requestAnimationFrame, delta time)
02
Canvas 2D rendering techniques (gradients, paths, layering)
03
Entity-component patterns for scalable game systems
04
Balancing visual appeal with performance optimization