optical_illusion_001_motion2

_.md

[ Launch: optical_illusion_001_motion2 ] 5892755 by enjalot
[ Launch: optical_illusion_001_motion ] 5892162 by zeffii
[ Launch: optical_illusion_001 ] 5891299 by zeffii
[ Launch: zeffii default ] 5891190 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"optical_illusion_001_motion2","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"util.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/YZdAokR.png"}

inlet.js

// optical illusaion from http://imgur.com/gallery/GfXcswv

d3.select("body").style("background-color", d3.rgb(25,25,25))

// var svg = d3.select("svg");
//var defs = svg.append("defs");
//var group1 = svg.append("g").classed("group1", true);

//group1.attr("transform", "translate(" + [37, 11] + ")")
//.style({'fill':  "none", stroke: "#aeaeae"})

var items_wide = 20,
    items_high = 20,
    total_items = items_wide * items_high * 1,
    padding_y = 20,
    padding_x = 20,
    circle_rad= 28,
    even_offset = circle_rad * 1.18,
    xy_offset = {x:even_offset, y:even_offset};

var data = d3.range(total_items)



tributary.init = function(g) {
  var group1 = g.append("g").classed("group1", true)
  .attr("transform", "translate(" + [35, 30] + ")")
  .style({'fill':  "none", stroke: "#aeaeae"})
  var group2 = g.append("g").classed("group2", true)
  .attr("transform", "translate(" + [35, 30] + ")")
  
  // B o t t o m 
  var grid = group1.selectAll('g').data(data).enter()
  var cell = grid.append('g')
  .attr("transform", function(d,i){
      var pos = get_location(i);
      return "translate(" + [pos.x, pos.y ] + ")"
  })
  cell.append("circle").attr({r: circle_rad})
  
  // D o t 
  var dots = group2.selectAll('circle').data(data).enter()  
  var dot = dots.append("circle")
  .attr({r: 4})
  .style({stroke: "none", "fill": "#aeaeae"})
  .attr({"transform": function(d){
      var cp = get_location(d);
      var rot_am = 2 * Math.PI / 21;
      var pos = get_points(d * rot_am, circle_rad, cp)
      return "translate(" + [pos.x, pos.y ] + ")" }
  })
  
}

tributary.duration = 5300;

tributary.run = function(g,t) {
  //$('.group2').empty();
  var group2 = g.select(".group2")

  var dots = group2.selectAll('circle').data(data)
  .attr({r: 4})
  .style({stroke: "none", "fill": "#aeaeae"})
  .attr("transform", function(d, i){
      var cp = get_location(d);
      var rot_am = 2 * Math.PI / 21 * i
      var offset = t * Math.PI * 8
      var pos = get_points(rot_am + offset, circle_rad, cp)
      return "translate(" + [pos.x, pos.y ] + ")"
  })
  //dots.exit().remove()  

}

// helpers

function get_location(i){
    var x = padding_x + xy_offset.x * (i % items_wide);
    var y = padding_y + xy_offset.y * Math.floor(i / items_wide);
    return {x: x, y: y}
}

function get_points(angle, amp, cp){
    var pos = {}; 
	pos.x = cp.x + Math.cos(angle) * amp
	pos.y = cp.y + Math.sin(angle) * amp
	return pos
}


/* EOF */

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}