Skip to content

Instantly share code, notes, and snippets.

@lsbardel

lsbardel/.block

Last active December 25, 2016 10:22
Show Gist options
  • Save lsbardel/c499fa40e48df36df0dc2ab0731c86d4 to your computer and use it in GitHub Desktop.
Save lsbardel/c499fa40e48df36df0dc2ab0731c86d4 to your computer and use it in GitHub Desktop.
Download ZIP
Concurrent Canvas Transitions
Raw
.block
license: bsd-3-clause
Raw
README.md
Raw
index.html
<!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.5/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);
example.select('.paper').remove();
var paper = example
.append(type)
.classed('paper', true)
.attr('width', width).attr('height', height).canvasResolution(r).canvas(true);
var twizzleLock = {},
plonkLock = {};
paper.style("fill", "#e5f5f9")
.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
.style("stroke-linejoin", "round")
.append("path")
.attr("fill", "black")
.attr("stroke", "red")
.attr("d", d3.symbol().type(d3.symbolCross).size(50000))
.call(twizzle, 20000)
.call(plonk, 2000);
function twizzle(path, duration) {
d3.select(twizzleLock)
.transition()
.duration(duration)
.tween("attr:transform", function () {
var i = d3.interpolateString("rotate(0)", "rotate(720)");
return function (t) {
path.attr("transform", i(t));
};
});
d3.timeout(function () {
twizzle(path, duration);
}, (Math.random() + 1) * duration);
}
function plonk(path, duration) {
d3.select(plonkLock)
.transition()
.duration(duration)
.tween("style:stroke-width", function () {
var i = d3.interpolateString("0px", "30px");
return function (t) {
path.style("stroke-width", i(t));
};
})
.transition()
.tween("style:stroke-width", function () {
var i = d3.interpolateString("30px", "0px");
return function (t) {
path.style("stroke-width", i(t));
};
});
d3.timeout(function () {
plonk(path, duration);
}, (Math.random() + 2) * duration);
}
}
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment