dust/js/animation1.js

import Rx, { Observable } from 'rxjs';
import Particle from './particle';
import Store from './store';
import Controls from './controls';
import { CONTROLS } from './enums';

function Animation1() {
    this.options = {
        animating: false,
        count: 1,
        randomizeRadius: true,
        randomizeRotation: true,
        // showMovementCircle: false,
        // showVIsionGrid: false,
        speed: 4
    };

    this.container = document.getElementById('animation1');
    this.bounds = this.container.getBoundingClientRect();
    this.particles = [];

    const controls = new Controls(document.getElementById('controls1'), this.options);
    const eventStack = controls.mount();
    eventStack.subscribe(this.subscriber.bind(this));

    this.updateAnimating(this.options.animating);
    this.updateCount(this.options.count);

    // TODO Change animal pic OR - use particle ##???
    // TODO show movement circle
    // TODO cleanup movement circle
    // TODO cleanup vision grid
    // TODO add core UI
    // TODO regen vision grid is option updated
    // TODO expose particle ##
    // TODO kill hover on slider, finalize control panel location

    // TODO ANIM2 Show vision grid (including touches!)
};

Animation1.prototype.subscriber = function({ key, value }) {
    switch(key) {
        case CONTROLS.ANIMATING: this.updateAnimating(value); break;
        case CONTROLS.COUNT: this.updateCount(value); break;
        case CONTROLS.RADIUS: this.updateRadius(value); break;
        case CONTROLS.ROTATION: this.updateRotation(value); break;
        case CONTROLS.SPEED: this.updateSpeed(value); break;
    }
}

Animation1.prototype.nextFrame = function() {
    this.particles.forEach(p => p.nextFrame());
}

Animation1.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));
    }
}

Animation1.prototype.updateCount = function(count) {
    while (this.particles.length >= count) {
        const p = this.particles.pop();
        this.container.removeChild(p.node);
    }

    while (this.particles.length < count) {
        const p = new Particle(this.container, this.bounds, this.options);
        this.particles.push(p);
    }
}

Animation1.prototype.updateRadius = function(randomizeRadius) {
    this.options.randomizeRadius = randomizeRadius;
    this.particles.forEach(p => p.updateOptions({ randomizeRadius }));
}

Animation1.prototype.updateRotation = function(randomizeRotation) {
    this.options.randomizeRotation = randomizeRotation;
    this.particles.forEach(p => p.updateOptions({ randomizeRotation }));
}

Animation1.prototype.updateSpeed = function(speed) {
    this.options.speed = speed;
    this.particles.forEach(p => p.updateOptions({ speed }));
}

export default Animation1;