4 ms·
HTML5 Canvas + JS Fireworks
- gfosco 15y agoVery cool... but 10-12 FPS is disappointing.
- jensnockert 15y agoI get about that on my iPhone 4, but with Firefox on my MBP it looks great and is silky smooth.
- deefour 15y agoI 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.
- ulrikrasmussen 15y agoI 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.
- ajuc 15y ago> 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.
- checker 15y agoTypical fireworks are mortars, so they just have a high initial velocity and decelerate en route to maximum height, edit: or until the explosion!
- ajuc 15y agoYes, 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.
- TheRevoltingX 15y agoIndeed, 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.
- joshmlewis 15y agoI'm no physics expert, but it seems like in real life the take off velocity is stronger at first and gets lower the higher it goes instead of vise versa like it is here. It gets faster the higher it goes instead of slower. Shouldn't it be the other way around? But this is pretty cool regardless.
- robin_reala 15y agoIt 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 :)
- acomjean 15y agoI 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.
- pcole 15y agoThis 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)
- mrspeaker 15y agoReminds me a bit of "Parcycle" - the canvas particle effect thing I made a while ago: http://mrspeaker.net/dev/parcycle/ http://mrspeaker.net/dev/parcycle/
- minikomi 15y agoYou might also enjoy this http://jsdo.it/event/html5hanabi http://jsdo.it/event/html5hanabi crowd sourced fireworks show
- jcromartie 15y agoInteresting. But this type of fireworks are mortars, not rockets, and thus should just follow a ballistic trajectory (i.e. add gravity plz).