HTML5 Canvas + JS Fireworks

http://jackrugile.com/lab/fireworks-v1/

by jpadilla_ • 14 years ago

61 15 14 years ago

jackrugile.com

gfosco• 14 years ago

Very cool... but 10-12 FPS is disappointing.

jensnockert• 14 years ago

I get about that on my iPhone 4, but with Firefox on my MBP it looks great and is silky smooth.

deefour• 14 years ago

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.

ulrikrasmussen• 14 years ago

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.

ajuc2• 14 years 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.

TheRevoltingX• 14 years ago

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.

joshmlewis• 14 years ago

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.

robin_reala• 14 years ago

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 :)

acomjean• 14 years ago

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.

pcole• 14 years ago

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)

mrspeaker• 14 years ago

Reminds me a bit of "Parcycle" - the canvas particle effect thing I made a while ago: http://mrspeaker.net/dev/parcycle/

minikomi• 14 years ago

You might also enjoy this http://jsdo.it/event/html5hanabi crowd sourced fireworks show

jcromartie• 14 years ago

Interesting. But this type of fireworks are mortars, not rockets, and thus should just follow a ballistic trajectory (i.e. add gravity plz).

HTML5 Canvas + JS Fireworks

Related Stories