zamfi/9753457.png

## 9753457.png

      
    Raw
  

              9753457.png
            
          
## 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>
	<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>