Vector graphic animation with JavaScript
So my starfield* has evolved a little. I improved the math that I was using to plot the stars and I added the following improvements:
- Shape support! Any shape you want can be passed via an array of JSON vector coordinate objects
- Independent X and Y sine wave applied to star motion
- Depth shading for added realism
- Ability to hide shameless plug message :-)
- Ability to stop/start the animation
- Plus a bunch of other params I haven’t exposed yet through the UI
Am I taking myself too seriously? Yeah, maybe a little, but I find this kind of thing fun and who knows, it could eventually prove useful. But don’t let me get ahead of myself. For now, playing with stars is fun.
Oh, and don’t knock the buttons code in the page, I just threw those in there real quick to be able to give control over the starfield object. I didn’t feel like going nuts with the code’s cleanliness (that’s in the actual canvas.js file ;)
*This demo requires Safari or Firefox 1.5+ to work.
Sphere: Related ContentBuy my book
The Art & Science of JavaScript
Advertisement
Advertisement
5 Comments
Sorry, the comment form is closed at this time.
February 19th, 2007 at 2:54 am
It really works as a cool demonstration of the Canvas capabilities. :)
You could use the Canvas to build really rich user interfaces with much more complexity that the standard stuff that can be done with dhtml these days.
February 19th, 2007 at 7:54 am
Luke: Tell me about it. I’ve got all kinds of ideas flying through my head right now (kind of like that starfield). :-)
February 19th, 2007 at 10:49 am
It’s great… but I found it too heavy for the CPU.
Carl.
February 22nd, 2007 at 8:51 am
Really nice demonstration, not really that useful though ;)
/Peter
September 11th, 2007 at 4:55 am
Really nice demonstration on FireFox 2.0.
You could use the Canvas to make a title or LOGO on a website, as StarCraft.