Spherical forums

Sphere Development => Resources => Topic started by: N E O on April 11, 2013, 07:09:13 pm

Title: JS canvas particle demo
Post by: N E O on April 11, 2013, 07:09:13 pm
Someone port this particle demo to Sphere please ^_^

http://cdpn.io/rFIDL (http://cdpn.io/rFIDL)

Eventually I'll put a CodePen embedder like I did with Gists.
Title: Re: JS canvas particle demo
Post by: Metallix on April 12, 2013, 08:20:23 am
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 :)
Title: Re: JS canvas particle demo
Post by: N E O on June 24, 2014, 04:46:41 pm
Another JS Canvas particle demo (http://hop.ie/blog/particles/), this time starting from scratch with basic theory then using dat.gui for convenience (http://hop.ie/particles/examples/07-settings.html).
Title: Re: JS canvas particle demo
Post by: Flying Jester on November 14, 2014, 08:53:15 pm

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 (https://gist.github.com/FlyingJester/f695b2c825c14981d508)


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

Rotation and pausing:
https://drive.google.com/file/d/0B-hkR9nzCDDKbzd3Nlp6VGxfTDQ/view (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.