@zsoltc/gradient-generator
Version:
Color gradient generator
64 lines (54 loc) • 2.65 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>noise</title>
</head>
<body>
<!--[if lt IE 9]>
<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<canvas id="canvas-gray" width="500" height="500" style="background: black"></canvas>
<canvas id="canvas-color" width="500" height="500" style="background: black"></canvas>
<script src="../dist/gradient-generator.js"></script>
<script src="lib/worley-noise.min.js"></script>
<script>
(function () {
var canvas1 = document.getElementById('canvas-gray'),
ctx1 = canvas1.getContext('2d'),
imageData1 = ctx1.getImageData(0, 0, canvas1.getAttribute('width'), canvas1.getAttribute('height')),
pixels1 = imageData1.data,
canvas2 = document.getElementById('canvas-color'),
ctx2 = canvas2.getContext('2d'),
imageData2 = ctx2.getImageData(0, 0, canvas2.getAttribute('width'), canvas2.getAttribute('height')),
pixels2 = imageData2.data,
gradient = GradientGenerator.createGradient(['#000000', '#c50106', '#f5f100', '#ffffff']),
noise = new WorleyNoise(50),
map,
val,
color,
base,
x,
y;
map = noise.getNormalizedMap(imageData1.width, function (e, m) {
return e(2) - e(1);
});
for (y = 0; y < imageData1.height; ++y) {
for (x = 0; x < imageData1.width; ++x) {
val = map[y * imageData1.width + x];
color = gradient.getColorBytesAt(val);
base = (y * imageData1.width + x) * 4;
pixels1[base] = pixels1[base + 1] = pixels1[base + 2] = val * 255;
pixels1[base + 3] = 255;
pixels2[base] = color.r;
pixels2[base + 1] = color.g;
pixels2[base + 2] = color.b;
pixels2[base + 3] = 255;
}
}
ctx1.putImageData(imageData1, 0, 0);
ctx2.putImageData(imageData2, 0, 0);
})();
</script>
</body>
</html>