Multi-shaped Glowing Fireworks
Check out the realistic fireworks with various shapes and glowing effects. Interactive DEMO please click HERE. Code is hosted on Github.
Journey Behind
The past Chinese New Year gave me the inspiration to create a realistic firework. After watching Dan's firework tutorial, I felt like that I could make it more realistic and more vivid. Then I compared Dan's programmed fireworks with realistic firework videos like this one, I found the following things that could be improved.
- Most fireworks usually dimmed before falling down. -> The lifespans are usually shorter.
- And its horizontal speed dropped quickly after explosion, meaning that they are against air frictions. -> Add realistic air forces.
- Fireworks have multiply shapes including springs, ovals, circles, etc. -> Add more shapes.
- Fireworks has glowing effect around particles. -> Add glowing effect.
-
1. Add Air Frictions
The air friction formula demonstrated that the force was positively related to the square of the speed. In other words. F = k * V^2;
Thus, I add an air force in each particle's acceleration. I normalized the velocity to get its 2D direction and multiplied its squared magnitude.
2. Add shapes
I added lots of shapes, including oval, double ring, heart shapes and four-leave roses.
For most of the shapes, it was much easier to use polar coordinates instead of Cartesian coordinates.
Ellipse
For example, for each point (x', y') on the ellipse with its center (x0, y0) and major axis = A, minor axis = B, the (x', y') follows this equation (0 < alpha < 2*PI):
If the ellipse rotates β degree, the points on the ellipse obey the following equation:
So the code of rotating ellipse looks like this:
Heart Shape
For heart shapes, follow Dan's this tutorial to get to know the equation or check this blog.
Four-Leave Rose
The equation of clover-leave is as below (you can change the parameter before θ to make more than 4 leaves):
So the code is like,
3. Add Glowing Effect
I then investigated if p5.js can make glowing effect. Unfortunately, current solutions to make glowing effect is to lay a blurred transparent frame onto the canvas. I tried to store all drawings in the buffer by using CreateGraphics, then use image() to display, and add a BLUR filter onto the image. It worked, however, with extremely slow speed. Slower than a turtle's movement.
I dug almost all glowing tutorials and examples online and found that most of them use two layers to render. One was applied a blurring filter and the other on top of that was not. This example perfectly demonstrated that.
Therefore, I abandoned p5.js and turned to pure javascript. The structure was similar with the p5.js one. Yet when the world updates all the statues of particles, it painted on the buffer of the main canvas. Then, this frame of the canvas buffer was duplicated to the background canvas layer, which was lied below the main canvas. The background canvas was blurred to add a glowing effect.
For full code, please check out canvas.js, index.html, sketch.js.
