Skip to main content ↑ ↓
Topic: JS canvas particle demo (Read 73599 times) previous topic - next topic
0 Members and 3 Guests are viewing this topic.

JS canvas particle demo

Someone port this particle demo to Sphere please ^_^

http://cdpn.io/rFIDL

Eventually I'll put a CodePen embedder like I did with Gists.

Re: JS canvas particle demo

Reply #1 –
Haha, nice stuff!

I will make for sure a particle system for TurboSphere once I have the transformBlitMask function there. And it will be a library script easy to use in any project.

Btw: I am currently working on a tween library that works a little bit like TweenLite. It is maybe not as powerful, but makes animations with easing much easier to implement in sphere-js :)

Re: JS canvas particle demo

Reply #3 –
Quote from: N E O – on

Someone port this particle demo to Sphere please ^_^


Very fortunately, that particle demo is quite well written, and abstracts its logic well.

The quick-n-dirty port:
https://gist.github.com/FlyingJester/f695b2c825c14981d508
[gist]f695b2c825c14981d508[/gist]

A little video of the demo in TurboSphere:
https://drive.google.com/file/d/0B-hkR9nzCDDKR0ZybENCNW93cTg/view

Rotation and pausing:
https://drive.google.com/file/d/0B-hkR9nzCDDKbzd3Nlp6VGxfTDQ/view

This is a very taxing demo for the new graphics API, since we basically need a whole new Group for every particle. Plus, until I get masking working, every particle has its own texture!
It makes it clear that I should add a way to change a shape's relative coordinates while in a group. That, along with masking, would make this much more efficient.