Merge branch 'master' of github.com:mattdesl/jsconf-eu-prototype

src/createArtwork.js

@@ -27,6 +27,7 @@ function createArtwork (canvas, params = {}) {
   const useFullscreen = params.fullscreen !== false;
 
   const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
+  renderer.sortObjects = false;
 
   const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, -100, 100);
   const scene = new THREE.Scene();
@@ -61,10 +62,10 @@ function createArtwork (canvas, params = {}) {
     canvas,
     sceneBounds: new THREE.Box2(),
     unitScale: new THREE.Vector2(1, 1),
-    colorPalette: colorPalettes.light
+    colorPalette: colorPalettes.dark
     // will contain some other properties for scenes to use, like width/height
   };
-  
+
   const tickFPS = 30;
 
   let raf;
@@ -93,23 +94,30 @@ function createArtwork (canvas, params = {}) {
         return assets;
       });
     },
-    start () {
+    start (opt = {}) {
       if (!app.assets) {
         console.error('[canvas] Assets have not yet been loaded, must await load() before start()');
       }
       if (!hasResized) {
         console.error('[canvas] You must call artwork.resize() at least once before artwork.start()');
       }
+      let needsStart = false;
       if (!hasInit) {
+        needsStart = true;
         createScene(scene);
         draw();
         hasInit = true;
       }
-      start();
+      resume();
+      if (needsStart) traverse('onTrigger', 'start', opt);
     },
     clear,
     reset,
     stop,
+    bounce,
+    spawn () {
+
+    },
     randomize () {
       traverse('onTrigger', 'randomize');
     },
@@ -172,6 +180,30 @@ function createArtwork (canvas, params = {}) {
     draw();
   }
 
+  function bounce () {
+    const scale = { value: scene.scale.x };
+    anime({
+      targets: scale,
+      easing: 'easeInQuad',
+      value: 0.9,
+      duration: 250,
+      update: () => {
+        scene.scale.setScalar(scale.value);
+      },
+      complete: () => {
+        anime({
+          duration: 250,
+          targets: scale,
+          easing: 'easeOutQuad',
+          value: 1,
+          update: () => {
+            scene.scale.setScalar(scale.value);
+          }
+        });
+      }
+    });
+  }
+
   function clear () {
     // stop all animations, clear shapes
     stoppedAnimations.length = 0;
@@ -184,14 +216,13 @@ function createArtwork (canvas, params = {}) {
     // clear all animations and shapes and re-run loop
     clear();
     resetRandomSeed();
-    traverse('onTrigger', 'start');
   }
 
   function resetRandomSeed () {
     RND.setSeed(RND.getRandomSeed());
   }
 
-  function start () {
+  function resume () {
     if (running) return;
     stoppedAnimations.forEach(anim => anim.play());
     stoppedAnimations.length = 0;

src/index.js

@@ -42,6 +42,10 @@ artwork.load().then(() => {
       artwork.clear();
     } else if (key === 't') {
       artwork.swapPalettes();
+    } else if (key === 'b') {
+      artwork.bounce();
+    } else if (key === 'y') {
+      artwork.randomize();
     }
   });
 });

src/object/Shape.js

@@ -54,8 +54,6 @@ module.exports = class Shape extends BaseObject {
     // this.acceleration = new THREE.Vector2();
     this.friction = 0.99999;
 
-    // avoid z-fighting a bit if possible?
-    this.position.z = RND.randomFloat(0, 1);
     this.materialType = null;
     this.shapeType = null;
   }

src/object/ZigZag.js

@@ -43,13 +43,20 @@ module.exports = class ZigZag extends BaseObject {
       color: defined(opt.color, { r: 0, g: 0, b: 0 }),
       lineWidth: defined(opt.lineWidth, 0.04)
     });
+    material.depthTest = false;
+    material.depthWrite = false;
+    material.transparent = true; // for layering
 
     this.mesh = new THREE.Mesh(this.line.geometry, material);
     this.mesh.frustumCulled = false;
 
     this.add(this.mesh);
   }
 
+  destroy () {
+    this.mesh.geometry.dispose();
+  }
+
   randomize(opt = {}) {
     if (opt.color) this.mesh.material.uniforms.color.value = opt.color;
     if (typeof opt.lineWidth === 'number') this.mesh.material.uniforms.lineWidth.value = opt.lineWidth;

src/scene/MainScene.js

@@ -56,25 +56,26 @@ module.exports = class TestScene extends THREE.Object3D {
     this.app = app;
 
     const maxCapacity = 100;
+    this.poolContainer = new THREE.Group();
+    this.add(this.poolContainer);
     this.pool = newArray(maxCapacity).map(() => {
       const mesh = new Shape(app);
       mesh.visible = false;
-      this.add(mesh);
+      this.poolContainer.add(mesh);
       return mesh;
     });
 
-    this.textCollider = colliderCircle({ radius: 1.25 });
+    this.textCollider = colliderCircle({ radius: 1.5 });
     if (this.textCollider.mesh) this.add(this.textCollider.mesh);
 
-    this.start();
-
-    touches(this.app.canvas).on('move', (ev, pos) => {
-      const x = (pos[0] / this.app.width) * 2 - 1;
-      const y = (pos[1] / this.app.height) * -2 + 1;
-      const vec = new THREE.Vector3(x, y, 0);
-      vec.unproject(this.app.camera);
-      this.textCollider.center.set(vec.x, vec.y);
-    });
+    // Leave this off for now, text is assumed to appear in center
+    // touches(this.app.canvas).on('move', (ev, pos) => {
+    //   const x = (pos[0] / this.app.width) * 2 - 1;
+    //   const y = (pos[1] / this.app.height) * -2 + 1;
+    //   const vec = new THREE.Vector3(x, y, 0);
+    //   vec.unproject(this.app.camera);
+    //   this.textCollider.center.set(vec.x, vec.y);
+    // });
   }
 
   clear () {
@@ -86,6 +87,7 @@ module.exports = class TestScene extends THREE.Object3D {
   }
 
   start () {
+    console.log('start');
     const app = this.app;
     const pool = this.pool;
 
@@ -211,12 +213,19 @@ module.exports = class TestScene extends THREE.Object3D {
 
   onTrigger (event) {
     if (event === 'randomize') {
-      this.pool.forEach(shape => {
-        if (shape.active) {
-          const { color, altColor, materialType, shapeType } = getRandomMaterialProps({ colors: this.app.colorPalette.colors });
-          shape.randomize({ materialType, color, altColor, shapeType });
-        }
+      this.pool.forEach(p => {
+        p.renderOrder = RND.randomInt(-10, 10);
+      });
+      console.log('sort')
+      this.poolContainer.children.sort((a, b) => {
+        return a.renderOrder - b.renderOrder;
       });
+      // this.pool.forEach(shape => {
+      //   if (shape.active) {
+      //     const { color, altColor, materialType, shapeType } = getRandomMaterialProps({ colors: this.app.colorPalette.colors });
+      //     shape.randomize({ materialType, color, altColor, shapeType });
+      //   }
+      // });
     } else if (event === 'palette') {
       this.pool.forEach(shape => {
         if (shape.active) {

src/scene/ZigZagScene.js

@@ -13,18 +13,18 @@ module.exports = class ZigZagScene extends THREE.Object3D {
     this.app = app;
 
     this.createPool();
-    this.start();
   }
 
   createPool() {
     const maxCapacity = 5;
 
-    this.pool = newArray(maxCapacity).map(() => {
+    this.pool = newArray(maxCapacity).map((_, i) => {
       const mesh = new ZigZag(this.app, {
         segments: RND.randomInt(100, 200),
         speed: RND.randomFloat(0.75, 1.75)
       });
 
+      mesh.active = false;
       mesh.visible = false;
       this.add(mesh);
 
@@ -33,7 +33,10 @@ module.exports = class ZigZagScene extends THREE.Object3D {
   }
 
   destroyPool() {
+    // NOTE: This is pretty expensive as it means pushing a lot of GPU data..
+    // it will cause jank when run during sim
     this.pool.forEach(p => {
+      p.destroy();
       this.remove(p);
       p = undefined;
     });
@@ -45,6 +48,8 @@ module.exports = class ZigZagScene extends THREE.Object3D {
     this.pool.forEach(p => {
       p.visible = false;
       p.active = false;
+      p.wasVisible = false;
+      p.reset();
     });
   }
 
@@ -55,8 +60,8 @@ module.exports = class ZigZagScene extends THREE.Object3D {
   onTrigger(event) {
     if (event === 'randomize') {
       // recreate pool to get new random zigzags
-      this.destroyPool();
-      this.createPool();
+      this.clear();
+      this.start();
     } else if (event === 'palette') {
       this.pool.forEach(shape => {
         const { color } = pickColors(this.app.colorPalette.colors);