init latest version of harp

1 files changed, 183 insertions, 0 deletions

diff --git a/js/lib/grid.js b/js/lib/grid.js
new file mode 100644
index 0000000..aecaed8
--- /dev/null
+++ b/js/lib/grid.js
@@ -0,0 +1,183 @@
+var Grid = (function(){
+
+  var Grid = function(opt){
+    var horizontal = this.horizontal = []
+    var vertical = this.vertical = []
+    var sides = this.sides = []
+    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",
+      draw_sides: false,
+      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 ],
+      }) )
+    }
+    if (opt.draw_sides) {
+      sides.push( s.path().attr({ strokeWidth: opt.strokeWidth, stroke: opt.stroke[ ++i % opt.stroke.length ] }) )
+      sides.push( s.path().attr({ strokeWidth: opt.strokeWidth, stroke: opt.stroke[ ++i % opt.stroke.length ] }) )
+      sides.push( s.path().attr({ strokeWidth: opt.strokeWidth, stroke: opt.stroke[ ++i % opt.stroke.length ] }) )
+      sides.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",
+      h_offset: 0,
+      v_offset: 0,
+      duration: this.opt.duration,
+    })
+    var duration = opt.duration
+    var height = this.opt.height, width = this.opt.width
+    var x = mod(this.pos.xmin + opt.h_offset, this.pos.dx)
+    var y = mod(this.pos.ymin + opt.v_offset, this.pos.dy)
+    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 )
+      }
+      if (duration == 0) {
+        p.attr({ d: end_path })
+      }
+      else {
+        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 )
+      }
+
+      if (duration == 0) {
+        p.attr({ d: end_path })
+      }
+      else {
+        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))
+    
+    if (this.opt.draw_sides) {
+      this.sides[0].attr({ d: hpath(0, 0, width) })
+      this.sides[1].attr({ d: hpath(0, height - this.opt.strokeWidth/2, width) })
+      this.sides[2].attr({ d: vpath(0, 0, height) })
+      this.sides[3].attr({ d: vpath(width - this.opt.strokeWidth/2, 0, height) })
+    }
+    
+    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
+})()