bluefoot_bbom_rotators2

_.md

[ Launch: bluefoot_bbom_rotators ] 38b996c7479c5e1849c0 by zeffii
[ Launch: i can do that 3 - finneky ] ceedbfddff746627be6b 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":"bluefoot_bbom_rotators2","endpoint":"","display":"canvas","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":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/iQYREX3.png","ajax-caching":false}

inlet.coffee

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

get_distance = (pos1, pos2) ->
    a = Math.abs(Math.max(pos1.x, pos2.x) - Math.min(pos1.x, pos2.x))
    b = Math.abs(Math.max(pos1.y, pos2.y) - Math.min(pos1.y, pos2.y))
    Math.sqrt((a*a) + (b*b))


swish = (x, y, r, col, rot) ->

  # chew on this verbosity.
  ctx.beginPath()
  ctx.lineWidth = 4
  ctx.lineCap = "round";
  ctx.strokeStyle = col.toString()
  ctx.moveTo(x, y)
  repos = get_points((-(0.5-(1/3))*Math.PI) + rot, r)
  ctx.lineTo(x + repos.x, y + repos.y)

  ctx.moveTo(x, y)
  repos = get_points(((1.5-(1/3))*Math.PI) + rot, r)
  ctx.lineTo(x + repos.x, y + repos.y)

  ctx.moveTo(x, y)
  repos = get_points((.5*Math.PI) + rot, r)
  ctx.lineTo(x + repos.x, y + repos.y)

  ctx.stroke()


get_points = (angle, amp) ->
  x: (Math.cos(angle) * amp)
  y: (Math.sin(angle) * amp)

get_rotation = (d, t) ->
  sinusoid = Math.sin(t*Math.PI/3) 
  final_amp = (Math.pow(sinusoid, 2.4) * (Math.PI)) + d/800
  
ctx = tributary.ctx
ctx.fillStyle = "black"

arm_radius = 15
rows = 29
cols = 21
row_dist = arm_radius + (arm_radius * Math.PI * 1/6)
col_dist = (arm_radius * Math.PI * 1/3 ) * 2
num_balls = rows * cols


bg_col = 'rgba(6,6,8,0.12)'
ctx.fillStyle = bg_col
ctx.fillRect(0,0,tributary.sw, tributary.sh)

center_x = Math.floor(cols/2) * col_dist
center_y = Math.floor(rows/2) * row_dist


tributary.run = (unused, t) ->
  i = 0
  ctx.fillStyle = bg_col
  ctx.fillRect(0,0,tributary.sw, tributary.sh)

  
  while i < num_balls
    
    x = (i % cols) * col_dist
    row_count = Math.floor(i/cols)
    x += if (row_count % 2 == 1) then ( arm_radius*Math.PI * 1/3) else 0
    y = row_count * row_dist
    
    d = get_distance({x:x, y:y}, {x:center_x, y:center_y})
    r = d / center_x
    
    
    col = 'hsl(' + ((((r*t)*(360))%center_x)) + ', 100%, 50%)'
    swish x, y, arm_radius, col, get_rotation(d, t)
    i++

  

  

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;}