refactor: Globalize so many things

src/entities/CameraEntity.ts

@@ -11,8 +11,8 @@ import { AO_RESOLUTION_RATIO } from '../config';
 import aoFrag from '../shaders/ao.frag';
 import quadVert from '../shaders/quad.vert';
 import shadingFrag from '../shaders/shading.frag';
-import { gl } from '../heck/canvas';
-import { randomTexture } from '../utils/RandomTexture';
+import { gl } from '../globals/canvas';
+import { randomTexture } from '../globals/randomTexture';
 
 export interface CameraEntityOptions {
   root: Entity;

src/entities/FlickyParticles.ts

@@ -9,8 +9,8 @@ import flickyParticleComputeFrag from '../shaders/flicky-particles-compute.frag'
 import flickyParticleRenderFrag from '../shaders/flicky-particles-render.frag';
 import flickyParticleRenderVert from '../shaders/flicky-particles-render.vert';
 import { TRIANGLE_STRIP_QUAD } from '@fms-cat/experimental';
-import { gl, glCat } from '../heck/canvas';
-import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
+import { gl, glCat } from '../globals/canvas';
+import { randomTexture, randomTextureStatic } from '../globals/randomTexture';
 
 export interface FlickyParticlesOptions {
   particlesSqrt: number;

src/entities/GPUParticles.ts

@@ -6,7 +6,7 @@ import { Material } from '../heck/Material';
 import { Mesh } from '../heck/components/Mesh';
 import { Quad } from '../heck/components/Quad';
 import { Swap } from '@fms-cat/experimental';
-import { gl } from '../heck/canvas';
+import { gl } from '../globals/canvas';
 
 export interface GPUParticlesOptions {
   materialCompute: Material;

src/entities/Glitch.ts

@@ -4,15 +4,14 @@ import { Quad } from '../heck/components/Quad';
 import { RenderTarget } from '../heck/RenderTarget';
 import quadVert from '../shaders/quad.vert';
 import glitchFrag from '../shaders/glitch.frag';
-import { Automaton } from '@fms-cat/automaton';
 import returnFrag from '../shaders/return.frag';
 import { BufferRenderTarget } from '../heck/BufferRenderTarget';
 import { Blit } from '../heck/components/Blit';
+import { auto } from '../globals/automaton';
 
 export interface GlitchOptions {
   input: BufferRenderTarget;
   target: RenderTarget;
-  automaton: Automaton;
 }
 
 export class Glitch {
@@ -67,7 +66,7 @@ export class Glitch {
     entityMain.components.push( quad );
 
     // -- update uniform ---------------------------------------------------------------------------
-    options.automaton.auto( 'Glitch/amp', ( { value } ) => {
+    auto( 'Glitch/amp', ( { value } ) => {
       this.material.addUniform( 'amp', '1f', value );
 
       entityMain.active = 0.0 < value;

src/entities/PixelSorter.ts

@@ -10,11 +10,11 @@ import { BufferRenderTarget } from '../heck/BufferRenderTarget';
 import { Swap } from '@fms-cat/experimental';
 import { Automaton } from '@fms-cat/automaton';
 import { Blit } from '../heck/components/Blit';
+import { auto } from '../globals/automaton';
 
 export interface PixelSorterOptions {
   input: BufferRenderTarget;
   target: RenderTarget;
-  automaton: Automaton;
 }
 
 export class PixelSorter {
@@ -142,7 +142,7 @@ export class PixelSorter {
     }
 
     // -- update uniform ---------------------------------------------------------------------------
-    options.automaton.auto( 'PixelSorter/amp', ( { value } ) => {
+    auto( 'PixelSorter/amp', ( { value } ) => {
       indexMaterials.map( ( material ) => {
         material.addUniform( 'threshold', '1f', value );
       } );

src/entities/RTInspector.ts

@@ -2,7 +2,7 @@ import { Entity } from '../heck/Entity';
 import { RenderTarget } from '../heck/RenderTarget';
 import { BufferRenderTarget } from '../heck/BufferRenderTarget';
 import { RTINSPECTOR_CAPTURE_INDEX, RTINSPECTOR_CAPTURE_NAME, RTINSPECTOR_MULTIPLE } from '../config-hot';
-import { gl } from '../heck/canvas';
+import { gl } from '../globals/canvas';
 import { Blit } from '../heck/components/Blit';
 
 export interface RTInspectorOptions {

src/entities/Raymarcher.ts

@@ -1,14 +1,14 @@
 import { GLCatTexture } from '@fms-cat/glcat-ts';
 import { Mesh, MeshCull } from '../heck/components/Mesh';
 import { TRIANGLE_STRIP_QUAD, Vector3 } from '@fms-cat/experimental';
-import { gl, glCat } from '../heck/canvas';
+import { gl, glCat } from '../globals/canvas';
 import { Entity } from '../heck/Entity';
 import { Geometry } from '../heck/Geometry';
 import { Material } from '../heck/Material';
 import quadVert from '../shaders/quad.vert';
 import raymarcherFrag from '../shaders/raymarcher.frag';
 import { Lambda } from '../heck/components/Lambda';
-import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
+import { randomTexture, randomTextureStatic } from '../globals/randomTexture';
 
 export class Raymarcher {
   private __mesh: Mesh;

src/entities/Rings.ts

@@ -7,7 +7,7 @@ import { InstancedGeometry } from '../heck/InstancedGeometry';
 import { Material } from '../heck/Material';
 import ringsVert from '../shaders/rings.vert';
 import ringsFrag from '../shaders/rings.frag';
-import { gl, glCat } from '../heck/canvas';
+import { gl, glCat } from '../globals/canvas';
 
 const PRIMCOUNT = 32;
 

src/entities/SphereParticles.ts

@@ -8,12 +8,11 @@ import quadVert from '../shaders/quad.vert';
 import sphereParticleComputeFrag from '../shaders/sphere-particles-compute.frag';
 import sphereParticleRenderFrag from '../shaders/sphere-particles-render.frag';
 import sphereParticleRenderVert from '../shaders/sphere-particles-render.vert';
-import { gl, glCat } from '../heck/canvas';
-import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
+import { gl, glCat } from '../globals/canvas';
+import { randomTexture, randomTextureStatic } from '../globals/randomTexture';
 
-export interface SphereParticlesOptions {
-  particlesSqrt: number;
-}
+const PARTICLES_SQRT = 256;
+const PARTICLES = PARTICLES_SQRT * PARTICLES_SQRT;
 
 export class SphereParticles {
   public get entity(): Entity {
@@ -30,25 +29,22 @@ export class SphereParticles {
     return this.__gpuParticles.materialRender;
   }
 
-  public constructor( options: SphereParticlesOptions ) {
+  public constructor() {
     this.__gpuParticles = new GPUParticles( {
-      materialCompute: this.__createMaterialCompute( options ),
-      geometryRender: this.__createGeometryRender( options ),
-      materialRender: this.__createMaterialRender( options ),
-      computeWidth: options.particlesSqrt,
-      computeHeight: options.particlesSqrt,
+      materialCompute: this.__createMaterialCompute(),
+      geometryRender: this.__createGeometryRender(),
+      materialRender: this.__createMaterialRender(),
+      computeWidth: PARTICLES_SQRT,
+      computeHeight: PARTICLES_SQRT,
       computeNumBuffers: 2,
       namePrefix: process.env.DEV && 'SphereParticles',
     } );
   }
 
-  private __createMaterialCompute( options: SphereParticlesOptions ): Material {
-    const { particlesSqrt } = options;
-    const particles = particlesSqrt * particlesSqrt;
-
+  private __createMaterialCompute(): Material {
     const material = new Material( quadVert, sphereParticleComputeFrag );
-    material.addUniform( 'particlesSqrt', '1f', particlesSqrt );
-    material.addUniform( 'particles', '1f', particles );
+    material.addUniform( 'particlesSqrt', '1f', PARTICLES_SQRT );
+    material.addUniform( 'particles', '1f', PARTICLES );
     material.addUniformTexture( 'samplerRandom', randomTexture.texture );
 
     if ( process.env.DEV ) {
@@ -62,10 +58,7 @@ export class SphereParticles {
     return material;
   }
 
-  private __createGeometryRender( options: SphereParticlesOptions ): Geometry {
-    const { particlesSqrt } = options;
-    const particles = particlesSqrt * particlesSqrt;
-
+  private __createGeometryRender(): Geometry {
     const octahedron = genOctahedron( { radius: 1.0, div: 1 } );
 
     const geometry = new InstancedGeometry();
@@ -76,12 +69,12 @@ export class SphereParticles {
 
     const bufferComputeUV = glCat.createBuffer();
     bufferComputeUV.setVertexbuffer( ( () => {
-      const ret = new Float32Array( particles * 2 );
-      for ( let iy = 0; iy < particlesSqrt; iy ++ ) {
-        for ( let ix = 0; ix < particlesSqrt; ix ++ ) {
-          const i = ix + iy * particlesSqrt;
-          const s = ( ix + 0.5 ) / particlesSqrt;
-          const t = ( iy + 0.5 ) / particlesSqrt;
+      const ret = new Float32Array( PARTICLES * 2 );
+      for ( let iy = 0; iy < PARTICLES_SQRT; iy ++ ) {
+        for ( let ix = 0; ix < PARTICLES_SQRT; ix ++ ) {
+          const i = ix + iy * PARTICLES_SQRT;
+          const s = ( ix + 0.5 ) / PARTICLES_SQRT;
+          const t = ( iy + 0.5 ) / PARTICLES_SQRT;
           ret[ i * 2 + 0 ] = s;
           ret[ i * 2 + 1 ] = t;
         }
@@ -98,12 +91,12 @@ export class SphereParticles {
 
     geometry.count = octahedron.count;
     geometry.mode = octahedron.mode;
-    geometry.primcount = options.particlesSqrt * options.particlesSqrt;
+    geometry.primcount = PARTICLES_SQRT * PARTICLES_SQRT;
 
     return geometry;
   }
 
-  private __createMaterialRender( options: SphereParticlesOptions ): Material {
+  private __createMaterialRender(): Material {
     const material = new Material(
       sphereParticleRenderVert,
       sphereParticleRenderFrag,

src/entities/Trails.ts

@@ -7,13 +7,11 @@ import quadVert from '../shaders/quad.vert';
 import trailsComputeFrag from '../shaders/trails-compute.frag';
 import trailsRenderFrag from '../shaders/trails-render.frag';
 import trailsRenderVert from '../shaders/trails-render.vert';
-import { gl, glCat } from '../heck/canvas';
-import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
+import { gl, glCat } from '../globals/canvas';
+import { randomTexture, randomTextureStatic } from '../globals/randomTexture';
 
-export interface TrailsOptions {
-  trails: number;
-  trailLength: number;
-}
+const TRAILS = 4096;
+const TRAIL_LENGTH = 64;
 
 export class Trails {
   public get entity(): Entity {
@@ -30,22 +28,22 @@ export class Trails {
     return this.__gpuParticles.materialRender;
   }
 
-  public constructor( options: TrailsOptions ) {
+  public constructor() {
     this.__gpuParticles = new GPUParticles( {
-      materialCompute: this.__createMaterialCompute( options ),
-      geometryRender: this.__createGeometryRender( options ),
-      materialRender: this.__createMaterialRender( options ),
-      computeWidth: options.trailLength,
-      computeHeight: options.trails,
+      materialCompute: this.__createMaterialCompute(),
+      geometryRender: this.__createGeometryRender(),
+      materialRender: this.__createMaterialRender(),
+      computeWidth: TRAIL_LENGTH,
+      computeHeight: TRAILS,
       computeNumBuffers: 2,
       namePrefix: process.env.DEV && 'Trails',
     } );
   }
 
-  private __createMaterialCompute( options: TrailsOptions ): Material {
+  private __createMaterialCompute(): Material {
     const material = new Material( quadVert, trailsComputeFrag );
-    material.addUniform( 'trails', '1f', options.trails );
-    material.addUniform( 'trailLength', '1f', options.trailLength );
+    material.addUniform( 'trails', '1f', TRAILS );
+    material.addUniform( 'trailLength', '1f', TRAIL_LENGTH );
     material.addUniformTexture( 'samplerRandom', randomTexture.texture );
 
     if ( process.env.DEV ) {
@@ -59,14 +57,14 @@ export class Trails {
     return material;
   }
 
-  private __createGeometryRender( options: TrailsOptions ): Geometry {
+  private __createGeometryRender(): Geometry {
     const geometry = new InstancedGeometry();
 
     const bufferComputeU = glCat.createBuffer();
     bufferComputeU.setVertexbuffer( ( () => {
-      const ret = new Float32Array( options.trailLength * 3 );
-      for ( let i = 0; i < options.trailLength; i ++ ) {
-        const u = ( 0.5 + i ) / options.trailLength;
+      const ret = new Float32Array( TRAIL_LENGTH * 3 );
+      for ( let i = 0; i < TRAIL_LENGTH; i ++ ) {
+        const u = ( 0.5 + i ) / TRAIL_LENGTH;
         ret[ i * 3 + 0 ] = u;
         ret[ i * 3 + 1 ] = u;
         ret[ i * 3 + 2 ] = u;
@@ -82,9 +80,9 @@ export class Trails {
 
     const bufferComputeV = glCat.createBuffer();
     bufferComputeV.setVertexbuffer( ( () => {
-      const ret = new Float32Array( options.trails );
-      for ( let i = 0; i < options.trails; i ++ ) {
-        ret[ i ] = ( i + 0.5 ) / options.trails;
+      const ret = new Float32Array( TRAILS );
+      for ( let i = 0; i < TRAILS; i ++ ) {
+        ret[ i ] = ( i + 0.5 ) / TRAILS;
       }
       return ret;
     } )() );
@@ -98,8 +96,8 @@ export class Trails {
 
     const bufferTriIndex = glCat.createBuffer();
     bufferTriIndex.setVertexbuffer( ( () => {
-      const ret = new Float32Array( 3 * options.trailLength );
-      for ( let i = 0; i < options.trailLength; i ++ ) {
+      const ret = new Float32Array( 3 * TRAIL_LENGTH );
+      for ( let i = 0; i < TRAIL_LENGTH; i ++ ) {
         ret[ i * 3 + 0 ] = 0;
         ret[ i * 3 + 1 ] = 1;
         ret[ i * 3 + 2 ] = 2;
@@ -115,8 +113,8 @@ export class Trails {
 
     const indexBuffer = glCat.createBuffer();
     indexBuffer.setIndexbuffer( ( () => {
-      const ret = new Uint16Array( ( options.trailLength - 1 ) * 18 );
-      for ( let i = 0; i < options.trailLength - 1; i ++ ) {
+      const ret = new Uint16Array( ( TRAIL_LENGTH - 1 ) * 18 );
+      for ( let i = 0; i < TRAIL_LENGTH - 1; i ++ ) {
         for ( let j = 0; j < 3; j ++ ) {
           const jn = ( j + 1 ) % 3;
           ret[ i * 18 + j * 6 + 0 ] = i * 3 + j;
@@ -135,14 +133,14 @@ export class Trails {
       type: gl.UNSIGNED_SHORT
     } );
 
-    geometry.count = ( options.trailLength - 1 ) * 18;
-    geometry.primcount = options.trails;
+    geometry.count = ( TRAIL_LENGTH - 1 ) * 18;
+    geometry.primcount = TRAILS;
     geometry.mode = gl.TRIANGLES;
 
     return geometry;
   }
 
-  private __createMaterialRender( options: TrailsOptions ): Material {
+  private __createMaterialRender(): Material {
     const material = new Material(
       trailsRenderVert,
       trailsRenderFrag,

src/geometries/genCube.ts

@@ -1,4 +1,4 @@
-import { gl, glCat } from '../heck/canvas';
+import { gl, glCat } from '../globals/canvas';
 import { GeometryAttribute, GeometryIndex } from '../heck/Geometry';
 
 interface ResultGenCube {

src/geometries/genOctahedron.ts

@@ -1,4 +1,4 @@
-import { gl, glCat } from '../heck/canvas';
+import { gl, glCat } from '../globals/canvas';
 import { GeometryAttribute, GeometryIndex } from '../heck/Geometry';
 
 interface ResultGenOctahedron {

src/geometries/genTorus.ts

@@ -1,4 +1,4 @@
-import { gl, glCat } from '../heck/canvas';
+import { gl, glCat } from '../globals/canvas';
 import { GeometryAttribute, GeometryIndex } from '../heck/Geometry';
 
 interface ResultGenTorus {

src/globals/automaton.ts

@@ -0,0 +1,47 @@
+import { Automaton } from '@fms-cat/automaton';
+import { AutomatonWithGUI } from '@fms-cat/automaton-with-gui';
+import automatonData from '../automaton.json';
+import * as automatonFxs from '../automaton-fxs/automatonFxs';
+import { music } from './music';
+import { getDivAutomaton } from './dom';
+
+export const automaton = ( () => {
+  if ( process.env.DEV ) {
+    // this cast smells so bad
+    // https://github.com/FMS-Cat/automaton/issues/121
+    const automatonWithGUI = new AutomatonWithGUI(
+      automatonData,
+      {
+        gui: getDivAutomaton(),
+        isPlaying: true,
+        fxDefinitions: automatonFxs,
+      }
+    );
+
+    automatonWithGUI.on( 'play', () => { music.isPlaying = true; } );
+    automatonWithGUI.on( 'pause', () => { music.isPlaying = false; } );
+    automatonWithGUI.on( 'seek', ( { time } ) => {
+      music.time = Math.max( 0.0, time );
+      automatonWithGUI.reset();
+    } );
+
+    if ( module.hot ) {
+      module.hot.accept( '../automaton.json', () => {
+        // we probably don't need this feature for now...
+        // See: https://github.com/FMS-Cat/automaton/issues/120
+        // automatonWithGUI.deserialize( automatonData );
+      } );
+    }
+
+    return automatonWithGUI;
+  } else {
+    return new Automaton(
+      automatonData,
+      {
+        fxDefinitions: automatonFxs
+      }
+    );
+  }
+} )();
+
+export const auto = automaton.auto;

src/globals/dom.ts

@@ -0,0 +1,92 @@
+function getElement<T extends HTMLElement>(
+  id: string,
+  tagName: string,
+  style: { [ key: string ]: string },
+  hook?: ( el: T ) => void,
+): T {
+  let el = document.getElementById( id ) as T;
+  if ( el ) {
+    return el;
+  }
+
+  el = document.createElement( tagName ) as T;
+  el.id = id;
+
+  document.body.appendChild( el );
+
+  Object.assign( el.style, style );
+
+  hook?.( el );
+
+  return el;
+}
+
+export function getCheckboxActive(): HTMLInputElement {
+  return getElement<HTMLInputElement>(
+    'checkboxActive',
+    'input',
+    {
+      position: 'fixed',
+      left: '8px',
+      bottom: '248px',
+    },
+    ( el ) => {
+      el.type = 'checkbox';
+      el.checked = true;
+    },
+  );
+}
+
+export function getDivAutomaton(): HTMLDivElement {
+  return getElement<HTMLDivElement>(
+    'divAutomaton',
+    'div',
+    {
+      position: 'fixed',
+      width: '100%',
+      height: '240px',
+      right: '0',
+      bottom: '0',
+    },
+  );
+}
+
+export function getDivComponentsUpdate(): HTMLDivElement {
+  return getElement<HTMLDivElement>(
+    'divComponentsUpdate',
+    'div',
+    {
+      whiteSpace: 'pre',
+      color: '#ffffff',
+      font: '500 10px Wt-Position-Mono',
+      position: 'fixed',
+      padding: '0',
+      boxSizing: 'border-box',
+      width: '240px',
+      height: 'calc( ( 100% - 240px ) * 0.5 )',
+      right: '0',
+      top: '0',
+      overflowY: 'scroll',
+    },
+  );
+}
+
+export function getDivComponentsDraw(): HTMLDivElement {
+  return getElement<HTMLDivElement>(
+    'divComponentsDraw',
+    'div',
+    {
+      whiteSpace: 'pre',
+      color: '#ffffff',
+      font: '500 10px Wt-Position-Mono',
+      position: 'fixed',
+      padding: '0',
+      boxSizing: 'border-box',
+      width: '240px',
+      height: 'calc( ( 100% - 240px ) * 0.5 )',
+      right: '0',
+      top: 'calc( ( 100% - 240px ) * 0.5 )',
+      overflowY: 'scroll',
+    },
+  );
+}

src/globals/music.ts

@@ -0,0 +1,5 @@
+import { Music } from '../Music';
+import { glCat } from './canvas';
+
+export const audio = new AudioContext();
+export const music = new Music( glCat, audio );

src/globals/randomTexture.ts

@@ -0,0 +1,17 @@
+import { glCat } from './canvas';
+import { RANDOM_RESOLUTION, STATIC_RANDOM_RESOLUTION } from '../config';
+import { RandomTexture } from '../utils/RandomTexture';
+
+export const randomTexture = new RandomTexture(
+  glCat,
+  RANDOM_RESOLUTION[ 0 ],
+  RANDOM_RESOLUTION[ 1 ]
+);
+randomTexture.update();
+
+export const randomTextureStatic = new RandomTexture(
+  glCat,
+  STATIC_RANDOM_RESOLUTION[ 0 ],
+  STATIC_RANDOM_RESOLUTION[ 1 ]
+);
+randomTextureStatic.update();

src/heck/BufferRenderTarget.ts

@@ -1,5 +1,5 @@
 import { GLCatFramebuffer, GLCatTexture } from '@fms-cat/glcat-ts';
-import { gl, glCat } from './canvas';
+import { gl, glCat } from '../globals/canvas';
 import { RenderTarget } from './RenderTarget';
 
 export interface BufferRenderTargetOptions {

src/heck/CanvasRenderTarget.ts

@@ -1,4 +1,4 @@
-import { canvas, gl, glCat } from './canvas';
+import { canvas, gl, glCat } from '../globals/canvas';
 import { RenderTarget } from './RenderTarget';
 
 export class CanvasRenderTarget extends RenderTarget {

src/heck/Dog.ts

@@ -1,32 +1,28 @@
 import { Entity } from './Entity';
 import { Transform } from './Transform';
-import { Music } from '../Music';
 import { Component } from './components/Component';
-
-let ha = 0;
+import { music } from '../globals/music';
 
 /**
  * And what a WONDERFUL Dog they are!!
  */
 export class Dog {
   public root: Entity;
-  public music: Music;
   public active: boolean;
 
   private __frameCount: number = 0;
 
-  public constructor( music: Music ) {
+  public constructor() {
     this.root = new Entity();
-    this.music = music;
     this.active = true;
 
     const update = (): void => {
       if ( this.active ) {
-        this.music.update();
+        music.update();
         this.root.update( {
           frameCount: this.__frameCount ++,
-          time: this.music.time,
-          deltaTime: this.music.deltaTime,
+          time: music.time,
+          deltaTime: music.deltaTime,
           globalTransform: new Transform(),
           parent: null
         } );

src/heck/GPUTimer.ts

@@ -1,5 +1,5 @@
 import { Pool } from '../utils/Pool';
-import { gl, glCat } from './canvas';
+import { gl, glCat } from '../globals/canvas';
 
 export class GPUTimer {
   public queries: Pool<WebGLQuery>;

src/heck/Geometry.ts

@@ -1,5 +1,5 @@
 import { GLCatBuffer, GLCatTransformFeedback } from '@fms-cat/glcat-ts';
-import { gl, glCat } from './canvas';
+import { gl, glCat } from '../globals/canvas';
 import { Material } from './Material';
 
 export interface GeometryAttribute {

src/heck/InstancedGeometry.ts

@@ -1,4 +1,4 @@
-import { gl } from './canvas';
+import { gl } from '../globals/canvas';
 import { Geometry } from './Geometry';
 
 export class InstancedGeometry extends Geometry {

src/heck/Material.ts

@@ -1,5 +1,5 @@
 import { GLCatProgram, GLCatProgramLinkOptions, GLCatProgramUniformType, GLCatTexture } from '@fms-cat/glcat-ts';
-import { gl } from './canvas';
+import { gl } from '../globals/canvas';
 import { SHADERPOOL } from './ShaderPool';
 
 export class Material {

src/heck/ShaderPool.ts

@@ -1,5 +1,5 @@
 import { GLCatProgram, GLCatProgramLinkOptions } from '@fms-cat/glcat-ts';
-import { glCat } from './canvas';
+import { glCat } from '../globals/canvas';
 import { Material } from './Material';
 
 export class ShaderPool<TUser> {

src/heck/components/Blit.ts

@@ -1,6 +1,6 @@
 import { Component, ComponentOptions, ComponentUpdateEvent } from './Component';
 import { RenderTarget } from '../RenderTarget';
-import { gl } from '../canvas';
+import { gl } from '../../globals/canvas';
 import { BufferRenderTarget } from '../BufferRenderTarget';
 
 export interface BlitOptions extends ComponentOptions {

src/heck/components/Camera.ts

@@ -3,7 +3,7 @@ import { Entity } from '../Entity';
 import { Matrix4 } from '@fms-cat/experimental';
 import { RenderTarget } from '../RenderTarget';
 import { Transform } from '../Transform';
-import { glCat } from '../canvas';
+import { glCat } from '../../globals/canvas';
 
 export interface CameraOptions extends ComponentOptions {
   renderTarget?: RenderTarget;

src/heck/components/Component.ts

@@ -5,6 +5,7 @@ import { RenderTarget } from '../RenderTarget';
 import { Transform } from '../Transform';
 import { COMPONENT_DRAW_BREAKPOINT, COMPONENT_UPDATE_BREAKPOINT } from '../../config-hot';
 import { GPUTimer } from '../GPUTimer';
+import { getDivComponentsDraw, getDivComponentsUpdate } from '../../globals/dom';
 
 export interface ComponentUpdateEvent {
   frameCount: number;
@@ -42,7 +43,9 @@ export class Component {
 
   public static resetUpdateBreakpoint(): void {
     if ( process.env.DEV ) {
-      if ( window.divComponentsUpdate && Component.updateList != null ) {
+      const divComponentsUpdate = getDivComponentsUpdate();
+
+      if ( Component.updateList != null ) {
         Promise.all( Component.updateList ).then( ( list ) => {
           let accumCpu = 0.0;
           let accumGpu = 0.0;
@@ -54,7 +57,7 @@ export class Component {
           } ).join( '\n' );
 
           const strAccum = `${ accumCpu.toFixed( 3 ) }, ${ accumGpu.toFixed( 3 ) } - UPDATE\n`;
-          window.divComponentsUpdate!.innerHTML = strAccum + strEach;
+          divComponentsUpdate.innerHTML = strAccum + strEach;
         } );
       }
       Component.updateList = [];
@@ -65,7 +68,9 @@ export class Component {
 
   public static resetDrawBreakpoint(): void {
     if ( process.env.DEV ) {
-      if ( window.divComponentsDraw && Component.drawList != null ) {
+      const divComponentsDraw = getDivComponentsDraw();
+
+      if ( Component.drawList != null ) {
         Promise.all( Component.drawList ).then( ( list ) => {
           let accumCpu = 0.0;
           let accumGpu = 0.0;
@@ -77,7 +82,7 @@ export class Component {
           } ).join( '\n' );
 
           const strAccum = `${ accumCpu.toFixed( 3 ) }, ${ accumGpu.toFixed( 3 ) } - DRAW\n`;
-          window.divComponentsDraw!.innerHTML = strAccum + strEach;
+          divComponentsDraw.innerHTML = strAccum + strEach;
         } );
       }
       Component.drawList = [];

src/heck/components/Mesh.ts

@@ -1,7 +1,7 @@
 import { Component, ComponentDrawEvent, ComponentOptions } from './Component';
 import { Geometry } from '../Geometry';
 import { Material } from '../Material';
-import { glCat } from '../canvas';
+import { glCat } from '../../globals/canvas';
 
 export enum MeshCull {
   None,

src/heck/components/Quad.ts

@@ -3,7 +3,7 @@ import { Geometry } from '../Geometry';
 import { Material } from '../Material';
 import { RenderTarget } from '../RenderTarget';
 import { TRIANGLE_STRIP_QUAD } from '@fms-cat/experimental';
-import { glCat } from '../canvas';
+import { glCat } from '../../globals/canvas';
 
 const quadBuffer = glCat.createBuffer();
 quadBuffer.setVertexbuffer( new Float32Array( TRIANGLE_STRIP_QUAD ) );

src/main.ts

@@ -1,13 +1,8 @@
-import { Automaton } from '@fms-cat/automaton';
-import { AutomatonWithGUI } from '@fms-cat/automaton-with-gui';
-import * as automatonFxs from './automaton-fxs/automatonFxs';
-import { Music } from './Music';
-import automatonData from './automaton.json';
-import { canvas, glCat } from './heck/canvas';
+import { canvas } from './globals/canvas';
 import { Dog } from './heck/Dog';
 import { CanvasRenderTarget } from './heck/CanvasRenderTarget';
 import { Lambda } from './heck/components/Lambda';
-import { randomTexture } from './utils/RandomTexture';
+import { randomTexture } from './globals/randomTexture';
 import { SphereParticles } from './entities/SphereParticles';
 import { Swap, Vector3 } from '@fms-cat/experimental';
 import { BufferRenderTarget } from './heck/BufferRenderTarget';
@@ -26,11 +21,11 @@ import { PixelSorter } from './entities/PixelSorter';
 import { IBLLUT } from './entities/IBLLUT';
 import { EnvironmentMap } from './entities/EnvironmentMap';
 import { Cube } from './entities/Cube';
+import { music } from './globals/music';
+import { automaton } from './globals/automaton';
+import { getCheckboxActive } from './globals/dom';
 
 // == music ========================================================================================
-const audio = new AudioContext();
-const music = new Music( glCat, audio );
-
 if ( process.env.DEV ) {
   music.isPlaying = true;
 }
@@ -47,58 +42,6 @@ if ( process.env.DEV ) {
   canvas.style.left = '0';
   canvas.style.top = '0';
   canvas.style.width = 'calc( 100% - 240px )';
-
-  window.divPath = document.createElement( 'div' );
-  document.body.appendChild( window.divPath );
-  window.divPath.style.position = 'fixed';
-  window.divPath.style.textAlign = 'right';
-  window.divPath.style.right = '8px';
-  window.divPath.style.bottom = '248px';
-  window.divPath.style.textShadow = '1px 1px 1px #ffffff';
-
-  window.divAutomaton = document.createElement( 'div' );
-  document.body.appendChild( window.divAutomaton );
-  window.divAutomaton.style.position = 'fixed';
-  window.divAutomaton.style.width = '100%';
-  window.divAutomaton.style.height = '240px';
-  window.divAutomaton.style.right = '0';
-  window.divAutomaton.style.bottom = '0';
-
-  window.checkActive = document.createElement( 'input' );
-  document.body.appendChild( window.checkActive );
-  window.checkActive.type = 'checkbox';
-  window.checkActive.checked = true;
-  window.checkActive.style.position = 'fixed';
-  window.checkActive.style.left = '8px';
-  window.checkActive.style.bottom = '248px';
-
-  window.divComponentsUpdate = document.createElement( 'div' );
-  document.body.appendChild( window.divComponentsUpdate );
-  window.divComponentsUpdate.style.whiteSpace = 'pre';
-  window.divComponentsUpdate.style.color = '#ffffff';
-  window.divComponentsUpdate.style.font = '500 10px Wt-Position-Mono';
-  window.divComponentsUpdate.style.position = 'fixed';
-  window.divComponentsUpdate.style.padding = '0';
-  window.divComponentsUpdate.style.boxSizing = 'border-box';
-  window.divComponentsUpdate.style.width = '240px';
-  window.divComponentsUpdate.style.height = 'calc( ( 100% - 240px ) * 0.5 )';
-  window.divComponentsUpdate.style.right = '0';
-  window.divComponentsUpdate.style.top = '0';
-  window.divComponentsUpdate.style.overflowY = 'scroll';
-
-  window.divComponentsDraw = document.createElement( 'div' );
-  document.body.appendChild( window.divComponentsDraw );
-  window.divComponentsDraw.style.whiteSpace = 'pre';
-  window.divComponentsDraw.style.color = '#ffffff';
-  window.divComponentsDraw.style.font = '500 10px Wt-Position-Mono';
-  window.divComponentsDraw.style.position = 'fixed';
-  window.divComponentsDraw.style.padding = '0';
-  window.divComponentsDraw.style.boxSizing = 'border-box';
-  window.divComponentsDraw.style.width = '240px';
-  window.divComponentsDraw.style.height = 'calc( ( 100% - 240px ) * 0.5 )';
-  window.divComponentsDraw.style.right = '0';
-  window.divComponentsDraw.style.top = 'calc( ( 100% - 240px ) * 0.5 )';
-  window.divComponentsDraw.style.overflowY = 'scroll';
 } else {
   canvas.style.position = 'fixed';
   canvas.style.left = '0';
@@ -117,53 +60,11 @@ if ( process.env.DEV ) {
   };
 }
 
-// == automaton ====================================================================================
+// == scene ========================================================================================
 let totalFrame = 0;
 let isInitialFrame = true;
 
-let automaton: Automaton;
-
-if ( process.env.DEV ) {
-  // this cast smells so bad
-  // https://github.com/FMS-Cat/automaton/issues/121
-  const automatonWithGUI = new AutomatonWithGUI(
-    automatonData,
-    {
-      gui: window.divAutomaton,
-      isPlaying: true,
-      fxDefinitions: automatonFxs,
-    }
-  );
-
-  automatonWithGUI.on( 'play', () => { music.isPlaying = true; } );
-  automatonWithGUI.on( 'pause', () => { music.isPlaying = false; } );
-  automatonWithGUI.on( 'seek', ( { time } ) => {
-    music.time = Math.max( 0.0, time );
-    automaton.reset();
-  } );
-
-  if ( module.hot ) {
-    module.hot.accept( './automaton.json', () => {
-      // we probably don't need this feature for now...
-      // See: https://github.com/FMS-Cat/automaton/issues/120
-      // automatonWithGUI.deserialize( automatonData );
-    } );
-  }
-
-  automaton = automatonWithGUI;
-} else {
-  // this cast smells so bad
-  // https://github.com/FMS-Cat/automaton/issues/121
-  automaton = new Automaton(
-    automatonData,
-    {
-      fxDefinitions: automatonFxs
-    }
-  );
-}
-
-// == scene ========================================================================================
-const dog = new Dog( music );
+const dog = new Dog();
 
 const canvasRenderTarget = new CanvasRenderTarget();
 
@@ -188,15 +89,10 @@ const environmentMap = new EnvironmentMap();
 dog.root.children.push( environmentMap.entity );
 
 // -- "objects" ------------------------------------------------------------------------------------
-const sphereParticles = new SphereParticles( {
-  particlesSqrt: 256,
-} );
+const sphereParticles = new SphereParticles();
 dog.root.children.push( sphereParticles.entity );
 
-const trails = new Trails( {
-  trails: 4096,
-  trailLength: 64,
-} );
+const trails = new Trails();
 dog.root.children.push( trails.entity );
 
 const rings = new Rings();
@@ -295,7 +191,6 @@ swap.swap();
 const glitch = new Glitch( {
   input: swap.i,
   target: swap.o,
-  automaton,
 } );
 dog.root.children.push( glitch.entity );
 
@@ -303,7 +198,6 @@ swap.swap();
 const pixelSorter = new PixelSorter( {
   input: swap.i,
   target: swap.o,
-  automaton,
 } );
 dog.root.children.push( pixelSorter.entity );
 
@@ -323,15 +217,17 @@ if ( process.env.DEV ) {
 
 // -- keyboards ------------------------------------------------------------------------------------
 if ( process.env.DEV ) {
+  const checkboxActive = getCheckboxActive();
+
   window.addEventListener( 'keydown', ( event ) => {
     if ( event.key === 'Escape' ) { // panic button
       dog.root.active = false;
       music.isPlaying = false;
-      window.checkActive!.checked = false;
+      checkboxActive.checked = false;
     }
   } );
 
-  window.checkActive!.addEventListener( 'input', ( event: any ) => {
+  checkboxActive.addEventListener( 'input', ( event: any ) => {
     dog.root.active = event.target.checked;
     music.isPlaying = event.target.checked;
   } );

src/utils/RandomTexture.ts

@@ -1,7 +1,6 @@
-import { GLCat, GLCatTexture } from '@fms-cat/glcat-ts';
 import { Xorshift } from '@fms-cat/experimental';
-import { gl, glCat } from '../heck/canvas';
-import { RANDOM_RESOLUTION, STATIC_RANDOM_RESOLUTION } from '../config';
+import GLCat, { GLCatTexture } from '@fms-cat/glcat-ts';
+import { gl } from '../globals/canvas';
 
 export class RandomTexture {
   private __texture: GLCatTexture<WebGL2RenderingContext>;
@@ -53,17 +52,3 @@ export class RandomTexture {
     );
   }
 }
-
-export const randomTexture = new RandomTexture(
-  glCat,
-  RANDOM_RESOLUTION[ 0 ],
-  RANDOM_RESOLUTION[ 1 ]
-);
-randomTexture.update();
-
-export const randomTextureStatic = new RandomTexture(
-  glCat,
-  STATIC_RANDOM_RESOLUTION[ 0 ],
-  STATIC_RANDOM_RESOLUTION[ 1 ]
-);
-randomTextureStatic.update();

src/window.d.ts

@@ -1,7 +0,0 @@
-interface Window {
-  divPath?: HTMLDivElement;
-  divAutomaton?: HTMLDivElement;
-  checkActive?: HTMLInputElement;
-  divComponentsUpdate?: HTMLDivElement;
-  divComponentsDraw?: HTMLDivElement;
-}