Tributary inlet

_.md

[ Launch: Tributary inlet ] 5221758 by lennyjpg

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[{"name":"theken","url":"https://gist.github.com/banksean/304522/raw/f306edfdab80d72795565a5fcdeb4eb86368fee0/perlin-noise-classical.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"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}

inlet.coffee

kfield = {}
colors = []
w= 0
svg = {}
perlin = {}

window.requestAnimationFrame ||= 
  window.webkitRequestAnimationFrame || 
  window.mozRequestAnimationFrame    || 
  window.oRequestAnimationFrame      || 
  window.msRequestAnimationFrame     || 
  (callback, element) ->
    window.setTimeout( ->
      callback(+new Date())
    , 1000 / 60)

svg = d3.select("svg").style("background","#FFF")
  .append("g")
  
svg.append("svg:defs").selectAll("marker")
  .data(["normal", "special", "resolved"])
  .enter().append("svg:marker")
  .attr("id", String)
  .attr("class","needle")
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 5)
  .attr("refY", 0)
  .attr("markerWidth", 6)
  .attr("markerHeight", 6)
  .attr("markerUnits","userSpaceOnUse")
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M 10,-5 L 0,0 L10,5")

svg.append("svg:defs").selectAll("marker")
  .data(["normal", "special2", "resolved"])
  .enter().append("svg:marker")
  .attr("id", String)
  .attr("class","needle")
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 5)
  .attr("refY", 0)
  .attr("markerWidth", 6)
  .attr("markerHeight", 6)
  .attr("markerUnits","userSpaceOnUse")
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M 10,-5 L 0,0 L10,5")

counter = 0
draw=()->
  counter++
  if counter % 100 is 0
    field.move()

animate= ()->
  requestAnimationFrame( animate )
  draw()

animate()


Bird = ->
  res = Math.round(Math.random()*50+1)
  color = "#000333"
  tx = 0
  ty = 0
  cx = 100
  cy = 200
  extra = 0
  e = 17
  p = {}
  states = []
  angle = 0
  rnd = Math.random()*0

  bird = (count) ->
    p = d3.select("g").append("path")
      .attr("class","swing").attr("stroke-width",Math.random()*2+0.5)
      .style("stroke","#333")
      .style("fill","none")

    if Math.random() < 0.1
      p.attr("stroke-width",Math.random()*6+0.5)

    if Math.random() > 0.08
      p.attr("class","flip").attr("marker-start", (d)->"url(#special)")
    else
      p.attr("class","flop").attr("marker-start", (d)->"url(#special2)")

  rr = (x,y,n)->
    perlin.noise(1720+x*0.001, 1500+y*0.001,n)

  lineFunction = d3.svg.line().x((d)->d.x).y((d)->d.y)
    
  setup = ()->
    tx = cx + Math.random()*800-400
    ty = cy + Math.random()*400-200
    #angle = Math.atan2(tx-cx,ty-cy)
    angle = 20
    extra = 0
    if tx < cx
      extra= Math.PI
    for i in [0..4]
      states.push(swing())
    states.reverse()

  run = ()->
    angle = rr(tx-cx,ty-cy,rnd)*5+extra
    tx += Math.sin(angle)*e
    ty += Math.cos(angle)*e

  swing = () ->
    rnd +=0.1
    tx = cx + Math.random()*800-400
    ty = cy + Math.random()*400-200
    coords = []
    for i in [0..res]
      coords[i]={ x: tx, y: ty}
      run()
    return coords

  setup()

  bird.update = (goto)->
    coords = states[goto]
    p.transition()
      .duration(1000)
      .delay(Math.round(Math.random()*1200))
      .attr("d":(d,i)->lineFunction(coords))

  return bird


Field = ->
  birds = []
  t = {}
  cx = 200
  cy = 100
  state = 0
  inc = 1
  w = tributary.sw
  field = () ->
    t = svg.append("g")

    for f in [0..100]
      bird = Bird()
      bird(f)
      birds.push(bird)

  field.move = ()->
    state += inc
    if state == 0
      inc *= -1
    if state == 4
      inc *= -1
    for f in [0..100]
      birds[f].update(state)

  return field

perlin = new ClassicalNoise()

scale = d3.scale.linear().domain([0, 360]).range([24,0])
field = Field()
field()
field.move()