meshline on face

2 files changed, 669 insertions, 63 deletions

diff --git a/site/assets/js/vendor/three.meshline.js b/site/assets/js/vendor/three.meshline.js
new file mode 100644
index 00000000..c6e998e3
--- /dev/null
+++ b/site/assets/js/vendor/three.meshline.js
@@ -0,0 +1,486 @@
+;(function() {
+
+"use strict";
+
+var root = this
+
+var has_require = typeof require !== 'undefined'
+
+var THREE = root.THREE || has_require && require('three')
+if( !THREE )
+  throw new Error( 'MeshLine requires three.js' )
+
+function MeshLine() {
+
+  this.positions = [];
+
+  this.previous = [];
+  this.next = [];
+  this.side = [];
+  this.width = [];
+  this.indices_array = [];
+  this.uvs = [];
+  this.counters = [];
+  this.geometry = new THREE.BufferGeometry();
+
+  this.widthCallback = null;
+
+}
+
+MeshLine.prototype.setGeometry = function( g, c ) {
+
+  this.widthCallback = c;
+
+  this.positions = [];
+  this.counters = [];
+
+  if( g instanceof THREE.Geometry ) {
+    for( var j = 0; j < g.vertices.length; j++ ) {
+      var v = g.vertices[ j ];
+      var c = j/g.vertices.length;
+      this.positions.push( v.x, v.y, v.z );
+      this.positions.push( v.x, v.y, v.z );
+      this.counters.push(c);
+      this.counters.push(c);
+    }
+  }
+
+  if( g instanceof THREE.BufferGeometry ) {
+    // read attribute positions ?
+  }
+
+  if( g instanceof Float32Array || g instanceof Array ) {
+    for( var j = 0; j < g.length; j += 3 ) {
+      var c = j/g.length;
+      this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
+      this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
+      this.counters.push(c);
+      this.counters.push(c);
+    }
+  }
+
+  this.process();
+
+}
+
+MeshLine.prototype.compareV3 = function( a, b ) {
+
+  var aa = a * 6;
+  var ab = b * 6;
+  return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] );
+
+}
+
+MeshLine.prototype.copyV3 = function( a ) {
+
+  var aa = a * 6;
+  return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ];
+
+}
+
+MeshLine.prototype.process = function() {
+
+  var l = this.positions.length / 6;
+
+  this.previous = [];
+  this.next = [];
+  this.side = [];
+  this.width = [];
+  this.indices_array = [];
+  this.uvs = [];
+
+  for( var j = 0; j < l; j++ ) {
+    this.side.push( 1 );
+    this.side.push( -1 );
+  }
+
+  var w;
+  for( var j = 0; j < l; j++ ) {
+    if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) );
+    else w = 1;
+    this.width.push( w );
+    this.width.push( w );
+  }
+
+  for( var j = 0; j < l; j++ ) {
+    this.uvs.push( j / ( l - 1 ), 0 );
+    this.uvs.push( j / ( l - 1 ), 1 );
+  }
+
+  var v;
+
+  if( this.compareV3( 0, l - 1 ) ){
+    v = this.copyV3( l - 2 );
+  } else {
+    v = this.copyV3( 0 );
+  }
+  this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+  this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+  for( var j = 0; j < l - 1; j++ ) {
+    v = this.copyV3( j );
+    this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+    this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+  }
+
+  for( var j = 1; j < l; j++ ) {
+    v = this.copyV3( j );
+    this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+    this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+  }
+
+  if( this.compareV3( l - 1, 0 ) ){
+    v = this.copyV3( 1 );
+  } else {
+    v = this.copyV3( l - 1 );
+  }
+  this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+  this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+
+  for( var j = 0; j < l - 1; j++ ) {
+    var n = j * 2;
+    this.indices_array.push( n, n + 1, n + 2 );
+    this.indices_array.push( n + 2, n + 1, n + 3 );
+  }
+
+  if (!this.attributes) {
+    this.attributes = {
+      position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ),
+      previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ),
+      next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ),
+      side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ),
+      width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ),
+      uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ),
+      index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ),
+      counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 )
+    }
+  } else {
+    this.attributes.position.copyArray(new Float32Array(this.positions));
+    this.attributes.position.needsUpdate = true;
+    this.attributes.previous.copyArray(new Float32Array(this.previous));
+    this.attributes.previous.needsUpdate = true;
+    this.attributes.next.copyArray(new Float32Array(this.next));
+    this.attributes.next.needsUpdate = true;
+    this.attributes.side.copyArray(new Float32Array(this.side));
+    this.attributes.side.needsUpdate = true;
+    this.attributes.width.copyArray(new Float32Array(this.width));
+    this.attributes.width.needsUpdate = true;
+    this.attributes.uv.copyArray(new Float32Array(this.uvs));
+    this.attributes.uv.needsUpdate = true;
+    this.attributes.index.copyArray(new Uint16Array(this.indices_array));
+    this.attributes.index.needsUpdate = true;
+    }
+
+  this.geometry.addAttribute( 'position', this.attributes.position );
+  this.geometry.addAttribute( 'previous', this.attributes.previous );
+  this.geometry.addAttribute( 'next', this.attributes.next );
+  this.geometry.addAttribute( 'side', this.attributes.side );
+  this.geometry.addAttribute( 'width', this.attributes.width );
+  this.geometry.addAttribute( 'uv', this.attributes.uv );
+  this.geometry.addAttribute( 'counters', this.attributes.counters );
+
+  this.geometry.setIndex( this.attributes.index );
+
+}
+
+function memcpy (src, srcOffset, dst, dstOffset, length) {
+  var i
+
+  src = src.subarray || src.slice ? src : src.buffer
+  dst = dst.subarray || dst.slice ? dst : dst.buffer
+
+  src = srcOffset ? src.subarray ?
+  src.subarray(srcOffset, length && srcOffset + length) :
+  src.slice(srcOffset, length && srcOffset + length) : src
+
+  if (dst.set) {
+    dst.set(src, dstOffset)
+  } else {
+    for (i=0; i<src.length; i++) {
+      dst[i + dstOffset] = src[i]
+    }
+  }
+
+  return dst
+}
+
+/**
+ * Fast method to advance the line by one position.  The oldest position is removed.
+ * @param position
+ */
+MeshLine.prototype.advance = function(position) {
+
+  var positions = this.attributes.position.array;
+  var previous = this.attributes.previous.array;
+  var next = this.attributes.next.array;
+  var l = positions.length;
+
+  // PREVIOUS
+  memcpy( positions, 0, previous, 0, l );
+
+  // POSITIONS
+  memcpy( positions, 6, positions, 0, l - 6 );
+
+  positions[l - 6] = position.x;
+  positions[l - 5] = position.y;
+  positions[l - 4] = position.z;
+  positions[l - 3] = position.x;
+  positions[l - 2] = position.y;
+  positions[l - 1] = position.z;
+
+    // NEXT
+  memcpy( positions, 6, next, 0, l - 6 );
+
+  next[l - 6]  = position.x;
+  next[l - 5]  = position.y;
+  next[l - 4]  = position.z;
+  next[l - 3]  = position.x;
+  next[l - 2]  = position.y;
+  next[l - 1]  = position.z;
+
+  this.attributes.position.needsUpdate = true;
+  this.attributes.previous.needsUpdate = true;
+  this.attributes.next.needsUpdate = true;
+
+};
+
+function MeshLineMaterial( parameters ) {
+
+  var vertexShaderSource = [
+'precision highp float;',
+'',
+'attribute vec3 position;',
+'attribute vec3 previous;',
+'attribute vec3 next;',
+'attribute float side;',
+'attribute float width;',
+'attribute vec2 uv;',
+'attribute float counters;',
+'',
+'uniform mat4 projectionMatrix;',
+'uniform mat4 modelViewMatrix;',
+'uniform vec2 resolution;',
+'uniform float lineWidth;',
+'uniform vec3 color;',
+'uniform float opacity;',
+'uniform float near;',
+'uniform float far;',
+'uniform float sizeAttenuation;',
+'',
+'varying vec2 vUV;',
+'varying vec4 vColor;',
+'varying float vCounters;',
+'',
+'vec2 fix( vec4 i, float aspect ) {',
+'',
+'    vec2 res = i.xy / i.w;',
+'    res.x *= aspect;',
+'  vCounters = counters;',
+'    return res;',
+'',
+'}',
+'',
+'void main() {',
+'',
+'    float aspect = resolution.x / resolution.y;',
+'  float pixelWidthRatio = 1. / (resolution.x * projectionMatrix[0][0]);',
+'',
+'    vColor = vec4( color, opacity );',
+'    vUV = uv;',
+'',
+'    mat4 m = projectionMatrix * modelViewMatrix;',
+'    vec4 finalPosition = m * vec4( position, 1.0 );',
+'    vec4 prevPos = m * vec4( previous, 1.0 );',
+'    vec4 nextPos = m * vec4( next, 1.0 );',
+'',
+'    vec2 currentP = fix( finalPosition, aspect );',
+'    vec2 prevP = fix( prevPos, aspect );',
+'    vec2 nextP = fix( nextPos, aspect );',
+'',
+'  float pixelWidth = finalPosition.w * pixelWidthRatio;',
+'    float w = 1.8 * pixelWidth * lineWidth * width;',
+'',
+'    if( sizeAttenuation == 1. ) {',
+'        w = 1.8 * lineWidth * width;',
+'    }',
+'',
+'    vec2 dir;',
+'    if( nextP == currentP ) dir = normalize( currentP - prevP );',
+'    else if( prevP == currentP ) dir = normalize( nextP - currentP );',
+'    else {',
+'        vec2 dir1 = normalize( currentP - prevP );',
+'        vec2 dir2 = normalize( nextP - currentP );',
+'        dir = normalize( dir1 + dir2 );',
+'',
+'        vec2 perp = vec2( -dir1.y, dir1.x );',
+'        vec2 miter = vec2( -dir.y, dir.x );',
+'        //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );',
+'',
+'    }',
+'',
+'    //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;',
+'    vec2 normal = vec2( -dir.y, dir.x );',
+'    normal.x /= aspect;',
+'    normal *= .5 * w;',
+'',
+'    vec4 offset = vec4( normal * side, 0.0, 1.0 );',
+'    finalPosition.xy += offset.xy;',
+'',
+'    gl_Position = finalPosition;',
+'',
+'}' ];
+
+  var fragmentShaderSource = [
+    '#extension GL_OES_standard_derivatives : enable',
+'precision mediump float;',
+'',
+'uniform sampler2D map;',
+'uniform sampler2D alphaMap;',
+'uniform float useMap;',
+'uniform float useAlphaMap;',
+'uniform float useDash;',
+'uniform float dashArray;',
+'uniform float dashOffset;',
+'uniform float dashRatio;',
+'uniform float visibility;',
+'uniform float alphaTest;',
+'uniform vec2 repeat;',
+'',
+'varying vec2 vUV;',
+'varying vec4 vColor;',
+'varying float vCounters;',
+'',
+'void main() {',
+'',
+'    vec4 c = vColor;',
+'    if( useMap == 1. ) c *= texture2D( map, vUV * repeat );',
+'    if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;',
+'    if( c.a < alphaTest ) discard;',
+'    if( useDash == 1. ){',
+'        c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));',
+'    }',
+'    gl_FragColor = c;',
+'    gl_FragColor.a *= step(vCounters, visibility);',
+'}' ];
+
+  function check( v, d ) {
+    if( v === undefined ) return d;
+    return v;
+  }
+
+  THREE.Material.call( this );
+
+  parameters = parameters || {};
+
+  this.lineWidth = check( parameters.lineWidth, 1 );
+  this.map = check( parameters.map, null );
+  this.useMap = check( parameters.useMap, 0 );
+  this.alphaMap = check( parameters.alphaMap, null );
+  this.useAlphaMap = check( parameters.useAlphaMap, 0 );
+  this.color = check( parameters.color, new THREE.Color( 0xffffff ) );
+  this.opacity = check( parameters.opacity, 1 );
+  this.resolution = check( parameters.resolution, new THREE.Vector2( 1, 1 ) );
+  this.sizeAttenuation = check( parameters.sizeAttenuation, 1 );
+  this.near = check( parameters.near, 1 );
+  this.far = check( parameters.far, 1 );
+  this.dashArray = check( parameters.dashArray, 0 );
+  this.dashOffset = check( parameters.dashOffset, 0 );
+  this.dashRatio = check( parameters.dashRatio, 0.5 );
+  this.useDash = ( this.dashArray !== 0 ) ? 1 : 0;
+  this.visibility = check( parameters.visibility, 1 );
+  this.alphaTest = check( parameters.alphaTest, 0 );
+  this.repeat = check( parameters.repeat, new THREE.Vector2( 1, 1 ) );
+
+  var material = new THREE.RawShaderMaterial( {
+    uniforms:{
+      lineWidth: { type: 'f', value: this.lineWidth },
+      map: { type: 't', value: this.map },
+      useMap: { type: 'f', value: this.useMap },
+      alphaMap: { type: 't', value: this.alphaMap },
+      useAlphaMap: { type: 'f', value: this.useAlphaMap },
+      color: { type: 'c', value: this.color },
+      opacity: { type: 'f', value: this.opacity },
+      resolution: { type: 'v2', value: this.resolution },
+      sizeAttenuation: { type: 'f', value: this.sizeAttenuation },
+      near: { type: 'f', value: this.near },
+      far: { type: 'f', value: this.far },
+      dashArray: { type: 'f', value: this.dashArray },
+      dashOffset: { type: 'f', value: this.dashOffset },
+      dashRatio: { type: 'f', value: this.dashRatio },
+      useDash: { type: 'f', value: this.useDash },
+      visibility: {type: 'f', value: this.visibility},
+      alphaTest: {type: 'f', value: this.alphaTest},
+      repeat: { type: 'v2', value: this.repeat }
+    },
+    vertexShader: vertexShaderSource.join( '\r\n' ),
+    fragmentShader: fragmentShaderSource.join( '\r\n' )
+  });
+
+  delete parameters.lineWidth;
+  delete parameters.map;
+  delete parameters.useMap;
+  delete parameters.alphaMap;
+  delete parameters.useAlphaMap;
+  delete parameters.color;
+  delete parameters.opacity;
+  delete parameters.resolution;
+  delete parameters.sizeAttenuation;
+  delete parameters.near;
+  delete parameters.far;
+  delete parameters.dashArray;
+  delete parameters.dashOffset;
+  delete parameters.dashRatio;
+  delete parameters.visibility;
+  delete parameters.alphaTest;
+  delete parameters.repeat;
+
+  material.type = 'MeshLineMaterial';
+
+  material.setValues( parameters );
+
+  return material;
+
+};
+
+MeshLineMaterial.prototype = Object.create( THREE.Material.prototype );
+MeshLineMaterial.prototype.constructor = MeshLineMaterial;
+
+MeshLineMaterial.prototype.copy = function ( source ) {
+
+  THREE.Material.prototype.copy.call( this, source );
+
+  this.lineWidth = source.lineWidth;
+  this.map = source.map;
+  this.useMap = source.useMap;
+  this.alphaMap = source.alphaMap;
+  this.useAlphaMap = source.useAlphaMap;
+  this.color.copy( source.color );
+  this.opacity = source.opacity;
+  this.resolution.copy( source.resolution );
+  this.sizeAttenuation = source.sizeAttenuation;
+  this.near = source.near;
+  this.far = source.far;
+  this.dashArray.copy( source.dashArray );
+  this.dashOffset.copy( source.dashOffset );
+  this.dashRatio.copy( source.dashRatio );
+  this.useDash = source.useDash;
+  this.visibility = source.visibility;
+  this.alphaTest = source.alphaTest;
+  this.repeat.copy( source.repeat );
+
+  return this;
+
+};
+
+if( typeof exports !== 'undefined' ) {
+  if( typeof module !== 'undefined' && module.exports ) {
+    exports = module.exports = { MeshLine: MeshLine, MeshLineMaterial: MeshLineMaterial };
+  }
+  exports.MeshLine = MeshLine;
+  exports.MeshLineMaterial = MeshLineMaterial;
+}
+else {
+  root.MeshLine = MeshLine;
+  root.MeshLineMaterial = MeshLineMaterial;
+}
+
+}).call(this);
\ No newline at end of file
diff --git a/site/assets/test/face.html b/site/assets/test/face.html
index 241e7348..27e6c0c7 100644
--- a/site/assets/test/face.html
+++ b/site/assets/test/face.html
@@ -1,49 +1,187 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 <title>face points</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <style>
+html, body { margin: 0; padding: 0; font-family: sans-serif; color: white; } 
+.currentFace { position: absolute; bottom: 10px; right: 10px; }
 </style>
 </head>
 <body>
 <div id="container"></div>
+<div class="currentFace"></div>
 <script src="../js/vendor/three.min.js"></script>
+<script src="../js/vendor/three.meshline.js"></script>
 <script>
-var daisy = [[54.0,88.0,-86.4166488647461],[61.0,117.0,-94.31047821044922],[67.0,139.0,-100.80580139160156],[74.0,158.0,-104.98035430908203],[80.0,183.0,-102.41091918945312],[86.0,206.0,-88.20156860351562],[93.0,225.0,-67.11590576171875],[105.0,247.0,-44.081058502197266],[131.0,256.0,-27.08724594116211],[159.0,247.0,-24.630205154418945],[188.0,228.0,-33.128997802734375],[207.0,209.0,-43.85726547241211],[223.0,183.0,-49.67991256713867],[232.0,158.0,-47.00068664550781],[236.0,136.0,-39.36989212036133],[239.0,113.0,-29.353200912475586],[239.0,88.0,-19.166582107543945],[45.0,94.0,9.0930757522583],[48.0,94.0,28.99441146850586],[61.0,94.0,43.41041564941406],[70.0,101.0,52.37288284301758],[80.0,104.0,56.78023910522461],[128.0,104.0,73.55677795410156],[137.0,98.0,77.24374389648438],[153.0,94.0,77.57779693603516],[172.0,94.0,73.60804748535156],[188.0,94.0,61.270816802978516],[105.0,132.0,54.630958557128906],[102.0,155.0,56.62538146972656],[99.0,171.0,60.56704330444336],[102.0,183.0,56.47877883911133],[96.0,180.0,22.875110626220703],[102.0,183.0,28.277494430541992],[112.0,187.0,32.87094497680664],[121.0,183.0,35.1693115234375],[128.0,180.0,34.83551025390625],[61.0,113.0,16.009923934936523],[64.0,113.0,29.9821834564209],[77.0,113.0,34.802860260009766],[89.0,120.0,32.677188873291016],[77.0,123.0,31.01885223388672],[67.0,123.0,24.31825828552246],[134.0,123.0,50.15107727050781],[143.0,117.0,60.02939987182617],[156.0,117.0,63.61414337158203],[169.0,120.0,55.770992279052734],[159.0,126.0,57.6904411315918],[147.0,126.0,55.69097900390625],[86.0,193.0,-17.841793060302734],[93.0,196.0,4.937897682189941],[105.0,196.0,22.647642135620117],[115.0,199.0,26.378101348876953],[121.0,196.0,29.354434967041016],[143.0,196.0,24.816020965576172],[166.0,193.0,10.712540626525879],[147.0,212.0,12.046388626098633],[134.0,221.0,11.838120460510254],[118.0,225.0,8.037301063537598],[105.0,221.0,2.2057247161865234],[96.0,212.0,-6.710599899291992],[89.0,193.0,-17.244544982910156],[105.0,202.0,12.899520874023438],[115.0,202.0,19.937997817993164],[131.0,202.0,22.065942764282227],[163.0,193.0,9.6935396194458],[131.0,212.0,14.528266906738281],[118.0,212.0,11.355504035949707],[105.0,212.0,5.307169437408447]]
 var container
 var camera, controls, scene, renderer
-var mouse = new THREE.Vector2()
-var offset = new THREE.Vector3( 10, 10, 10 )
+var mouse = new THREE.Vector2(0.5, 0.5)
+var mouseTarget = new THREE.Vector2(0.5, 0.5)
+var POINT_SCALE = 1.8
+var FACE_POINT_COUNT = 68
+var SWAP_TIME = 500
+var cubes = [], meshes = []
+var faceBuffer = makeFaceBuffer()
+function makeFaceBuffer() {
+  var a = new Array(FACE_POINT_COUNT)
+  for (let i = 0; i < FACE_POINT_COUNT; i++) {
+    a[i] = new THREE.Vector3()
+  }
+  return a
+}
+var last_t = 0, start_t = 0
 var colors = [
-  0xffffff,
-  0x33ffff,
-  0xff33ff,
-  0xffff33,
-  0x33ff33,
   0xff3333,
+  0xff8833,
+  0xffff33,
+  0x338833,
+  0x3388ff,
   0x3333ff,
+  0x8833ff,
+  0xff3388,
+  0xffffff,
 ]
+var swapping = false, swap_count = 0, swapFrom, swapTo, face_names, faces
 init()
-animate()
 
 function choice(a) { return a[Math.floor(Math.random()*a.length)]}
 function init() {
-  container = document.getElementById( "container" )
-  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 )
+  fetch("/assets/data/3dlm_0_10.json")
+  .then(req => req.json())
+  .then(data => {
+    face_names = Object.keys(data)
+    faces = face_names.map(name => recenter(data[name]))
+    setup()
+    build(faces[0])
+    updateFace(faces[0])
+    document.querySelector('.currentFace').innerHTML = face_names[0]
+    swapTo = faces[0]
+    animate()
+  })
+}
+function setup() {
+  container = document.getElementById("container")
+  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000)
+  camera.position.x = 0
+  camera.position.y = 0
+  camera.position.z = 300
+
   scene = new THREE.Scene()
-  scene.background = new THREE.Color( 0x000000 )
-  scene.add( new THREE.AmbientLight( 0x555555 ) )
-  var light = new THREE.SpotLight( 0xffffff, 1.5 )
-  light.position.set( 0, 500, 2000 )
-  scene.add( light )
-  var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } )
-  var geometriesDrawn = []
+  scene.background = new THREE.Color(0x000000)
+
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  container.appendChild(renderer.domElement)
+  renderer.domElement.addEventListener('mousemove', onMouseMove)
+  renderer.domElement.addEventListener('mousedown', swap)
+}
+function build(points) {
   var matrix = new THREE.Matrix4()
   var quaternion = new THREE.Quaternion()
-  var color = new THREE.Color()
-  var bounds = daisy.reduce((a,p) => {
+
+  for (var i = 0; i < FACE_POINT_COUNT; i++) {
+    var p = points[i]
+    var geometry = new THREE.BoxBufferGeometry()
+    var position = new THREE.Vector3(p[0], p[1], p[2])
+    var rotation = new THREE.Euler()
+    var scale = new THREE.Vector3()
+    var color = new THREE.Color()
+    scale.x = scale.y = scale.z = POINT_SCALE
+    quaternion.setFromEuler(rotation, false)
+    matrix.compose(position, quaternion, scale)
+    geometry.applyMatrix(matrix)
+    material = new THREE.MeshBasicMaterial({color: color.setHex(0xffffff) })
+    cube = new THREE.Mesh(geometry, material)
+    scene.add(cube)
+    cubes.push(cube)
+  }
+
+  meshes = getLineGeometry(points).map((geometry, i) => {
+    var color = new THREE.Color()
+    var material = new MeshLineMaterial({
+      color: color.setHex(colors[i % colors.length]),
+    })
+    var line = new MeshLine()
+    line.setGeometry(geometry, _ => 1.5)
+    var mesh = new THREE.Mesh(line.geometry, material)
+    mesh.geometry.dynamic = true
+    scene.add(mesh)
+    return [line, mesh]
+  })
+}
+function lerpPoints(n, A, B, C) {
+  for (let i = 0, len = A.length; i < len; i++) {
+    lerpPoint(n, A[i], B[i], C[i])
+  }
+}
+function lerpPoint(n, A, B, C) {
+  C.x = lerp(n, A.x, B.x)
+  C.y = lerp(n, A.y, B.y)
+  C.z = lerp(n, A.z, B.z)
+}
+function lerp(n, a, b) {
+  return (b-a) * n + a
+}
+function swap(){
+  if (swapping) return
+  start_t = last_t
+  swapping = true
+  swap_count = (swap_count + 1) % faces.length
+  swapFrom = swapTo
+  swapTo = faces[swap_count]
+  document.querySelector('.currentFace').innerHTML = face_names[swap_count]
+}
+function update_swap(t){
+  var n = (t - start_t) / SWAP_TIME
+  if (n > 1) {
+    swapping = false
+    n = 1
+  }
+  lerpPoints(n, swapFrom, swapTo, faceBuffer)
+  updateFace(faceBuffer)
+}
+function updateFace(points) {
+  updateCubeGeometry(points)
+  updateLineGeometry(points)
+}
+function updateCubeGeometry(points) {
+  cubes.forEach((cube, i) => {
+    const p = points[i]
+    cube.position.set(p.x, p.y, p.z)
+  })
+}
+function updateLineGeometry(points) {
+  getLineGeometry(points).map((geometry, i) => {
+    var [line, mesh] = meshes[i]
+    line.setGeometry(geometry, _ => 1.5)
+    mesh.geometry.vertices = line.geometry.vertices
+    mesh.geometry.verticesNeedUpdate = true
+  })
+}
+function getLineGeometry(points) {
+  return [
+    points.slice(0, 17),
+    points.slice(17, 22),
+    points.slice(22, 27),
+    points.slice(27, 31),
+    points.slice(31, 36),
+    points.slice(36, 42),
+    points.slice(42, 48),
+    points.slice(48)
+  ].map((a, i) => {
+    var geometry = new THREE.Geometry()
+    a.forEach(p => geometry.vertices.push(p))
+    if (i > 4) {
+      geometry.vertices.push(a[0])
+    }
+    return geometry
+  })
+}
+function getBounds(obj) {
+  return obj.reduce((a, p) => {
     return [
       Math.min(a[0], p[0]),
       Math.max(a[1], p[0]),
@@ -53,52 +191,34 @@ function init() {
       Math.max(a[5], p[2]),
     ]
   }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity])
-  console.log(bounds)
-  camera.position.x = (bounds[0] + bounds[1]) / 2
-  camera.position.y = (bounds[2] + bounds[3]) / -2
-  camera.position.z = 200 // bounds[4] + 1000
-  console.log(camera.position)
-  daisy.forEach(point => {
-    var geometry = new THREE.BoxBufferGeometry()
-    var position = new THREE.Vector3()
-    position.x = point[0]
-    position.y = -point[1]
-    position.z = point[2]
-    var rotation = new THREE.Euler()
-    rotation.x = 0
-    rotation.y = 0
-    rotation.z = 0
-    var scale = new THREE.Vector3()
-    var SCALE = 2
-    scale.x = SCALE
-    scale.y = SCALE
-    scale.z = SCALE
-    quaternion.setFromEuler( rotation, false )
-    matrix.compose( position, quaternion, scale )
-    geometry.applyMatrix( matrix )
-    geometriesDrawn.push( geometry )
-    material = new THREE.MeshBasicMaterial( {color: color.setHex( choice(colors) )} )
-    sphere = new THREE.Mesh( geometry, material )
-    scene.add( sphere )
+}
+function recenter(obj) {
+  const bounds = getBounds(obj)
+  const x_width = (bounds[1] - bounds[0]) / 2
+  const y_width = (bounds[3] - bounds[2]) / -2
+  const z_width = (bounds[5] - bounds[4]) / 2
+  return obj.map(p => {
+    p[0] = p[0] - bounds[0] - x_width
+    p[1] = -p[1] + bounds[1] + y_width
+    p[2] = p[2] - bounds[2] + z_width
+    return new THREE.Vector3(p[0], p[1], p[2])
   })
-  renderer = new THREE.WebGLRenderer( { antialias: true } )
-  renderer.setPixelRatio( window.devicePixelRatio )
-  renderer.setSize( window.innerWidth, window.innerHeight )
-  container.appendChild( renderer.domElement )
-  renderer.domElement.addEventListener( 'mousemove', onMouseMove )
 }
 //
-function onMouseMove( e ) {
-  mouse.x = e.clientX
-  mouse.y = e.clientY
-}
-function animate() {
-  requestAnimationFrame( animate )
-  render()
-  scene.rotation.y += 0.0001 * Math.PI/2
+function onMouseMove(e) {
+  mouse.x = e.clientX / window.innerWidth
+  mouse.y = e.clientY / window.innerHeight
 }
-function render() {
-  renderer.render( scene, camera )
+function animate(t) {
+  requestAnimationFrame(animate)
+  if (swapping) update_swap(t)
+  renderer.render(scene, camera)
+  scene.rotation.y += 0.01 * Math.PI
+  mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1
+  mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1
+  scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2
+  scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI
+  last_t = t
 }
 </script>