Recreation of the classic Doom fire effect using pure JavaScript and HTML, inspired by this video.
You can see it running here.
The Doom fire effect is a visually captivating animation, famously used in the video game Doom. This project replicates that effect using only HTML and JavaScript. It demonstrates how simple web technologies can recreate dynamic visual effects with a nostalgic, retro aesthetic.
-
JavaScript: The core logic of the fire effect is implemented using vanilla JavaScript. The script manipulates the HTML table by updating the pixel values in real-time, creating the fire animation.
-
HTML: The fire effect is displayed using an HTML table, where each cell corresponds to a pixel of the fire. JavaScript dynamically changes the background color of each cell to simulate the fire effect.
- Customizable fire speed, size, and color palette: The user can adjust these parameters in real-time via the UI.
- Dynamic interpolation of colors: The system calculates intermediate colors to create a smooth gradient effect.
- Wind direction control: The fire can be affected by wind, either blowing left or right.
- Clone or download the repository to your local machine.
- Navigate to the project directory.
- Open the
Fire.htmlfile in your web browser to see the fire effect in action.
This project is licensed under the MIT License. See the LICENSE.md file for details.
- Inspired by Filipe Deschamps' video on recreating the Doom fire effect in JavaScript.