Skip to content

Instantly share code, notes, and snippets.

@lsbardel

lsbardel/.block

Last active January 4, 2017 07:44
Show Gist options
  • Save lsbardel/af6e6de7069a876fe5795c419a57edf1 to your computer and use it in GitHub Desktop.
Save lsbardel/af6e6de7069a876fe5795c419a57edf1 to your computer and use it in GitHub Desktop.
Download ZIP
Swimmer
Raw
.block
license: bsd-3-clause
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swimmer</title>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://giottojs.org/d3-canvas-transition/0.3.3/d3-canvas-transition.js"></script>
</head>
<body>
<div id="paper">
<label>
<input id='svg' name="type" type="radio" checked>
<span>svg</span>
</label>
<label>
<input id='canvas' name="type" type="radio">
<span>canvas</span>
</label>
</div>
<div id="example" style="max-width: 960px"></div>
<script>
(function () {
d3.select('#svg').on('click', function () {
draw('svg');
});
d3.select('#canvas').on('click', function () {
draw('canvas');
});
if (d3.resolution() > 1) {
d3.select('#paper').append('label').html(
"<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
);
d3.select('#canvas-low').on('click', function () {
draw('canvas', 1);
});
}
var sp = 30, radius = 20, duration = 2000, data = [], x, y, timer;
var pi = Math.PI, tau = 2*Math.PI;
for (var i=0; i<8; i++) {
for (var j = 0; j < 8; j++) {
x = (i - 3.5) * sp;
y = (j - 3.5) * sp;
data.push({x: x, y: y});
}
}
draw('svg');
function draw(type, r) {
var example = d3.select("#example"),
width = d3.getSize(example.style('width')),
height = Math.min(500, width);
example.select('.paper').remove();
var paper = example
.append(type)
.classed('paper', true)
.attr('width', width).attr('height', height).canvasResolution(r).canvas(true);
paper.append('rect').attr('width', width).attr('height', height).style('fill', '#444').style('stroke-width', 0);
var circles = paper.append('g')
.attr('transform', 'translate(' + width/2 + ',' + height/2 + ')rotate(45)')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.style('fill', '#fff')
.style('stroke-width', 0)
.attr('cx', function (d) {return d.x;})
.attr('cy', function (d) {return d.y;})
.attr('r', 8);
if (timer) timer.stop();
var t0 = d3.now(), t;
timer = d3.timer(function () {
t = (d3.now() - t0)/duration;
circles.attr('cx', xmove).attr('cy', ymove);
});
function xmove (d) {
return d.x + radius * Math.cos(tau * t + pi - .011 * d.y);
}
function ymove (d) {
return d.y + radius * Math.cos(tau * t + pi - .011 * d.x);
}
}
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment