A fork of @lennyjpg’s tributary inlet only lightly adapted for s.trokes.org.
<!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="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="hi.js"></script>
</body>
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)
// 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);