import Rx, { Observable } from 'rxjs'; import Particle from './particle'; import Store from './store'; import Controls from './controls'; function Animation1() { this.options = { count: 1 }; this.container = document.getElementById('animation1'); this.bounds = this.container.getBoundingClientRect(); this.controls = new Controls(document.getElementById('controls1'), this.options); const eventStack = this.controls.mount(); eventStack.subscribe(this.subscriber); this.particles = []; this.updateCount(); // this.particles = Array(5).fill().map(_ => new Particle(this.container, this.bounds)); // // const stop$ = Rx.Observable.fromEvent(this.container, 'stop'); // // // Change animation speed // // Change animal pic // // Enable random radius changes // // Enable random rotation changes // // Show movement circle // // Show vision grid (including touches!) // // Start / stop // // TODO add core UI // // console.error("Click container to stop."); // const fps$ = Rx.Observable.interval(1000 / 32) // .takeUntil(stop$) // .finally(() => { console.error("Stopped."); }) // // const click$ = Rx.Observable.fromEvent(this.container, 'click'); // click$.subscribe(() => { // this.container.dispatchEvent(new CustomEvent('stop')); // }); // // fps$.subscribe(this.nextFrame.bind(this)); }; Animation1.prototype.subscriber = function({ key, value }) { switch(key) { case 'count': this.updateCount(); break; } } Animation1.prototype.nextFrame = function() { this.particles.forEach(p => p.nextFrame()); } Animation1.prototype.updateCount = function() { while (this.particles.length >= this.options.count) { const p = this.particles.pop(); this.container.removeChild(p.node); } while (this.particles.length < this.options.count) { const p = new Particle(this.container, this.bounds); this.particles.push(p); } }; export default Animation1;