Tributary inlet

_.md

[ Launch: Tributary inlet ] 5193321 by lennyjpg

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"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

sw = tributary.sw
sh = tributary.sh

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

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)
    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


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

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

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