lennyjpg's Hi

README.md

A fork of @lennyjpg's tributary inlet only lightly adapted for s.trokes.org.

hi.coffee

sw = 960
sh = 500

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

FreshFaces = () ->
  svg.selectAll().remove();

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

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

FreshFaces()

d3.select("button").on("click", FreshFaces)

hi.js

// Generated by CoffeeScript 1.6.2
(function() {
  var FreshFaces, Hi, rnd, sh, svg, sw;

  sw = 960;

  sh = 500;

  rnd = function(from, to) {
    return Math.random() * (to - from) + from;
  };

  Hi = function() {
    var bg, colorOne, colorTwo, dbounce, eyes, f, face, getSmile, hi, inner, lineFunction, outline, pathinfo, r, resolutionEyes, resolutionFace, rotation, smile, smileWidth, swing, xpos, ypos;

    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 = function(selection, data) {
      var blob, blobb;

      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": function(d) {
          return swing(resolutionFace, r, r * 1.3);
        }
      });
      blobb = outline.append("path").style("fill", "none").style("stroke", colorTwo).attr({
        "d": function(d) {
          return swing(resolutionFace, r, r * 1.3);
        }
      });
      eyes = face.append("g").attr("transform", function(d) {
        return "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", function(d) {
        return "translate(" + d + ",0)";
      }).attr({
        "d": function(d) {
          return 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", function(d) {
        return "translate(" + d + ",0)";
      }).attr({
        "d": function(d) {
          return swing(resolutionEyes, r * 0.1, r * 0.35);
        }
      });
      return smile = face.append("path").attr("d", getSmile()).style("fill", colorTwo).attr("transform", "translate(0," + rnd(r * 0.2, r * 0.5) + ")");
    };
    swing = function(resolution, radiusMin, radiusMax) {
      var angle, tmp;

      angle = d3.scale.linear().domain([0, resolution]).range([0, 2 * Math.PI]);
      tmp = d3.svg.line.radial().interpolate("basis-closed").tension(0).radius(function(d, i) {
        if (i === 5) {
          return d3.round(rnd(radiusMin, radiusMax) * 0.6);
        } else if (i === 0) {
          return d3.round(rnd(radiusMin, radiusMax) * rnd(0.7, 2));
        } else {
          return d3.round(rnd(radiusMin, radiusMax));
        }
      }).angle(function(d, i) {
        return angle(i);
      });
      return tmp(d3.range(resolution));
    };
    lineFunction = d3.svg.line().x(function(d) {
      return d.x;
    }).y(function(d) {
      return d.y;
    }).interpolate("cardinal-closed");
    getSmile = function() {
      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)
        }
      ];
      return lineFunction(pathinfo);
    };
    dbounce = function() {
      var i, _i, _len, _ref, _results;

      outline.selectAll("path").transition().ease("elastic").duration(rnd(200, 2000)).attr({
        "d": function(d) {
          return 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(function() {
        return rnd(100, 2000);
      }).attr("transform", "translate(" + xpos + "," + ypos + ")rotate(" + rotation + ")");
      smile.transition().ease("elastic").duration(function() {
        return rnd(100, 2000);
      }).attr("d", getSmile);
      _ref = d3.range(d3.round(r * 0.1));
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        i = _ref[_i];
        _results.push(bg.append("circle").attr("r", function() {
          return rnd(0, r * 0.5);
        }).style("fill", colorOne).attr("transform", function() {
          return "translate(" + rnd(r * -0.5, r * 0.5) + ",0)";
        }).transition().duration(function() {
          return rnd(1000, 2000);
        }).attr("r", 0).attr("transform", function() {
          return "translate(0," + rnd(100, 500) * -1 + ")";
        }).remove());
      }
      return _results;
    };
    return hi;
  };

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

  FreshFaces = function() {
    var e, face, i, stuff, tmp, _i, _j, _len, _len1, _ref, _results;

    svg.selectAll().remove();
    stuff = [];
    _ref = d3.range(99);
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      i = _ref[_i];
      tmp = {
        "value": rnd(0, 1)
      };
      stuff.push(tmp);
    }
    _results = [];
    for (_j = 0, _len1 = stuff.length; _j < _len1; _j++) {
      e = stuff[_j];
      face = Hi();
      _results.push(face(svg, tmp));
    }
    return _results;
  };

  FreshFaces();

  d3.select("button").on("click", FreshFaces);

}).call(this);

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>hi</title>
<style>
button {
  position: absolute;
  background: transparent;
  margin: 10px 384px;
  width: 180px;
  font-size: 18px;
  padding: 6px;
  top: 450px;
  border: thin dashed #440000;
}
</style>
<button type="button">!</button>

<body>
  <svg height="500" width="960"></svg>
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript" src="hi.js"></script>
</body>

thumbnail.png