Skip to content

Instantly share code, notes, and snippets.

@lsbardel
Last active December 27, 2016 18:40
Show Gist options
  • Save lsbardel/d8e7d97f25b9ce703f923d5f15bc3402 to your computer and use it in GitHub Desktop.
Save lsbardel/d8e7d97f25b9ce703f923d5f15bc3402 to your computer and use it in GitHub Desktop.
Rainbow Pack on Canvas
license: bsd-3-clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Concurrent Canvas Transitions</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://giottojs.org/d3-canvas-transition/0.2.6/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);
});
}
draw('svg');
function draw(type, r) {
var example = d3.select("#example"),
width = d3.getSize(example.style('width')),
height = Math.min(500, width),
size = width;
example.select('.paper').remove();
var paper = example
.append(type)
.classed('paper', true)
.attr('width', width).attr('height', height).canvasResolution(r).canvas(true);
var color = d3.scaleSequential(d3.interpolateRainbow)
.domain([0, 2 * Math.PI]);
var circles = d3.packSiblings(d3.range(2000)
.map(d3.randomUniform(8, 26))
.map(function (r) {
return {r: r};
}))
.filter(function (d) {
return -500 < d.x && d.x < 500 && -500 < d.y && d.y < 500;
});
paper
.append('rect')
.style("fill", '#333')
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
paper
.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
.selectAll("circle")
.data(circles)
.enter().append("circle")
.style("fill", function (d) {
return color(d.angle = Math.atan2(d.y, d.x));
})
.attr("cx", function (d) {
return Math.cos(d.angle) * (size / Math.SQRT2 + 30);
})
.attr("cy", function (d) {
return Math.sin(d.angle) * (size / Math.SQRT2 + 30);
})
.attr("r", function (d) {
return d.r - 0.25;
})
.transition()
.ease(d3.easeCubicOut)
.delay(function (d) {
return Math.sqrt(d.x * d.x + d.y * d.y) * 10;
})
.duration(1000)
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment