dust/js/animation1.js

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;