🎇🔥Fire🔥🎇
🔗 Interact with the “Fire” on p5.js
VIDEO RECORDING
WORK PROCESS
Inspiration
As I was pondering what kind of natural phenomena could be simulated, I inadvertently came across a set of photos of a bonfire on social media. I observed the flames of the bonfire gently rising, swaying at times straight and at times inclined by the wind, with sparks occasionally leaping from the flames and then falling due to gravity. So I thought, isn’t this exactly a simulation that replicates natural phenomena using objects influenced by various forces like winds and gravity?
Although I decided to simulate the dynamics of flames, at first, I didn’t know how to achieve the irregular effect of fire. So I referred to “Fire by nae” and used triangles to represent it. By applying rotation to enhance the dynamics and instability of the flames, after numerous attempts and adjustments to the values, I finally settled on the state of the flames.
Simulate the Natural Fire
To make the flame effect more realistic, I then added the BlendMode(ADD) function. As a result, the bottom of the flames became brighter which is more resemble to the actual appearance of a flame’s core in real life.
Add the Force (Gravity + Wind)
In this week’s class, we learned about the very useful function addForce. By using createVector(), different vectors can be applied as different velocities and accelerations, to the objects, allowing us to simulate various real-life effects. In my project, I applied forces separately to the fire and the sparks. Therefore, the spark will fall with gravity after bursting. And a force to the right is added to the fire in the presence of wind, which simulates the effect of wind blowing.
REFLECTION
Interactive Element: Wind Blowing
To add more fun and dynamic motion to the flames rather than them consistently moving in one direction, I added interactivity. When the mouse is pressed, a wind blows from the right, causing the flames to shift to the right. When the mouse is not pressed and the wind stops, the flames return to the center.