boomstick_motion2

_.md

[ Launch: boomstick_motion2 ] 6365963 by gelicia
[ Launch: boomstick_motion ] 6364686 by zeffii
[ Launch: boomstick ] 6364584 by zeffii
[ Launch: zeffii default ] 6364028 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"boomstick_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":false,"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/OqFYJQH.png"}

inlet.js

// for gelicia :)

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

var num_balls = 15;
var ball_radius = 14;
var data = d3.range(num_balls);
var rotation_slice = 2*Math.PI / num_balls;

var alien_factor = 6;   // choose integer values

var colors = ['#F808AB', '#0DF31F', '#07F0FA' , '#FAC907' , '#8507FA'];

// helpers

tributary.init = function(g) {
  var group1 = g.append("g").classed("group1", true)

  group1.attr("transform", "translate(" + [317, 268] + ")")
  .style({'fill': "#aeaeae", stroke: "#AEAEAE"})

  var balls = group1.selectAll("circle");
  var ball = balls.data(data).enter(data);
  ball.append('circle')
  .attr('r', ball_radius)
}

tributary.duration = 5300;

tributary.run = function(g,t) {
  var group1 = g.select(".group1")
  var balls = group1.selectAll('circle').data(data)

  .attr({'transform': function(d){
      var slice_offset = alien_factor*Math.PI/num_balls
      var amp = (Math.cos(12*t + slice_offset*d) * 70) + 170;
      var pos = get_points(rotation_slice * d, amp)
      return 'translate('+ [pos.x, pos.y] + ')'
  }, fill: function(d,i){ return colors[i % colors.length]; }})   //  <--- i best invest time in learning coffeescript. yikes.
}

function get_points(angle, amp){
    var pos = {}; 
	pos.x = Math.cos(angle) * amp
	pos.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;}