Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid
Last active October 17, 2023 02:42
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Andrew-Reid/31088324b5fafe72b3059e8700c19b8b to your computer and use it in GitHub Desktop.
~ 20 000 Simultaneous Canvas Transitions
<!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