Skip to main content

News

Topic: JS canvas particle demo (Read 2042 times) previous topic - next topic

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
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 :)

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: JS canvas particle demo
Reply #2
Another JS Canvas particle demo, this time starting from scratch with basic theory then using dat.gui for convenience.

  • Flying Jester
  • [*]
  • Verified
  • TurboSphere Developer
Re: JS canvas particle demo
Reply #3

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.
  • Last Edit: November 14, 2014, 09:33:08 pm by Flying Jester