mirror of
https://github.com/vrld/hump.git
synced 2024-11-23 12:24:19 +00:00
219 lines
6.8 KiB
JavaScript
219 lines
6.8 KiB
JavaScript
(function() {
|
|
"use strict";
|
|
|
|
// DISCLAIMER: I just started learning d3, so this is certainly not good
|
|
// idiomatic d3 code. But hey, it works (kinda).
|
|
|
|
var tweens = {
|
|
'out': function(f) { return function(s) { return 1-f(1-s) } },
|
|
'chain': function(f1, f2) { return function(s) { return ((s<.5) ? f1(2*s) : 1+f2(2*s-1)) * .5 } },
|
|
'linear': function(s) { return s },
|
|
'quad': function(s) { return s*s },
|
|
'cubic': function(s) { return s*s*s },
|
|
'quart': function(s) { return s*s*s*s },
|
|
'quint': function(s) { return s*s*s*s*s },
|
|
'sine': function(s) { return 1 - Math.cos(s*Math.PI/2) },
|
|
'expo': function(s) { return Math.pow(2, 10*(s-1)) },
|
|
'circ': function(s) { return 1 - Math.sqrt(Math.max(0,1-s*s)) },
|
|
'back': function(s) { var b = 1.70158; return s*s*((b+1)*s - b) },
|
|
'bounce': function(s) {
|
|
return Math.min(
|
|
7.5625 * Math.pow(s, 2),
|
|
7.5625 * Math.pow((s - .545455), 2) + .75,
|
|
7.5625 * Math.pow((s - .818182), 2) + .90375,
|
|
7.5625 * Math.pow((s - .954546), 2) + .984375)
|
|
},
|
|
'elastic': function(s) {
|
|
return -Math.sin(2/0.3 * Math.PI * (s-1) - Math.asin(1)) * Math.pow(2, 10*(s-1))
|
|
},
|
|
};
|
|
var tweenfunc = tweens.linear;
|
|
|
|
|
|
var width_graph = 320,
|
|
width_anim_move = 110,
|
|
width_anim_rotate = 110,
|
|
width_anim_size = 110,
|
|
height = 250;
|
|
|
|
// "UI"
|
|
var graph_ui = d3.select("#tween-graph").append("div")
|
|
.attr("id", "tween-graph-ui");
|
|
// rest see below
|
|
|
|
// the graph
|
|
var graph = d3.select("#tween-graph").append("svg")
|
|
.attr("width", width_graph).attr("height", height);
|
|
|
|
// background
|
|
graph.append("rect")
|
|
.attr("width", "100%").attr("height", "100%")
|
|
.attr("style", "fill:rgb(240,240,240);stroke-width:1;stroke:rgb(100,100,100);");
|
|
|
|
var y_zero = height * .78, y_one = height * .22;
|
|
graph.append("rect")
|
|
.attr("y", y_one)
|
|
.attr("width", "100%").attr("height", y_zero - y_one)
|
|
.attr("style", "fill:steelblue;fill-opacity:.3;stroke-width:1;stroke:rgba(100,100,100,.7)");
|
|
|
|
// time arrow
|
|
graph.append("defs")
|
|
.append("marker")
|
|
.attr("id", "triangle")
|
|
.attr("viewBox", "0 0 10 10")
|
|
.attr("refX", 1).attr("refY", 5)
|
|
.attr("markerWidth", 4)
|
|
.attr("markerHeight", 4)
|
|
.attr("orient", "auto")
|
|
.attr("style", "fill:rgba(0,0,0,.5)")
|
|
.append("path").attr("d", "M 0 0 L 10 5 L 0 10 z");
|
|
|
|
graph.append("line")
|
|
.attr("x1", width_graph/2-80)
|
|
.attr("x2", width_graph/2+80)
|
|
.attr("y1", y_zero + 40).attr("y2", y_zero + 40)
|
|
.attr("style", "stroke-width:2;stroke:rgba(0,0,0,.5)")
|
|
.attr("marker-end", "url(#triangle)");
|
|
|
|
graph.append("text")
|
|
.text("Time")
|
|
.attr("x", width_graph/2).attr("y", y_zero + 55)
|
|
.attr("style", "text-anchor:middle;fill:rgba(0,0,0,.5);font-size:15px");
|
|
|
|
// the actual graph
|
|
var curve = d3.svg.line()
|
|
.x(function(x) { return x*width_graph; })
|
|
.y(function(x) { return tweenfunc(x) * (y_one - y_zero) + y_zero; })
|
|
|
|
var graph_curve = graph.append("path").attr("d", curve(d3.range(0,1.05,.005)))
|
|
.attr("style", "fill:none;stroke-width:2;stroke:seagreen;");
|
|
|
|
var graph_marker = graph.append("circle")
|
|
.attr("r", 5)
|
|
.attr("style", "stroke:goldenrod;fill:none;stroke-width:3");
|
|
|
|
// finally, a label
|
|
var graph_label = graph.append("text")
|
|
.text("linear")
|
|
.attr("x", width_graph/2).attr("y", 20)
|
|
.attr("style", "text-anchor:middle;font-weight:bold;font-size:15px;");
|
|
|
|
|
|
// animation examples - moving ball
|
|
var anim_move = d3.select("#tween-graph").append("svg")
|
|
.attr("width", width_anim_move).attr("height", height);
|
|
|
|
anim_move.append("rect")
|
|
.attr("width", "100%").attr("height", "100%")
|
|
.attr("style", "fill:rgb(240,240,240);stroke-width:1;stroke:rgb(100,100,100);");
|
|
|
|
anim_move.append("rect")
|
|
.attr("width", 10).attr("height", (y_zero - y_one))
|
|
.attr("x", width_anim_move/2-5).attr("y", y_one)
|
|
.attr("style", "fill:black;opacity:.1");
|
|
|
|
var anim_move_ball = anim_move.append("circle")
|
|
.attr("cx", width_anim_move/2).attr("cy", y_one)
|
|
.attr("r", 17)
|
|
.attr("style", "fill:steelblue;stroke:rgb(90,90,90);stroke-width:5;");
|
|
|
|
// animation examples - rotating square
|
|
var anim_rotate = d3.select("#tween-graph").append("svg")
|
|
.attr("width", width_anim_size).attr("height", height);
|
|
|
|
anim_rotate.append("rect")
|
|
.attr("width", "100%").attr("height", "100%")
|
|
.attr("style", "fill:rgb(240,240,240);stroke-width:1;stroke:rgb(100,100,100);");
|
|
|
|
var w = width_anim_size/2;
|
|
var anim_rotate_square = anim_rotate.append("rect")
|
|
.attr("x", -w/2).attr("y", -w/4)
|
|
.attr("width", w).attr("height", w/2)
|
|
.attr("style", "fill:steelblue;stroke:rgb(90,90,90);stroke-width:5;");
|
|
|
|
// animation examples - resizing ellipse
|
|
var anim_size = d3.select("#tween-graph").append("svg")
|
|
.attr("width", width_anim_size).attr("height", height);
|
|
|
|
anim_size.append("rect")
|
|
.attr("width", "100%").attr("height", "100%")
|
|
.attr("style", "fill:rgb(240,240,240);stroke-width:1;stroke:rgb(100,100,100);");
|
|
|
|
anim_size.append("ellipse")
|
|
.attr("cx", width_anim_size/2).attr("cy", height/2)
|
|
.attr("rx", 40).attr("ry", 120)
|
|
.attr("style", "fill:rgb(150,150,150);stroke:black;stroke-width:2;opacity:.1");
|
|
|
|
var anim_size_ellipse = anim_size.append("ellipse")
|
|
.attr("cx", width_anim_size/2).attr("cy", height/2)
|
|
.attr("rx", 40).attr("ry", 40)
|
|
.attr("style", "fill:steelblue;stroke:rgb(90,90,90);stroke-width:5;");
|
|
|
|
|
|
// make it move!
|
|
var t = 0;
|
|
window.setInterval(function() {
|
|
t = (t + .025 / 3);
|
|
if (t > 1.3) { t = -.3; }
|
|
var tt = Math.max(Math.min(t, 1), 0);
|
|
|
|
var s = tweenfunc(tt)
|
|
var yy = s * (y_one - y_zero) + y_zero;
|
|
var translate = "translate("+(width_anim_size/2)+" "+(height/2)+")";
|
|
var rotate = "rotate(" + (s * 360) + ")";
|
|
|
|
graph_marker.attr("cx", tt*width_graph).attr("cy", yy);
|
|
anim_move_ball.attr("cy", y_one + y_zero - yy);
|
|
anim_rotate_square.attr("transform", translate + " " + rotate);
|
|
anim_size_ellipse.attr("ry", s * 80 + 40);
|
|
}, 25);
|
|
|
|
|
|
// ui continued
|
|
graph_ui.append("strong").text("Function: ");
|
|
var select_modifier = graph_ui.append("select");
|
|
select_modifier.append("option").text("in");
|
|
select_modifier.append("option").text("out");
|
|
select_modifier.append("option").text("in-out");
|
|
select_modifier.append("option").text("out-in");
|
|
graph_ui.append("strong").text("-")
|
|
|
|
var select_func = graph_ui.append("select")
|
|
var funcs = [];
|
|
for (var k in tweens)
|
|
{
|
|
if (k != "out" && k != "chain")
|
|
{
|
|
select_func.append("option").text(k);
|
|
funcs.push(k);
|
|
}
|
|
}
|
|
|
|
var change_tweenfunc = function()
|
|
{
|
|
var fname = funcs[select_func.node().selectedIndex];
|
|
var mod = select_modifier.node().selectedIndex;
|
|
|
|
tweenfunc = tweens[fname];
|
|
if (mod == 1) // out
|
|
tweenfunc = tweens.out(tweenfunc);
|
|
else if (mod == 2) // in-out
|
|
tweenfunc = tweens.chain(tweenfunc, tweens.out(tweenfunc));
|
|
else if (mod == 3) // out-in
|
|
tweenfunc = tweens.chain(tweens.out(tweenfunc), tweenfunc);
|
|
|
|
// update curve
|
|
graph_curve.attr("d", curve(d3.range(0,1.05,.005)))
|
|
|
|
// update label
|
|
if (mod != 0)
|
|
graph_label.text((['in','out','in-out','out-in'])[mod] + "-" + fname);
|
|
else
|
|
graph_label.text(fname);
|
|
}
|
|
|
|
select_func.on("change", change_tweenfunc);
|
|
select_modifier.on("change", change_tweenfunc);
|
|
|
|
})();
|