Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid

Andrew-Reid/index.html

Last active April 5, 2024 20:46
Show Gist options
  • Save Andrew-Reid/31088324b5fafe72b3059e8700c19b8b to your computer and use it in GitHub Desktop.
Save Andrew-Reid/31088324b5fafe72b3059e8700c19b8b to your computer and use it in GitHub Desktop.
Download ZIP
~ 20 000 Simultaneous Canvas Transitions
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas, Lots of Transitions</title>
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
</head>
<body>
<canvas width=960 height=500></canvas>
<script>
var width = 960;
var height = 500;
var data = d3.range(19200)
var canvas = d3.select("canvas")
var context = canvas.node().getContext("2d");
var faux = d3.select(document.createElement("custom"));
var rects = faux.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width",4)
.attr("height",4)
.attr("x", function(d) { return d % (960/5) * 5; })
.attr("y", function(d) { return Math.floor (d/(960/5)) * 5; })
.attr("fill", "steelblue")
rects.transition()
.duration(3000)
.delay(function(d) { return d % (960/5) + Math.floor(d/(960/5) ) })
.attr("x", function(d) { return 960 - d % (960/5) * 5; })
.attr("y", function(d) { return 500 - Math.floor (d/(960/5)) * 5; })
.attr("fill","lightgreen");
// rendering function, called repeatedly:
function render() {
context.clearRect(0, 0, width, height);
faux.selectAll("rect").each(function() {
var sel = d3.select(this);
context.beginPath();
context.fillStyle = sel.attr("fill");
context.fillRect(sel.attr("x"),sel.attr("y"),4,4);
})
window.requestAnimationFrame(render)
}
window.requestAnimationFrame(render)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment