import Rx, { Observable } from 'rxjs'; import Particle from './particle'; import Store from './store'; import Controls from './controls'; import { CONTROLS } from './enums'; function Animation2a() { this.options = { count: 1, maxCount: 10, randomize: true, showVisionGrid: true, showMovementCircle: false, speed: 4 }; this.container = document.getElementById('animation2a'); this.bounds = this.container.getBoundingClientRect(); this.particles = []; const controls = new Controls( document.getElementById('controls2a'), this.options ); controls.mount().subscribe(this.subscriber.bind(this)); this.updateAnimating(this.options.animating); this.updateCount(this.options.count); // TODO X dimension modified by core UI // TODO remove bottom padding from Disqus // TODO perf - cache trig or perform operations // TODO move animating into controls // TODO particle evade // TODO ANIM2 put pallettes in animation // TODO ANIM2a Show vision grid (including touches!) // TODO ANIM2b Scale vision grid to 1000? particles // TODO ANIM4 Pallet avoidance // TODO ANIM4 Lots of particles // TODO ANIM5 Flocking }; Animation2a.prototype.subscriber = function({ key, value }) { switch(key) { case CONTROLS.ANIMATING: this.updateAnimating(value); break; case CONTROLS.COUNT: this.updateCount(value); break; case CONTROLS.RANDOMIZE: this.updateRandomize(value); break; case CONTROLS.SPEED: this.updateSpeed(value); break; } } Animation2a.prototype.nextFrame = function() { this.particles.forEach(p => p.nextFrame()); } Animation2a.prototype.updateAnimating = function(isAnimating) { this.options.animating = isAnimating; if (isAnimating) { const fps$ = Rx.Observable.interval(1000 / 32) .takeWhile(_ => this.options.animating); fps$.subscribe(this.nextFrame.bind(this)); } } Animation2a.prototype.updateCount = function(count) { while (this.particles.length >= count) { delete this.particles.pop().remove(); } while (this.particles.length < count) { const p = new Particle(this.container, this.bounds, this.options); this.particles.push(p); } } Animation2a.prototype.updateRandomize = function(value) { this.options.randomize = value; this.particles.forEach(p => p.updateOptions({ randomize: value })); } Animation2a.prototype.updateSpeed = function(value) { this.options.speed = value; this.particles.forEach(p => p.updateOptions({ speed: value })); } export default Animation2a;