Make 3D

[rbdr/lissajous] / lib / main.js

import Serpentity from '@serpentity/serpentity';
import { canvasId, settingsId, fps } from './config';

// Systems
import CameraRotator from './systems/camera_rotator';
import WebGLRenderer from './systems/webgl_renderer';
import LissajousPositionUpdater from './systems/lissajous_position_updater';
import CameraAdjuster from './systems/camera_adjuster';
import FrequencyAdjuster from './systems/frequency_adjuster';
import AmplitudeAdjuster from './systems/amplitude_adjuster';
import GlobalAdjuster from './systems/global_adjuster';

// Factories
import { lissajousCurve } from './factories/curves';
import { camera, configuration } from './factories/global';

const internals = {

  // State variables

  started: false,
  currentTime: 0,
  engine: null,

  load() {
    // Create entities
    const engine = new Serpentity();

    // Add Entities
    engine.addEntity(camera());
    engine.addEntity(lissajousCurve());
    engine.addEntity(configuration());

    // Select elements
    const canvas = document.getElementById(canvasId);
    const settings = document.getElementById(settingsId);

    // Add Systems
    engine.addSystem(new CameraRotator());
    engine.addSystem(new LissajousPositionUpdater());
    engine.addSystem(new WebGLRenderer(canvas));

    // IMPROVEMENT NOTE: I believe adjusters can be generalized further.
    // We could potentially have a factory for this.
    engine.addSystem(new GlobalAdjuster(settings));
    engine.addSystem(new CameraAdjuster(settings));
    engine.addSystem(new FrequencyAdjuster(settings));
    engine.addSystem(new AmplitudeAdjuster(settings));

    internals.engine = engine;
  },

  unload() {
    internals.engine = null;
  },

  run(time) {

    const delta = time - internals.currentTime;
    const interval = 1000 / fps;

    if (delta >= interval) {
      internals.engine.update(delta);
      internals.currentTime = time;
    }

    internals.started && window.requestAnimationFrame(internals.run);
  },

  start() {
    if (!internals.started) {
      internals.started = true;
      internals.load();
      window.requestAnimationFrame(internals.run);
    }
  },

  stop() {
    if (internals.started) {
      internals.started = false;
      internals.unload();
    }
  }
};

internals.start();