4096 random HSL-colors mapped to hue and luminace.
Inspired by Visualizing Algorithms.
height: 480 | |
license: gpl-3.0 |
4096 random HSL-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(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); | |
var dots = svg.append("g"); | |
var num = svg.append("text") | |
.attr("x", 5) | |
.attr("y", 15); | |
var counter = 0; | |
d3.timer(function() { | |
var hsl = sample(); | |
if (!hsl) return true; | |
dots.append("circle") | |
.attr("cx", x(hsl.h)) | |
.attr("cy", y(hsl.l)) | |
.attr("r", 0) | |
.style("fill", hsl.toString()) | |
.transition() | |
.attr("r", 4); | |
num.text(counter); | |
}); | |
function colorSampler(numSamplesMax) { | |
return function() { | |
if (++counter > numSamplesMax) return; | |
return d3.hsl( | |
Math.random() * 360, | |
Math.random(), | |
Math.random() | |
); | |
}; | |
} | |
</script> |