Skip to content

Instantly share code, notes, and snippets.

@blinsay

blinsay/README.md

Last active August 29, 2015 14:04
Show Gist options
  • Save blinsay/78a2d8b43abee3dc5a37 to your computer and use it in GitHub Desktop.
Save blinsay/78a2d8b43abee3dc5a37 to your computer and use it in GitHub Desktop.
Download ZIP
Contour Lines
Raw
README.md

Pixel-by-pixel contour lines over perlin noise.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: rgb(255, 255, 255);
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/d2fn/raw/8777d620caef32959713/perlin.js"></script>
<script>
var width = 960,
height = 500,
noiseScale = 0.006,
epsilon = 0.005,
numContours = 20;
var contours = [];
for (var n = 0; n < numContours; n++) {
contours.push(n / numContours);
}
// Canvas
var canvas = d3.select("body")
.append("canvas")
.attr({width: width, height: height});
var context = canvas.node().getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(-1, -1, width, height);
var imageData = context.getImageData(0, 0, width, height);
// Math
var noise = perlin.noise(noiseScale);
for (var i = 0; i < width; i++) {
for (var j = 0; j < height; j++) {
for (var ci = 0; ci < contours.length; ci++) {
var contour = contours[ci];
if (Math.abs(noise(i, j) - contour) < epsilon) {
setPixel(imageData, i, j, 255, 255, 255, 255);
continue;
}
}
// contours.forEach(function(contour) {
// if (Math.abs(noise(i, j) - contour) < epsilon) {
// setPixel(imageData, i, j, 255, 255, 255, 255);
// }
// })
}
}
context.putImageData(imageData, 0, 0);
function setPixel(idata, x, y, r, g, b, a) {
var idx = (x + (y * idata.width)) * 4;
idata.data[idx + 0] = r;
idata.data[idx + 1] = g;
idata.data[idx + 2] = b;
idata.data[idx + 3] = a;
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment