Mini Aquarium Mini Aquarium is an interactive and visually appealing aquarium simulation built using HTML5 Canvas and JavaScript, enhanced with Tailwind CSS for styling. This project creates a captivating underwater scene where animated emoji fish swim smoothly, bubbles rise naturally from an oxygen tank, and seaweed sways with lifelike movement. The aquarium features dynamic fish behavior, including hunger and food-seeking actions, making the environment feel alive and engaging.

Key Features

Animated Fish: Multiple fish swim independently with smooth, natural movements and direction changes. Hungry fish actively chase dropped food particles.

Rising Bubbles: Bubbles continuously emerge from a realistic oxygen tank hose, floating upwards and fading out.

Swaying Seaweed: Seaweed animations mimic underwater currents using sinusoidal motion for a dynamic environment.

Interactive Food System: Users can drop food into the tank and refill the food bottle. Fish respond by moving toward and eating the food.

Responsive Design: The aquarium canvas and UI elements dynamically resize to fit different screen sizes while maintaining aspect ratio and visual quality.

Stylish UI Elements: A food bottle displays the remaining food visually, and messages notify the user when the bottle is empty or food limits are reached.

Technologies Used

JavaScript (ES6): Core logic, animations, and interactions.

HTML5 Canvas: Rendering all aquarium visuals and animations.

Tailwind CSS: Modern utility-first styling and layout.

CSS Custom Styles: For advanced visuals such as shadows, glows, and UI details.

Why This Project?

This project is a great way to explore canvas-based animation, object-oriented programming in JavaScript, and responsive UI design. It combines interactive elements with smooth graphics to create a fun and engaging experience that can be extended with more features or adapted to other interactive visual projects.