zodiac (complete rewrite) #15

Open
wants to merge 4 commits into
from

Projects

None yet

2 participants

@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;

...is 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)
@jnicol
Owner
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.

@indus
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")

@jnicol
Owner
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