Skip to content

Instantly share code, notes, and snippets.

@davo

davo/index.html

Forked from syntagmatic/index.html
Created October 18, 2016 05:26
Show Gist options
  • Save davo/cb26d11150080c24c390e81edfd927e8 to your computer and use it in GitHub Desktop.
Save davo/cb26d11150080c24c390e81edfd927e8 to your computer and use it in GitHub Desktop.
Download ZIP
2D Color Interpolation
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<body>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script>
var size = 12;
var step = 40;
var X = d3.scale.linear()
.domain([0, size])
.range(['white', 'steelblue']);
var Y = d3.scale.linear()
.domain([0, size])
.range(['white', 'brown']);
var canvas = d3.select('body').append('canvas')
.attr('width', size*step)
.attr('height', size*step)
.node();
var context = canvas.getContext('2d');
d3.range(0,size).forEach(function(y) {
d3.range(0,size).forEach(function(x) {
var color = d3.scale.linear()
.domain([-1,1])
.range([X(x), Y(y)])
.interpolate(d3.interpolateLab);
var strength = (y - x) / (size-1);
circle(x,y,color(strength));
});
});
function circle(x,y,color) {
context.fillStyle = color;
context.beginPath();
context.arc((x+1/2)*step,(y+1/2)*step,2*step/5,0,2*Math.PI);
context.fill();
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment