4096 random RGB-colors mapped to hue and luminace.
Inspired by Visualizing Algorithms.
height: 480 | |
license: gpl-3.0 |
4096 random RGB-colors mapped to hue and luminace.
Inspired by Visualizing Algorithms.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var width = 960, | |
height = 480; | |
var sample = colorSampler(width, height, 4096); | |
var x = d3.scale.linear() | |
.domain([0, 360]) | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.timer(function() { | |
for (var i = 0; i < 10; ++i) { | |
var hsl = sample(); | |
if (!hsl) return true; | |
svg.append("circle") | |
.attr("cx", x(hsl.h)) | |
.attr("cy", y(hsl.l)) | |
.attr("r", 0) | |
.style("fill", hsl.toString()) | |
.transition() | |
.attr("r", 4); | |
} | |
}); | |
function colorSampler(width, height, numSamplesMax) { | |
var numSamples = 0; | |
return function() { | |
if (++numSamples > numSamplesMax) return; | |
return d3.rgb( | |
Math.floor(Math.random() * 256), | |
Math.floor(Math.random() * 256), | |
Math.floor(Math.random() * 256) | |
).hsl(); | |
}; | |
} | |
</script> |