Skip to content

Instantly share code, notes, and snippets.

@supereggbert
Created August 17, 2014 06:44
Show Gist options
  • Save supereggbert/bb4993fdec99fa165e39 to your computer and use it in GitHub Desktop.
Save supereggbert/bb4993fdec99fa165e39 to your computer and use it in GitHub Desktop.
Diamond-square Algorithm
<!doctype html>
<html>
<head>
<title>Diamond-square</title>
</head>
<body>
<script>
// PRNG
function random(i) {
return (Math.sin(Math.sin(1e9*i)*1e6)+1)*0.5;
}
// Seemless clouds
// size is power of two
function diamondSquare(size, seed) {
var data = [
[.5, .5],
[.5, .5]
];
var canvas = document.createElement('canvas');
canvas.width = canvas.height = size;
var ctx = canvas.getContext('2d');
var imgData = ctx.createImageData(size, size);
var height = 1.5;
var levels = Math.log(size) / Math.log(2);
for (var i = 0; i < levels; i++) {
var output = [];
height /= 2;
var len = data.length * 2 - 1;
for (var x = 0; x < len; x++) {
var a = [];
output.push(a);
for (var y = 0; y < len; y++) {
var x1 = (x / 2) | 0,
y1 = (y / 2) | 0,
x2 = (x / 2 + .5) | 0,
y2 = (y / 2 + .5) | 0;
var val = data[x1][y1] + data[x1][y2] + data[x2][y1] + data[x2][y2];
a.push(val * 0.25 + (random((x % (len - 1) + 1) * (y % (len - 1) + 1) * seed) - 0.5) * height);
if (i == levels - 1) {
var j = (y * size + x) * 4;
imgData.data[j] = imgData.data[j + 1] = imgData.data[j + 2] = output[x][y] * 255;
imgData.data[j + 3] = 255;
}
}
}
data = output;
}
ctx.putImageData(imgData, 0, 0);
return canvas;
};
document.body.appendChild(diamondSquare(512, 9));
</script>
</body>
</html>
@angelcasm
Copy link

hey men i have a issue but i new in github you cant draw a cartesian coordinates in your d3 js example http://bl.ocks.org/supereggbert/aff58196188816576af0 i search info for this but i not find it sorry for my english
if you known a one way for this please help me is for a school work thanks for your time
regards.

Mario Castillo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment