Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zodiac (complete rewrite) #15

wants to merge 4 commits into
base: master
Choose a base branch

zodiac (complete rewrite) #15

wants to merge 4 commits into from


Copy link

@indus indus commented Apr 2, 2015

a complete rewrite of particleground.js

only a third file size (to be fair: without jQuery-stuff and, raf polyfill), better performance, and some additional options.

even if it has almost no impact on the performance, code like this...

var ratioX = (winW - 0) / (30 - -30);
pointerX = (tiltX - -30) * ratioX + 0; bloat! What is wrong with:

pointerX = (tiltX +30) * (winW/60);

The thing that really hits performance is the drawing routine. It is possible to only call ctx.stroke() once in a frame and leave the ctx style properties totally untouched, combine positioning and drawing into a single loop, avoid clunky Particle-Objects, and the ugly switch statements,

even if there is no equal codebase anymore, you maybe want to merge some of these _ideas_ into your library:

  • use plain Arrays or POJOs instead of an extra Class to store the particle values.
  • use a supervised drawing routine instead of an instance method to draw to canvas
  • call ctx.stroke() only once per frame!
  • remove orientationSupport && !desktop - when you get a proper event in the callback, you know that you have support
  • calculate values only once (or once per frame) if they don´t change and not on every frame and for every particle (e.g.: pointerX - (winW / 2) could be calculated in the mousemove and orientation handler)
  • remove the stackPos thing and just use the index of the array you keep the particles in.
  • don´t combine in options the wall bouncing behaviour with the direction the particles move. They are not necessary related.
  • combine resizeEvent handling and init (the adjustement of the number of particles is the same)

Copy link

jnicol commented Apr 2, 2015

Thanks @indus, this looks really cool. I won't merge the pull request wholesale into Particleground due to the removal of jQuery, removal of functionality I consider important (e.g. pause and destroy methods) and renaming of the library, but I'd love to cherry pick some of your ideas, especially those which improve rendering performance.

Copy link

indus commented Apr 2, 2015

Sure! You are welcome. If you have questions or you find bugs feel free to contact me.
But would you mind when I open up a separate repo for my version. I could add some sort of reference (e.g. "inspired by jnicol's particleground.js")

Copy link

jnicol commented Apr 2, 2015

Yeah of course, go right ahead and start a new repo for Zodiac :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet
2 participants