mdabir1203 / SchoolOfFish

Screensaver for HTML StatusCodes

SchoolOfFish

A mesmerizing and interactive 3D-like School of Fish visualization built with HTML5 Canvas and JavaScript. This project showcases the collective behavior of fish, simulating realistic movement and interaction with the mouse.

Project Overview

This project aims to create an engaging visual experience of a school of fish swimming in an ocean-like environment. The fish react to mouse movements, switching between attraction and repulsion modes, enhancing the interactive aspect of the visualization.

How GPT-4 and Claude.AI Contributed

The development of this project was significantly enhanced by leveraging the capabilities of GPT-4 and Claude.AI. Over seven iterations, these AI models provided valuable insights, code suggestions, and improvements, ensuring a smooth development process. Here’s a breakdown of each iteration and how the AI models contributed:

Iteration 1: Initial Concept and Setup

• GPT-4 helped define the initial project structure and set up the HTML5 canvas.
• Claude.AI provided suggestions on the basic layout and styling to create a visually appealing background.

1.mp4

Iteration 2: Basic Fish Movement

• GPT-4 assisted in implementing the core logic for fish movement, including random initialization and basic update functions.
• Claude.AI contributed by optimizing the movement algorithm for smoother transitions.

2.mp4

Iteration 3: 3D-like Large Fish Effects

• GPT-4 suggested techniques to simulate a 3D effect using size and z-index variations.
• Claude.AI refined these suggestions, ensuring the fish appeared more dynamic and lifelike.

3.mp4

Iteration 4: Mouse Interaction

• GPT-4 provided the initial code for mouse interaction, allowing fish to be attracted or repelled by the mouse pointer.
• Claude.AI enhanced this functionality by fine-tuning the interaction radius and responsiveness.

4.mp4

Iteration 5: Visual Enhancements + Interaction

• GPT-4 recommended adding water and ripple effects to enhance the visual experience.
• Claude.AI helped implement these effects, ensuring they blended seamlessly with the fish movement.

5.mp4

Iteration 6: Final Touches and Bug Fixes

• GPT-4 assisted in the final review, identifying and fixing any remaining bugs.
• Claude.AI contributed to polishing the code, ensuring readability and maintainability.

Getting Started

To run the visualization locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-username/SchoolOfFish.git

2. Navigate to the project directory:

   cd SchoolOfFish

3. Open index.html in your web browser to view the visualization.

Acknowledgements

• GPT-4 and Claude.AI for their invaluable assistance in developing this project.
• The open-source community for providing resources and inspiration.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Feel free to contribute, suggest improvements, or raise issues. Enjoy the School of Fish Visualization!

---

Note

This README file is crafted to highlight the iterative process and the collaborative effort between human creativity and AI assistance in building a complex, interactive visualization project.