i can do that D3 - finneky

_.md

[ Launch: i can do that 3 - finneky ] 8e1c86e44a848fe8b5c8 by zeffii
[ Launch: i can do that 3c ] cf05bdfcc4a1d15d3836 by zeffii
[ Launch: i can do that 3b ] 0c2f0f43caf8850d5fac by zeffii
[ Launch: i can do that 3 ] 4d4e425205275c203a2c by zeffii
[ Launch: i can do that 2 ] dc3093d02641a76a5d6b by zeffii
[ Launch: i can do that ] efc1cf0936b4a12b6760 by zeffii
[ Launch: LissaDotBlast motion trail ] 92f8a469f8e74ac76e16 by zeffii
[ Launch: LissaDotBlast motion trail ] b9eb1a40304e1acbfe5b by zeffii
[ Launch: LissaDotBlast ] 6387636 by zeffii
[ Launch: Lissajous ] 6381091 by zeffii
[ Launch: Lissajous ] 6378631 by slembcke

config.json

{"description":"i can do that D3 - finneky","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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/iQYREX3.png","ajax-caching":false}

inlet.coffee

# after http://beesandbombs.tumblr.com
# http://beesandbombs.tumblr.com/post/118139231509/from-the-archive

svg = d3.select("svg")
svg.append("rect").attr({width:"100%", height:"100%", fill: '#1f1f1f'})

g1 = svg.append('g').classed 'g1', true
g1.attr
  transform: "translate(" + [40, 30] + ")"

# ------------------------------------------------- #

num_balls = 267
ball_radius = 6
rotation_slice = 2*Math.PI / num_balls
speed = 1
alien_factor = 24

get_points = (angle, amp) ->
  x: tributary.sw/2 + Math.cos(angle) * amp
  y: tributary.sh/2 + Math.sin(angle) * amp

get_amp = (i, num_balls, max_amp) ->
  rate = (i/num_balls)
  sinusoid = Math.sin(rate*Math.PI) 
  final_amp = Math.pow(sinusoid, 5) * max_amp
  x: (tributary.sw/num_balls)*i
  yopt: final_amp + (tributary.sh/2)
  y: final_amp
  
make_path = (num_balls, t) ->
  p = []
  i = 0
  boffset = Math.floor((t*num_balls) % num_balls)

  while i < num_balls
    j = (i + boffset) % num_balls
    pos2 = get_amp(j, num_balls, 34) # gets re-amp values
    
    amp_attack = 72
    
    slice_offset = alien_factor * Math.PI / num_balls
    namp = (Math.cos( speed*t + slice_offset*i) * 30)
    amp = (namp*pos2.y/amp_attack) + 280
    pos = get_points(rotation_slice * i, amp)

    amp3 = (namp*-pos2.y/amp_attack) + 280
    pos_opp = get_points(rotation_slice * i, amp3)

    p.push(x1: pos.x, y1: pos.y, x2: pos_opp.x, y2: pos_opp.y)
    i++    
  p

# ---------------------------------------------------- #  
    

data = d3.range num_balls  
 
ld = make_path(num_balls, 0.0)

  
arc = g1.selectAll('circle').data(data).enter()
.append("circle")
.attr
  transform: (d, i) -> "translate(" + [ld[i].x1, ld[i].y1] + ")"
  r: 7
.style
  fill: "#ffff1f"

tributary.run = (unused, t) ->

  ld = make_path(num_balls, t)
  g1.selectAll("circle")
  .attr
    transform: (d, i) -> "translate(" + [ld[i].x1, ld[i].y1] + ")"



    

style.css

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