pull in holodeck

3 files changed, 330 insertions, 0 deletions

diff --git a/new-reality/public/assets/js/grid/env.js b/new-reality/public/assets/js/grid/env.js
new file mode 100644
index 0000000..3492e97
--- /dev/null
+++ b/new-reality/public/assets/js/grid/env.js
@@ -0,0 +1,155 @@
+var scene, cam, controls
+
+var environment = (function(){
+
+  var environment = {}
+  var grids
+
+  environment.init = function(){
+    environment.ready()
+  }
+
+  environment.ready = function(){
+    scene = new MX.Scene().addTo('#scene')
+    cam = scene.camera
+
+    controls = new MX.FollowingOrbitCamera({
+      center: { x: -100, y: 0, z: 0 },
+      radius: 700,
+      radiusRange: [ 10, 2000 ],
+      rotationXRange: [ 0.428 * Math.PI, 0.455 * Math.PI ],
+      rotationYRange: [ 0.083 * Math.PI, 0.100 * Math.PI ],
+      rotationX: Math.PI * 0.45,
+      rotationY: Math.PI * 0.125,
+      wheelEase: 20,
+      ease: 10
+    })
+    controls.init()
+    controls.wheel.lock()
+    
+    var grid_opts = {
+      width: 500,
+      height: 500,
+      side: 23,
+      strokeWidth: 2,
+      bg: "#000000",
+      stroke: "#ffffff",
+      duration: 1000,
+      delay: [ 0, 500 ],
+    }
+    
+    grids = [
+      new Grid ( defaults({ halign: "right", valign: "bottom" }, grid_opts) ),
+      new Grid ( defaults({ halign: "right", valign: "bottom" }, grid_opts) ),
+      new Grid ( defaults({ halign: "right", valign: "top" }, grid_opts) ),
+    ]
+
+    var m = new MX.Object3D( grids[0].snap.node )
+    m.z = 250
+    m.y = 250
+    m.width = m.height = 500
+    m.rotationY = -Math.PI/2
+    scene.add(m)
+
+    var m = new MX.Object3D( grids[1].snap.node )
+    m.x = 250
+    m.y = 250
+    m.width = m.height = 500
+    m.rotationY = Math.PI
+    scene.add(m)
+
+    var m = new MX.Object3D( grids[2].snap.node )
+    m.x = 250
+    m.z = 250
+    m.width = m.height = 500
+    m.rotationX = Math.PI/2
+    scene.add(m)
+
+    var dog = new Image ()
+    dog.classList.add("dog")
+    dog.src = "img/lab_sitting.png"
+    var m = new MX.Object3D( dog )
+    m.x = 250
+    m.y = 39
+    m.z = 250
+    m.rotationY = Math.PI/2
+    m.scale = 0.2
+    scene.add(m)
+    
+    var logo = Snap(480 * 2, 74 * 2)
+    logo.attr({ 'viewBox': '0 0 480 74.1' })
+    logo.node.classList.add("logo")
+    logo.path('M322.1,0c23.8,0,40.6,13,40.6,37c0,23-15.7,37.1-40.6,37.1c-24.4,0-40.7-13.4-40.7-37.1C281.4,13.7,297.5,0,322.1,0zM322.1,58.8c12.7,0,20.2-8.7,20.2-21.7c0-13.7-7.9-21.7-20.2-21.7c-12.9,0-20.2,8.7-20.2,21.7C301.8,49.5,308.9,58.8,322.1,58.8zM169.9,0.9c-2.4,0-40,0-40,0s0,2.8,0,5.6c0,4.9,2.6,9.6,9.5,9.6c3.1,0,25.5,0,25.5,0c10.7,0,14.5,3.4,14.5,12v1.2h-27c-20,0-27.4,9.3-27.4,21.9c0,15.3,10.2,22,27.5,22l0,0c0,0,11.1,0,18,0c23.5,0,28.5-11.7,28.5-27.3V28C199,11.3,192.8,0.9,169.9,0.9z M179.4,46.1c0,7.3-3.4,12.9-13.1,12.9h-10.2c-7.1,0-11.3-1.9-11.3-7.7c0-5.6,3.9-7.7,11.3-7.7h23.3V46.1z M255.2,16.1c0,0,9.9,0,9.9,0c7.1,0,11.3-2.6,11.3-9.1V0.9h-28.3l0,0c-23.7,0-35,13.9-35,36.2c0,27.7,17.3,36.2,35,36.2h28.3v-6.2c0-6.4-4.4-9-10.8-9c-3,0-10.4,0-10.4,0c-11.3,0-21.7-4-21.7-21C233.5,22.3,241.4,16.1,255.2,16.1z M41.7,53.4c0,0-16.8-43.9-17.8-46.4c-1.3-3.5-3.1-6.1-9.4-6.1H0l29.8,72.3h21.7L82.3,0.9c0,0-9.2,0-12.7,0c-5.5,0-7.6,2.4-9,5.8L42,53.4H41.7zM428.5,52.8c0,0-12.4-35.2-14.6-41.9c-1.5-4.5-3.6-10-13.7-10c-1.3,0-23,0-23,0v72.3h7.8c5.9,0,9.6-2.6,9.6-8.7V14h0.3l22.3,59.2h20.9L460.4,14h0.3c0,0,0,50.6,0,50.6c0,5.1,2.8,8.6,9.7,8.6h9.6V0.9c0,0-17.6,0-21.6,0c-7.6,0-12.3,2.1-14.6,8.9c-1.5,4.4-15,43-15,43H428.5z M91.3,0.9v63.8c0,5,3,8.5,9.4,8.5h10.2V0.9H91.3z')
+    
+    var m = new MX.Object3D( logo.node )
+    m.x = 220
+    m.y = 148
+    m.z = 5
+    m.scale = 0.6 / 2
+    m.rotationY = Math.PI
+    scene.add(m)
+    
+    var tagline = new MX.Object3D ()
+    tagline.el.innerHTML = '<span></span>'
+    tagline.el.classList.add("text")
+    tagline.width = 380
+    tagline.height = 50
+    tagline.x = 140
+    tagline.y = 112
+    tagline.z = 5
+    tagline.scale = 0.4
+    tagline.rotationY = Math.PI
+    scene.add(tagline)
+
+    var cta = new MX.Object3D ()
+    cta.el.innerHTML = '<span>For more information, email </span><a href="mailto:info@newreality.co">info@newreality.co</a>'
+    cta.el.classList.add("text")
+    cta.width = 380
+    // cta.height = 50
+    cta.x = 5
+    cta.y = 30
+    cta.z = 90
+    cta.scale = 0.4
+    cta.rotationY = Math.PI/2
+    scene.add(cta)
+    
+    grids[0].animate({ h: "right", v: "down" })
+    grids[1].animate({ h: "right", v: "down" })
+    grids[2].animate({ h: "left", v: "down" })
+    
+    dog.addEventListener("click", environment.space)
+    m.el.addEventListener("click", environment.space)
+  }
+  environment.space = function(){
+    document.body.classList.toggle('space')
+    if (document.body.classList.contains("space")) {
+      grids.forEach(function(g){
+        g.bg.animate({ opacity: 0 }, 200)
+        g.vertical.forEach(function(p){ p.attr({ strokeWidth: 2/devicePixelRatio }) })
+        g.horizontal.forEach(function(p){ p.attr({ strokeWidth: 2/devicePixelRatio }) })
+      })
+    }
+    else {
+      grids.forEach(function(g){
+        g.bg.animate({ opacity: 1 }, 200)
+        g.vertical.forEach(function(p){ p.attr({ strokeWidth: 2 }) })
+        g.horizontal.forEach(function(p){ p.attr({ strokeWidth: 2 }) })
+      })
+    }
+  }
+  
+  environment.resize = function(){
+    scene.width = window.innerWidth
+    scene.height = window.innerHeight
+    scene.perspective = Math.min(window.innerWidth, scene.height)
+    scene.update()
+  }
+
+  environment.update = function(t){
+    scene.update()
+    controls.update()
+  }
+
+  return environment
+
+})()
diff --git a/new-reality/public/assets/js/grid/grid.js b/new-reality/public/assets/js/grid/grid.js
new file mode 100644
index 0000000..f3747e5
--- /dev/null
+++ b/new-reality/public/assets/js/grid/grid.js
@@ -0,0 +1,154 @@
+var Grid = (function(){
+
+  var Grid = function(opt){
+    var horizontal = this.horizontal = []
+    var vertical = this.vertical = []
+    var x, xmin, xmax
+    var y, ymin, ymax
+    var dx = opt.strokeWidth + opt.side
+    var dy = dx
+    var i
+    var s
+
+    opt = this.opt = defaults(opt, {
+      bg: "#ffffff",
+      stroke: "#000000",
+      strokeWidth: 2,
+      side: 10,
+      delay: 0,
+      shuffleDelay: false,
+      randomizeDelay: false,
+      duration: 500,
+      width: 300,
+      height: 300,
+      halign: "left",
+      valign: "top",
+      snap: null,
+    })
+    if (typeof opt.stroke == 'string') opt.stroke = [opt.stroke]
+    if (typeof opt.delay == 'string') opt.delay = [opt.delay]
+    
+    if (opt.snap) {
+      s = this.snap = opt.snap
+    } else { 
+      s = this.snap = Snap(opt.width, opt.height)
+      s.attr({ viewBox: "0 0 " + opt.width + " " + opt.height })
+    }
+
+    switch (opt.halign) {
+      case "right":
+        ymin = opt.height % dy
+        ymax = opt.height + 1
+        break
+      default:
+      case "left":
+        ymin = 0
+        ymax = opt.height
+        break
+    }
+
+    switch (opt.valign) {
+      case "bottom":
+        xmin = opt.width % dx
+        xmax = opt.width + 1
+        break
+      default:
+      case "top":
+        xmin = 0
+        xmax = opt.width
+        break
+    }
+    
+    this.bg = s.rect(0, 0, "100%", "100%").attr({ fill: opt.bg })
+    
+    this.pos = {
+      dx: dx, xmin: xmin, xmax: xmax,
+      dy: dy, ymin: ymin, ymax: ymax,
+    }
+
+    for (i = 0, x = xmin; x < xmax; x += dx, i++) {
+      vertical.push( s.path().attr({
+        strokeWidth: opt.strokeWidth,
+        stroke: opt.stroke[ i % opt.stroke.length ],
+      }) )
+    }
+    for (i = 0, y = ymin; y < ymax; y += dy, i++) {
+      horizontal.push( s.path().attr({
+        strokeWidth: opt.strokeWidth,
+        stroke: opt.stroke[ i % opt.stroke.length ],
+      }) )
+    }
+  }
+  
+  Grid.prototype.animate = function(opt, cb){
+    opt = defaults(opt, {
+      h: "right",
+      v: "down",
+    })
+    var duration = this.opt.duration
+    var height = this.opt.height, width = this.opt.width
+    var x = this.pos.xmin, y = this.pos.ymin
+    var right = opt.h == "right"
+    var down = opt.v == "down"
+    
+    this.vertical.forEach(function(p, i){
+      var start_path, end_path
+      if (down) {
+        start_path = vpath( x, 0, 0 )
+        end_path = vpath( x, 0, height )
+      }
+      else {
+        start_path = vpath( x, height, 0 )
+        end_path = vpath( x, height, -height )
+      }
+      var delay = this.opt.randomizeDelay
+        ? choice(this.opt.delay)
+        : this.opt.delay[i % this.opt.delay.length]
+      p.attr({ d: start_path })
+      setTimeout(function(){
+        p.animate({ d: end_path }, duration)
+      }, delay)
+      x += this.pos.dx
+    }.bind(this))
+
+    this.horizontal.forEach(function(p, i){
+      var start_path, end_path
+      if (right) {
+        start_path = hpath( 0, y, 0 )
+        end_path = hpath( 0, y, width )
+      }
+      else {
+        start_path = hpath( width, y, 0 )
+        end_path = hpath( width, y, -width )
+      }
+
+      var delay
+      if (this.opt.shuffleDelay) {
+        delay = randrange.apply(null, this.opt.delay)
+      }
+      else if (this.opt.randomizeDelay) {
+        delay = choice(this.opt.delay)
+      }
+      else {
+        delay = this.opt.delay[i % this.opt.delay.length]
+      }
+      p.attr({ d: start_path })
+      setTimeout(function(){
+        p.animate({ d: end_path }, duration)
+      }, delay)
+      y += this.pos.dy
+    }.bind(this))
+    
+    var max_delay = Math.max.apply(Math, this.opt.delay)
+    cb && setTimeout(cb, this.opt.duration + max_delay + 20)
+  }
+  
+  function hpath (x, y, w) {
+    return "M" + x + " " + y + "h" + w
+  } 
+  function vpath (x, y, w) {
+    return "M" + x + " " + y + "v" + w
+  } 
+
+  return Grid
+})()
diff --git a/new-reality/public/assets/js/grid/timeline.js b/new-reality/public/assets/js/grid/timeline.js
new file mode 100644
index 0000000..651e315
--- /dev/null
+++ b/new-reality/public/assets/js/grid/timeline.js
@@ -0,0 +1,21 @@
+function Timeline (tweens) {
+  this.tweens = tweens
+  this.index = 0
+}
+Timeline.prototype.advance = function(){
+  var tl = this.tweens[this.index % this.tweens.length]
+  if (tl.index == -1) {
+    tl.reset()
+    tl.index = 0
+    requestAnimationFrame(this.advance.bind(this))
+  }
+  else if (tl.index < tl.timeline.length){
+    tl.timeline[ tl.index ](this.advance.bind(this))
+    tl.index += 1
+  }
+  else {
+    this.index += 1
+    tl.index = -1
+    requestAnimationFrame(this.advance.bind(this))
+  }
+}