population/noise.html at master · guckstift/population · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
	<title>Noise Test</title>
</head>
<body>
	<canvas id="canvas" width="800" height="800"></canvas>
	<script type="module">
		import dom from "./src/utils/dom.js";
		import Perlin from "./src/utils/perlin.js";

		let canvas = dom.id("canvas");
		let w = canvas.width;
		let h = canvas.height;
		let ctx = canvas.getContext("2d");
		let imageData = ctx.getImageData(0, 0, w, h);
		let data = imageData.data;
		let perlin = new Perlin();

		for(let y=0, i=0; y<h; y++) {
			for(let x=0; x<w; x++) {
				//let f = noise2d(x, y, 0);
				let f = perlin.sample([x, y])
				let s = f * 255;
				data[i++] = s;
				data[i++] = s;
				data[i++] = s;
				data[i++] = 255;
			}
		}

		ctx.putImageData(imageData, 0, 0);
	</script>
</body>
</html>