1 files changed, 36 insertions, 32 deletions

diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js
index f3f1f2bf..1818e9aa 100644
--- a/site/assets/js/app/face.js
+++ b/site/assets/js/app/face.js
@@ -1,4 +1,5 @@
-var face = (function(){
+/* eslint-disable */
+var faceInit = function () {
   var container = document.querySelector("#face_container")
   var camera, controls, scene, renderer
   var mouse = new THREE.Vector2(0.5, 0.5)
@@ -16,6 +17,7 @@ var face = (function(){
     return a
   })()
   var last_t = 0, start_t = 0
+  var bgColor = 0x000000 // 0x191919
   var colors = [
     0xff3333,
     0xff8833,
@@ -32,32 +34,33 @@ var face = (function(){
 
   function init() {
     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])
-      setCurrentFace(face_names[0])
-      swapTo = faces[0]
-      animate()
-    })
+      .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])
+        setCurrentFace(face_names[0])
+        swapTo = faces[0]
+        animate()
+      })
   }
   function setup() {
-    var w = window.innerWidth / 2
+    var w = window.innerWidth * 2/3
     var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7)
     camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000)
     camera.position.x = 0
     camera.position.y = 0
-    camera.position.z = 250
+    camera.position.z = 200
 
     scene = new THREE.Scene()
-    scene.background = new THREE.Color(0x191919)
+    // scene.background = new THREE.Color(bgColor)
 
-    renderer = new THREE.WebGLRenderer({ antialias: true })
+    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
     renderer.setPixelRatio(window.devicePixelRatio)
     renderer.setSize(w, h)
+    renderer.setClearColor(0x000000, 0);
     container.appendChild(renderer.domElement)
     document.body.addEventListener('mousemove', onMouseMove)
     // renderer.domElement.addEventListener('mousedown', swap)
@@ -75,7 +78,7 @@ var face = (function(){
     //     console.log("done")
     //   }
     // })
-    setInterval(swap, 5000)
+    swap()
   }
   function build(points) {
     var matrix = new THREE.Matrix4()
@@ -125,27 +128,28 @@ var face = (function(){
     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
+    swapFrom = swapTo || faces[0]
     swapTo = faces[swap_count]
     setCurrentFace(face_names[swap_count])
+    oktween.add({
+      from: { n: 0 },
+      to: { n: 1 },
+      duration: 1000,
+      easing: oktween.easing.quad_in_out,
+      update: function(obj){
+        lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
+        updateFace(faceBuffer)
+      },
+      finished: function(){
+        setTimeout(swap, 2000)
+      }
+    })
   }
   function setCurrentFace(name) {
     name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ')
     currentFace.innerHTML = name
   }
-  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)
@@ -214,7 +218,6 @@ var face = (function(){
   }
   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
@@ -224,4 +227,5 @@ var face = (function(){
     // scene.rotation.y += 0.01
     last_t = t
   }
-})()
+}
+faceInit()
\ No newline at end of file