dust/js/animation.js

import Rx, { Observable } from 'rxjs';
import Grid from './grid';
import Particle from './particle';
import Controls from './controls';
import { CONTROLS, ENTITIES } from './enums';

function Animation(observables, id) {
    this.id = id;
    this.observables = observables;
    this.particles = [];
    this.grid = new Grid();
    this.fpsInterval = null;

    this.container = document.createElement('div');
    this.container.className = 'animationContainer';
    document.getElementById(id).appendChild(this.container);

    this.observables.count$.skip(1).subscribe(this.subscribeCount.bind(this));
    this.observables.animating$.subscribe(this.subscribeAnimating.bind(this));
}

Animation.prototype.subscribeAnimating = function(isAnimating) {
    if (isAnimating === false) {
        clearInterval(this.fpsInterval);
    } else {
        const { fps$ } = this.observables;
        this.fpsInterval = setInterval(fps$.next.bind(fps$), 1000 / 32);
    }
}

Animation.prototype.subscribeCount = function(count) {
    const bounds = this.container.getBoundingClientRect();

    while (this.particles.length > count) {
        const p = this.particles.pop();
        p.remove();
    }

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

export default Animation;