Skip to content

Instantly share code, notes, and snippets.

@zamfi

zamfi/9753457.png

Last active August 29, 2015 13:57
Show Gist options
  • Save zamfi/9753457 to your computer and use it in GitHub Desktop.
Save zamfi/9753457 to your computer and use it in GitHub Desktop.
Download ZIP
Weird clock thing!
Raw
index.html
<html>
<head>
<title>D3 Test</title>
<script src="http://d3js.org/d3.v2.min.js"></script>
</head>
<body>
<script type="text/javascript">
var w = 500, h = 500;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// var scale = d3.scale.linear().domain([-10,10]).range([-200,200]);
var scale = d3.scale.linear();
var scaleT = 10 ;
// 4
// 2 0
// 5
// 3 1
// 6
function makeSegments(x, y) {
return [
{x: 2-x, y: -3-y, v: true},
{x: 2-x, y: 0-y, v: true},
{x: -1-x, y: -3-y, v: true},
{x: -1-x, y: 0-y, v: true},
{x: -1-x, y: -3-y, v: false},
{x: -1-x, y: 0-y, v: false},
{x: -1-x, y: 3-y, v: false},
].reverse();
}
var segmentLocations =
makeSegments(12, 0)
.concat(makeSegments(7, 0))
.concat(makeSegments(-6, 0))
.concat(makeSegments(-11, 0)).reverse();
// var segmentStates = segmentLocations.map(function() {return 0;});
var digits = [
[true, true, true, true, true, false, true],
[true, true, false, false, false, false, false],
[true, false, false, true, true, true, true],
[true, true, false, false, true, true, true],
[true, true, true, false, false, true, false],
[false, true, true, false, true, true, true],
[false, true, true, true, true, true, true],
[true, true, false, false, true, false, false],
[true, true, true, true, true, true, true],
[true, true, true, false, true, true, true],
[false, false, false, false, false, false, false]
]
function setSegments(segments, pos, digit) {
for (var i = 0; i < 7; ++i) {
segments[pos+i] = digits[digit][i] ? 0 : 90;
}
}
var line = d3.svg.line()
.x(function(d) {return scale(d[0]);})
.y(function(d) {return scale(d[1]);})
.interpolate('linear');
function generateTarget() {
var newSegments = [];
var d = new Date();
var h = (d.getHours() % 12) || 12;
var m = d.getMinutes();
var s = d.getSeconds();
var pos = Math.floor(Math.random()*4);
setSegments(newSegments, 21, Math.floor(h/10) || 10);
setSegments(newSegments, 14, h%10);
setSegments(newSegments, 7, Math.floor(m/10));
setSegments(newSegments, 0, m%10);
return newSegments;
}
function lastMismatch(a, b) {
if (a.length != b.length)
return -1;
for (var i = a.length-1; i >= 0; --i) {
if (a[i] != b[i]) {
return i;
}
}
return -1;
}
function redraw(target) {
var oldData = svg.selectAll(".segment").data();
if (oldData.length == 0)
oldData = segmentLocations.map(function() {return 0;});
var segments = svg.selectAll(".segment");
var pathGroup =
segments.data(oldData).enter()
.append("g")
.attr("class", "segment")
.attr("transform", "translate("+w/2+","+h/2+") scale("+scaleT+")");
pathGroup.append("path")
.attr("fill", "black")
.attr("d", function(d, i) {
var l = segmentLocations[i];
return line(l.v ?
[[l.x, l.y],
[l.x+0.5, l.y+0.5],
[l.x+0.5, l.y+2.5],
[l.x, l.y+3],
[l.x-0.5, l.y+2.5],
[l.x-0.5, l.y+0.5]] :
[[l.x, l.y],
[l.x+0.5, l.y+0.5],
[l.x+2.5, l.y+0.5],
[l.x+3, l.y],
[l.x+2.5, l.y-0.5],
[l.x+0.5, l.y-0.5]]
) + " Z" });
pathGroup.append("line")
.attr("x1", 0).attr("y1", 0)
.attr("x2", function(d, i) {
if (segmentLocations[i].v) {
return scale(segmentLocations[i].x)
} else {
return segmentLocations[i].x < 0 ?
scale(segmentLocations[i].x+3) :
scale(segmentLocations[i].x)
}
})
.attr("y2", function(d, i) {
return scale(segmentLocations[i].y)
})
.attr("stroke", "black")
.attr("stroke-width", "0.03");
var stop = true;
var delay = 0;
// for (var i = lastMismatch(current, target); i >= 0; i = lastMismatch(current, target)) {
var i = lastMismatch(oldData, target);
if (i >= 0) {
var delta = target[i] - oldData[i];
var nextIntermediary = oldData.map(function(x, idx) {
if (idx <= i)
return x + delta;
else
return x;
});
segments.data(nextIntermediary).transition()
.attr("transform", function(d) { return "translate("+w/2+","+h/2+") scale("+scaleT+") rotate("+(d)+")"; })
.duration(500)
}
}
redraw(generateTarget());
setInterval(function() {
redraw(generateTarget());
}, 700);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment