HTML5 Canvas + JS Fireworks | Hacker News Reader

HTML5 Canvas + JS Fireworks

jackrugile.com

61 pointsjpadilla_15 comments

I'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.

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.

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 get about that on my iPhone 4, but with Firefox on my MBP it looks great and is silky smooth.

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 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.

> 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.

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.

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.

Reply on news.ycombinator.com