Next step require

nin/backend/dasbootgen.js

@@ -1,5 +1,6 @@
-const webpack = require('webpack');
+const ClosureCompiler = require('google-closure-compiler-js').webpack;
 const p = require('path');
+const webpack = require('webpack');
 
 
 async function dasbootGen(projectPath) {
@@ -11,7 +12,18 @@ async function dasbootGen(projectPath) {
       output: {
         path: p.join(projectPath, 'gen'),
         filename: 'dasBoot.js',
-      }
+      },
+      plugins: [
+        new ClosureCompiler({
+          options: {
+            languageIn: 'ECMASCRIPT6',
+            languageOut: 'ECMASCRIPT5',
+            compilationLevel: 'SIMPLE',
+            warningLevel: 'VERBOSE',
+            externs: ['GU', 'FILES', 'PROJECT', 'SHADERS', 'THREE'],
+          },
+        })
+      ]
     }).run(err => {
       err ? reject() : resolve();
     });

nin/dasBoot/BEATBEAN.js

@@ -6,7 +6,7 @@ const initBeatBean = function() {
   window.BEAN = 0;
   window.BEAT = false;
 
-  var BEATsPerMinute = PROJECT.music.bpm * PROJECT.music.subdivision;
+  var BEATsPerMinute = window.PROJECT.music.bpm * window.PROJECT.music.subdivision;
   var BEATsPerSecond = BEATsPerMinute / 60;
   var framesPerSecond = 60;
   framesPerBEAT = framesPerSecond / BEATsPerSecond;

nin/dasBoot/CameraController.js

@@ -1,3 +1,6 @@
+const PathController = require('./PathController');
+const THREE = require('./lib/three.module.js');
+
 function CameraController(rawPath) {
   this.camera = new THREE.PerspectiveCamera(45, 16/9, 1, 50000);
   this.rotVector = new THREE.Vector3(0, 0, 1);

nin/dasBoot/Loader.js

@@ -1,3 +1,5 @@
+const THREE = require('./lib/three.module.js');
+
 function Loader() {
   this.eventNames = {
     VIDEO: 'canplaythrough',
@@ -78,8 +80,8 @@ Loader.prototype.start = function(onprogress, oncomplete) {
         'webm': 'data:video/webm;base64,',
         'svg': 'data:image/svg+xml;base64,',
       }[item.filepath.slice(-3)];
-      console.log(that.id, item.filepath, prefix + (FILES[item.filepath] && FILES[item.filepath].slice(0, 10)));
-      item.element.src = prefix + FILES[item.filepath];
+      console.log(that.id, item.filepath, prefix + (window.FILES[item.filepath] && window.FILES[item.filepath].slice(0, 10)));
+      item.element.src = prefix + window.FILES[item.filepath];
     } else {
       item.element.crossOrigin = 'Anonymous';
       item.element.src = Loader.rootPath + item.filepath + '?_=' + Math.random();
@@ -88,8 +90,8 @@ Loader.prototype.start = function(onprogress, oncomplete) {
 
   this.itemsToAjax.forEach(function(item) {
     if(window.FILES) {
-      console.log(that.id, item.filepath, FILES[item.filepath] && atob(FILES[item.filepath]).slice(0, 10));
-      var bytes = atob(FILES[item.filepath]);
+      console.log(that.id, item.filepath, window.FILES[item.filepath] && atob(window.FILES[item.filepath]).slice(0, 10));
+      var bytes = atob(window.FILES[item.filepath]);
       if(item.options.responseType == 'arraybuffer') {
         var buffer = new ArrayBuffer(bytes.length);
         var bufferView = new Uint8Array(buffer);

nin/dasBoot/NIN.js

@@ -0,0 +1,88 @@
+const Loader = require('./Loader');
+
+class Input {
+  constructor(node) {
+    this.source = null;
+    this.node = node;
+    this.enabled = true;
+  }
+
+  getValue() {
+    if(!this.source) {
+      return null;
+    }
+    return this.source.getValue();
+  }
+}
+
+class Output {
+  constructor(node) {
+    this.destination = null;
+    this.node = node;
+  }
+
+  setValue(value) {
+    this.value = value;
+  }
+
+  getValue() {
+    return this.value;
+  }
+}
+
+class Node {
+  constructor(id, options) {
+    this.id = id;
+    this.inputs = options.inputs || {};
+    this.outputs = options.outputs || {};
+
+    for(var key in this.inputs) {
+      this.inputs[key].node = this;
+    }
+    for(var key in this.outputs) {
+      this.outputs[key].node = this;
+    }
+
+    this.oldActive = false;
+    this.active = false;
+  }
+
+  resize() {
+  }
+
+  render() {
+  }
+
+  update() {
+  }
+}
+
+
+class TextureInput extends Input {}
+
+class TextureOutput extends Output {}
+
+class TextureNode extends Node {
+  constructor(id, options) {
+    super(id, {
+      inputs: {},
+      outputs: {
+        A: new TextureOutput()
+      }
+    });
+    var that = this;
+    this.texture = Loader.loadTexture(options.path);
+    this.outputs.A.setValue(this.texture);
+  }
+}
+
+module.exports = TextureNode;
+
+module.exports = {
+  Input,
+  Output,
+  Node,
+  TextureInput,
+  TextureOutput,
+  TextureNode,
+};

nin/dasBoot/NodeManager.js

@@ -8,7 +8,7 @@ class NodeManager {
     nodeInfo.options = nodeInfo.options || {};
 
     const nodeConstructor = nodeInfo.type.slice(0, 4) === 'NIN.' ?
-      NIN[nodeInfo.type.slice(4)]
+      window['NIN'][nodeInfo.type.slice(4)]
       : window[nodeInfo.type];
 
     if (nodeConstructor === undefined) {

nin/dasBoot/PathController.js

@@ -1,3 +1,6 @@
+const {lerp, smoothstep, easeIn, easeOut} = require('./interpolations');
+const THREE = require('./lib/three.module.js');
+
 function PathController(raw_path, path_type) {
   this.path_type = path_type || '3D';
 

nin/dasBoot/RootNode.js

@@ -1,3 +1,6 @@
+const NIN = require('./NIN');
+const THREE = require('./lib/three.module.js');
+
 class RootNode extends NIN.Node {
   constructor(id, options) {
     super(id, {

nin/dasBoot/ShaderNode.js

@@ -1,3 +1,6 @@
+const NIN = require('./NIN');
+const THREE = require('./lib/three.module.js');
+
 class ShaderNode extends NIN.Node {
   constructor(id, options) {
     super(id, {
@@ -16,7 +19,7 @@ class ShaderNode extends NIN.Node {
     });
 
     const shader = typeof options.shader === 'string'
-      ? SHADERS[options.shader] : options.shader;
+      ? window.SHADERS[options.shader] : options.shader;
 
     this.quad = new THREE.Mesh(
       new THREE.PlaneBufferGeometry(2, 2),
@@ -31,7 +34,7 @@ class ShaderNode extends NIN.Node {
   }
 
   resize() {
-    this.renderTarget.setSize(16 * GU, 9 * GU);
+    this.renderTarget.setSize(16 * window.GU, 9 * window.GU);
   }
 
   render(renderer) {

nin/dasBoot/THREENode.js

@@ -1,3 +1,8 @@
+const CameraController = require('./CameraController');
+const Loader = require('./Loader');
+const NIN = require('./NIN');
+const THREE = require('./lib/three.module.js');
+
 class THREENode extends NIN.Node {
   constructor(id, options) {
     super(id, {
@@ -30,7 +35,7 @@ class THREENode extends NIN.Node {
   }
 
   resize() {
-    this.renderTarget.setSize(16 * GU, 9 * GU);
+    this.renderTarget.setSize(16 * window.GU, 9 * window.GU);
   }
 
   render(renderer) {

nin/dasBoot/bootstrap.js

@@ -1,58 +1,37 @@
-window.THREE = require('./lib/00_three');
-require('./lib/01_EffectComposer');
-require('./lib/BloomPass');
-require('./lib/ClearPass');
+const THREE = window['THREE'] = require('./lib/three.module.js');
 require('./lib/ConvolutionShader');
-require('./lib/CopyShader');
-require('./lib/ImprovedNoise');
-require('./lib/MaskPass');
-require('./lib/MTLLoader');
-require('./lib/OBJLoader');
-require('./lib/RenderPass');
-require('./lib/ShaderPass');
-
-const NIN = window['NIN'] = window['NIN'] || {}; 
-NIN.Input = require('./input');
-NIN.TextureInput = require('./TextureInput');
-
-NIN.Output = require('./output');
-NIN.TextureOutput = require('./TextureOutput');
-
-NIN.Node = require('./node');
-NIN.TextureNode = require('./TextureNode');
+
+const NIN = window['NIN'] = require('./NIN');
 NIN.RootNode = require('./RootNode');
 NIN.THREENode = require('./THREENode');
 NIN.ShaderNode = require('./ShaderNode');
 
 const {initBeatBean, updateBeatBean} = require('./BEATBEAN');
-window.initBeatBean = initBeatBean;
-window.updateBeatBean = updateBeatBean;
+window['initBeatBean'] = initBeatBean;
+window['updateBeatBean'] = updateBeatBean;
 
 const {lerp, clamp, smoothstep, easeIn, easeOut} = require('./interpolations');
-window.lerp = lerp;
-window.clamp = clamp;
-window.smoothstep = smoothstep;
-window.easeIn = easeIn;
-window.easeOut = easeOut;
-
-const {requestAnimFrame, makeFullscreen, audioContext} = require('./shims.js');
-window.requestAnimFrame = requestAnimFrame;
-window.makeFullscreen = makeFullscreen;
-window.audioContext = audioContext;
-
-window.Random = require('./Random');
-window.PathController = require('./PathController');
-window.CameraController = require('./CameraController');
-window.Loader = require('./Loader');
-window.createLoop = require('./loop');
-window.loadMusic = require('./music');
-window.NodeManager = require('./NodeManager');
+window['lerp'] = lerp;
+window['clamp'] = clamp;
+window['smoothstep'] = smoothstep;
+window['easeIn'] = easeIn;
+window['easeOut'] = easeOut;
+
+const {requestAnimFrame, makeFullscreen} = require('./shims.js');
+window['requestAnimFrame'] = requestAnimFrame;
+window['makeFullscreen'] = makeFullscreen;
+
+window['Random'] = require('./Random');
+window['PathController'] = require('./PathController');
+const Loader = window['Loader'] = require('./Loader');
+const loadMusic = require('./music');
+const NodeManager = window['NodeManager'] = require('./NodeManager');
 
 window['bootstrap'] = function(options) {
   options = options || {};
 
   var demo = {};
-  window.demo = demo;
+  window['demo'] = demo;
 
   var container = document.body;
 
@@ -110,15 +89,15 @@ window['bootstrap'] = function(options) {
     width = width || rect.width;
     height = height || rect.height;
     if (width / height > 16 / 9) {
-      GU = (height / 9);
+      window.GU = (height / 9);
     } else {
-      GU = (width / 16);
+      window.GU = (width / 16);
     }
-    demo.renderer.setSize(16 * GU, 9 * GU);
+    demo.renderer.setSize(16 * window.GU, 9 * window.GU);
     demo.renderer.domElement.style.zIndex = 10;
     demo.renderer.domElement.style.position = 'absolute';
-    demo.renderer.domElement.style.margin = ((rect.height - 9 * GU) / 2) +
-      'px 0 0 ' + ((rect.width - 16 * GU) / 2) + 'px';
+    demo.renderer.domElement.style.margin = ((rect.height - 9 * window.GU) / 2) +
+      'px 0 0 ' + ((rect.width - 16 * window.GU) / 2) + 'px';
     demo.nm.resize();
     demo.update(currentFrame);
     demo.render(demo.renderer, 0);
@@ -131,6 +110,39 @@ window['bootstrap'] = function(options) {
 
   demo.music = loadMusic();
 
+  function createLoop(options) {
+    var frameLength = 1000 / (options.frameRateInHz || 60);
+    var render = options.render;
+    var update = options.update;
+    var renderer = options.renderer;
+    var music = options.music;
+
+    function Looper() {
+      this.time = 0;
+      this.oldTime = 0;
+      this.deltaTime = 0;
+      this.currentFrame = 0;
+      this.frameLength = frameLength;
+
+      var that = this;
+      this.loop = function() {
+        that.time = music.getCurrentTime() * 1000;
+        that.deltaTime += that.time - that.oldTime;
+        that.oldTime = that.time;
+        while (that.deltaTime >= frameLength) {
+          that.deltaTime -= frameLength;
+          demo.music._calculateFFT();
+          updateBeatBean(that.currentFrame);
+          update(that.currentFrame++);
+        }
+        render(renderer, that.deltaTime / frameLength);
+        requestAnimFrame(that.loop);
+      };
+    }
+
+    return new Looper();
+  }
+
   demo.looper = createLoop({
     render: demo.render,
     update: demo.update,