HTML5 Canvas + JS Fireworks(jackrugile.com)
jackrugile.com
HTML5 Canvas + JS Fireworks
http://jackrugile.com/lab/fireworks-v1/
6 comments
It would in ballistics, but a firework is a rocket. It accelerates as it gets higher because the rocket is constantly providing more thrust. I am also not a physics expert so by all means correct me :)
I think most "big time" fireworks you see are more like a "Mortar" not a rocket. It gets its initial thrust through and explosion and is sent up a tube.
I'm not an expert either.
I'm not an expert either.
This is great. Best canvas fireworks I've seen so far! I was thinking of building something like it for a while... The last particle engine type thing I built was with the old DirectX 7 back in day (well maybe 10 years ago). Just out of interest, how much time did it take you to build this demo? (assuming the author is around)
You might also enjoy this http://jsdo.it/event/html5hanabi crowd sourced fireworks show
Interesting. But this type of fireworks are mortars, not rockets, and thus should just follow a ballistic trajectory (i.e. add gravity plz).
Reminds me a bit of "Parcycle" - the canvas particle effect thing I made a while ago: http://mrspeaker.net/dev/parcycle/
Very cool... but 10-12 FPS is disappointing.
I think that's got more to do with your computer and/or browser-of-choice than anything. I have to shoot 10+ fireworks at once, with `partCount` at 500+ in order to get below 20fps.
I wish I could make the launch of the firework a bit more realistic; it shouldn't accelerate against gravity. Maybe I just need to play with the settings a bit more, though I can't set an acceleration value less than 1.
I wish I could make the launch of the firework a bit more realistic; it shouldn't accelerate against gravity. Maybe I just need to play with the settings a bit more, though I can't set an acceleration value less than 1.
> It shouldn't accelerate against gravity.
Why not? It has to go up somehow, and without acceleration greater than g, it would be hard?
EDIT: you probably meant it should disable engine (use up fuel) in the middle of the flight and slow down from there up.
Why not? It has to go up somehow, and without acceleration greater than g, it would be hard?
EDIT: you probably meant it should disable engine (use up fuel) in the middle of the flight and slow down from there up.
Typical fireworks are mortars, so they just have a high initial velocity and decelerate en route to maximum height, edit: or until the explosion!
Yes, it makes sense to wait with explosion for the highest point. Somehow I imagined fireworks are like rockets and should accelerate all the way to the explosion.
I think including air drag in the model would make it look more realistic. Normally subtracting a term that is quadratic in the velocity from the magnitude of the force vector does the trick.
Indeed, it looks like they're even using requestAnimationFrame.
It's still really slow on Firefox, which I've found to be one of the worst offenders when making canvas games.
The problem here might be fixed by splitting the physics loop from the animation loop.
I think it's doing all the calculations as fast as it draws.
I get about that on my iPhone 4, but with Firefox on my MBP it looks great and is silky smooth.
But this is pretty cool regardless.