import Rx, { Observable } from 'rxjs'; import Grid from './grid'; import Particle from './particle'; import Controls from './controls'; import { CONTROLS, ENTITIES } from './enums'; function Animation3a() { this.options = { cohesion: true, count: 400, maxCount: 1000, showVisionGrid: false, speed: 4 }; this.container = document.getElementById('animation3a'); this.particles = []; this.grid = new Grid(); const controls = new Controls( document.getElementById('controls3a'), this.options ); controls.mount().subscribe(this.subscriber.bind(this)); this.updateAnimating(this.options.animating); this.updateCount(this.options.count); // TODO remove bottom padding from Disqus // TODO fix "hangup" small radius evade bug // TODO don't load simulation until requested // TODO sort out particle nextframe // TODO ANIM1ab free movement // TODO ANIM3a streamline updateLeader // TODO ANIM3b separation // TODO ANIM3c alignment }; Animation3a.prototype.subscriber = function({ key, value }) { switch(key) { case CONTROLS.ANIMATING: this.updateAnimating(value); break; case CONTROLS.COUNT: this.updateCount(value); break; case CONTROLS.SPEED: this.updateSpeed(value); break; } } Animation3a.prototype.nextFrame = function() { this.particles.forEach(p => { const prevX = p.arc.endX; const prevY = p.arc.endY; p.nextFrame(); this.grid.deletePoint({ x: prevX, y: prevY, type: ENTITIES.PARTICLE }); this.grid.setPoint({ x: p.arc.endX, y: p.arc.endY, type: ENTITIES.PARTICLE }, p); }); } Animation3a.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)); } } Animation3a.prototype.updateCount = function(count) { const bounds = this.container.getBoundingClientRect(); while (this.particles.length > count) { const p = this.particles.pop(); this.grid.deletePoint({ x: p.arc.endX, y: p.arc.endY, type: ENTITIES.PARTICLE }); p.remove(); } while (this.particles.length < count) { const p = new Particle(this.container, bounds, this.options, this.grid); this.grid.setPoint({ x: p.arc.endX, y: p.arc.endY, type: ENTITIES.PARTICLE }, p); this.particles.push(p); } } Animation3a.prototype.updateSpeed = function(value) { this.options.speed = value; this.particles.forEach(p => p.updateConfig({ speed: value })); } export default Animation3a;