Holi fluid animation using HTML CSS Javascript - Holi Project using HTML CSS JS

Introduction:

This project is all about bringing a mesmerizing fluid simulation right to your screen, using the power of web technology. Imagine colorful, swirling patterns that mimic the movement of real fluids, all happening in your web browser!

Here’s how it works: We use HTML for the structure, CSS for the styling, and JavaScript for the magic behind the scenes. It’s like building a digital canvas where these dynamic fluid dynamics unfold.

Inspired by the vibrant colors of the Holi festival, this project lets you play with digital fluidity. You can interact with the simulation using your mouse or touchscreen, injecting new colors and energies into the mix.

Under the hood, the code is doing some clever stuff with shaders and algorithms to make it all happen. It’s like conducting a symphony of virtual particles, making them dance and swirl in response to your inputs.

Whether you’re looking for a moment of relaxation or just want to marvel at the beauty of computational art, this project offers a captivating experience. So go ahead, dive in, and enjoy the digital celebration of fluidity and color!

Explanation:

1. HTML Structure: The HTML part contains a canvas element where the simulation will be rendered. Additionally, there’s a div element displaying the text “Happy Holi” and a paragraph element providing instructions.

2. CSS Styling: The CSS part provides styling for the HTML elements. It sets the background image of the body, styles the text, and positions the elements.

3. JavaScript (WebGL Code): This is where the main functionality lies. Let’s break it down:

   • Initializing WebGL Context: It initializes the WebGL context and sets up various parameters needed for rendering.

   • Compiling Shaders: WebGL requires shaders to render graphics. Shaders are small programs executed on the GPU. This code compiles various shaders for different purposes like advection, divergence, curl, etc.

   • Framebuffers: Framebuffers are used to store the result of rendering. Here, several framebuffers are created for different purposes like storing velocity, density, pressure, etc.

   • Main Simulation Loop (Update Function): This is where the fluid simulation happens. It updates the state of the simulation in each frame.

   • Pointer Interactions: The code handles mouse and touch interactions to allow users to interact with the fluid simulation. When the user interacts with the canvas (mouse move, touch move, etc.), it triggers the splat function, which adds density and velocity to the simulation at the given position.

   • Rendering: After updating the simulation state, it renders the result on the canvas using the display program.

   • Event Listeners: Event listeners are added to handle mouse and touch events for interaction with the simulation.

4. External Resources: The code also includes references to external resources like images and fonts.

Overall, this code creates a visually appealing fluid simulation using WebGL, allowing users to interact with it using mouse or touch inputs.

How to Run the Code:

1. Create a New HTML File:

   • Open your text editor and create a new file.
   • Copy and paste the provided code into the new file.

2. Save the File:

   • Save the file with an appropriate name, such as “fluid_simulation.html”.

3. Ensure Internet Connectivity:

   • Since the code references an external image for the background, ensure your device has internet connectivity.

4. Open the HTML File in a Web Browser:

   • Locate the HTML file you saved in step 3.
   • Double-click on the HTML file to open it in your default web browser.

5. Interact with the Simulation:

   • Once the web page loads, you should see the fluid simulation in action.
   • Move your mouse cursor over the canvas area to interact with the fluid simulation.
   • You can also click or tap on the canvas to inject colors into the fluid.

6. Explore and Enjoy:

   • Spend some time exploring the fluid simulation and experimenting with different interactions.
   • Observe how the fluid reacts to your inputs and enjoy the visual spectacle created by the simulation.

By following these steps, you should be able to run the provided code and experience the fluid simulation directly within your web browser.