Skip to content

Instantly share code, notes, and snippets.

@syntagmatic
Last active April 25, 2017 16:26
Show Gist options
  • Save syntagmatic/0c3f102903311b51c12a26957c156f27 to your computer and use it in GitHub Desktop.
Save syntagmatic/0c3f102903311b51c12a26957c156f27 to your computer and use it in GitHub Desktop.
Lab Color Space Animation
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<canvas id="painting" width=960 height=500>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var canvas = document.getElementById("painting");
var ctx = canvas.getContext("2d");
d3.timer(function(elapsed) {
d3.range(0, canvas.width).forEach(function(x) {
var l = 65;
var a = -100+200*x/canvas.width
var b = 100*Math.sin(elapsed/600)
ctx.fillStyle = d3.lab(l,a,b)
ctx.fillRect(x, 0, 1, canvas.height)
})
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment