Tributary inlet

_.md

[ Launch: Tributary inlet ] 5243084 by lennyjpg

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[{"name":"noise","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},"_.md":{"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

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


sw = tributary.sw
sh = tributary.sh
scale = d3.scale.linear().domain([0, 360]).range([24,0])
kfield = {}
colors = []
w= 0
svg = {}

rnd = (from,to)->
  Math.random()*(to-from)+from

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

  bird = (selection,yo,count) ->
    p = selection.append("path")
      .attr("class","swing").attr("stroke-width",Math.random()*5+0.5)
      .style("stroke",yo)
      .style("fill","none")

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

  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()*50-20
    ty = cy + Math.random()*50-20
    #angle = Math.atan2(tx-cx,ty-cy)
    angle = 0
   
    
    extra = 0
  
    for i in [0..4]
      states.push(swing())
    states.reverse()

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

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

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





#http://stackoverflow.com/questions/13893127/how-to-draw-a-path-smoothly-from-start-point-to-end-point-in-d3-js

Hi = () ->

  resolutionFace = 10
  resolutionEyes = 5
  
  xpos = d3.round(rnd(-sw*0.1,sw*1.1))
  ypos = d3.round(rnd(-sh*0.1,sh*1.1))
  
  smile = {}
  outline = {}
  inner = {}
  face={}
  bg = {}
  eyes = {}
  pathinfo = []
  rotation = d3.round(rnd(-30,30))
  
  r = rnd(15,137)
  f = rnd(0.5,0.9)
  smileWidth = rnd(r*0.2,r*0.7)
  
  colorOne = d3.rgb(250,0,100).darker(rnd(0,2))
  colorTwo = colorOne.darker(1.28)
  
  
  hi = (selection, data) ->
    
    
    face = selection.append("g")
      .attr("class","face")
      .attr("transform","translate("+xpos+","+ypos+")rotate("+rotation+")")
      .style("cursor","pointer")
      .on("mouseover",dbounce)
      
 
    for i in [0..7]
     bird = Bird()
     bird(face,colorOne,5)
     bird.update(0)
    
    bg=face.append("g")
    outline = face.append("g").attr("class","outline")


    blob = outline.append("path")
      .style("fill",colorOne).style("stroke",colorTwo)
      .attr({"d": (d) ->(swing(resolutionFace,r,r*1.3) ) })
      
    blobb = outline.append("path")
      .style("fill","none").style("stroke",colorTwo)
      .attr({"d": (d) ->(swing(resolutionFace,r,r*1.3) ) })
      
    eyes = face.append("g")
      .attr("transform",(d)->"translate(0,"+rnd(r*-0.3,r*0.2)+")")

    inner = eyes.selectAll("path")
      .data([r*-f,r*f]).enter().append("path")
      .style("fill",colorTwo)
      .attr("transform",(d)->"translate("+d+",0)")
      .attr({"d": (d) -> swing( resolutionEyes,r*0.07,r*0.15 ) })

    eyes.selectAll("h")
      .data([r*-f,r*f]).enter().append("path")
      .style("fill",colorTwo)
      .style("opacity",0.2)
      .attr("transform",(d)->"translate("+d+",0)")
      .attr({"d": (d) -> swing( resolutionEyes,r*0.1,r*0.35 ) })
    
    smile = face.append("path")
      .attr("d",getSmile())   
      .style("fill",colorTwo)
      .attr("transform","translate(0,"+rnd(r*0.2,r*0.5)+")")
  
      
  swing = (resolution,radiusMin,radiusMax)->
      angle = d3.scale.linear().domain([0,resolution]).range([0, 2 * Math.PI])
      tmp = d3.svg.line.radial().interpolate("basis-closed").tension(0)
      .radius( (d,i) -> 
        if i is 5
          d3.round(rnd(radiusMin,radiusMax)*0.6)
        else if i is 0
          d3.round(rnd(radiusMin,radiusMax)*rnd(0.7,2))
        else
          d3.round(rnd(radiusMin,radiusMax))
      )
      .angle( (d, i) ->angle(i) )
      tmp(d3.range(resolution))
        
  lineFunction = d3.svg.line().x((d)->d.x).y((d)->d.y)
    .interpolate("cardinal-closed") 
  
  getSmile = ()->
    pathinfo = [
      {"x":-smileWidth,"y":0},
      {"x":-smileWidth,"y":0},
      {"x":0,"y":rnd(-smileWidth*0.3,smileWidth*0.5)},
      {"x":smileWidth,"y":0},
      {"x":smileWidth,"y":0},
      {"x":0,"y":rnd(smileWidth*0.5,smileWidth*0.7)}
    ]
    lineFunction(pathinfo)
    
  dbounce = ()->
    outline.selectAll("path")
      .transition().ease("elastic").duration(rnd(200,2000))
      .attr({"d": (d) -> swing(resolutionFace,r,r*1.2)  })
    
    inner.transition().duration(100)
      .attr("opacity",0)
      .transition().duration(100).delay(100)
      .attr("opacity",10)   
      
    rotation = d3.round(rnd(-30,30))
    
    xpos+=rnd(-r,r)*0.5
    ypos+=rnd(-r,r)*0.5

    face
      .transition()
      .duration(()->rnd(100,2000))
      .attr("transform","translate("+xpos+","+ypos+")rotate("+rotation+")")
    
    smile
      .transition().ease("elastic")
      .duration(()->rnd(100,2000))
      .attr("d",getSmile)  
      
    for i in d3.range(d3.round(r*0.1))
      bg.append("circle")
        .attr("r",()->rnd(0,r*0.5))
        .style("fill",colorOne)
        .attr("transform",()->"translate("+rnd(r*-0.5,r*0.5)+",0)")
        .transition()
        .duration(()->rnd(1000,2000))
        .attr("r",0)
        .attr("transform",()->"translate(0,"+rnd(100,500)*-1+")")
        .remove()
      
  return hi

perlin = new ClassicalNoise()
svg = d3.select("svg").style("background","#5C1C28")

stuff = []
for i in d3.range(19)
  tmp = {"value":rnd(0,1)}
  stuff.push tmp

for e in stuff
  face = Hi()
  face(svg, tmp)