add simplex noise test (/simplex.html)

1 year ago · 9ba37c04a7
parent 7711c112e2
commit 9ba37c04a7
2 changed files with 58 additions and 0 deletions
--- a/simplex.html
+++ b/simplex.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Simplex Noise Test</title>
+    <style>
+      body, html { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; background: black; }
+      canvas { display: block; width: 1024px; height: 768px; margin: calc(50vh - 768px / 2) auto 0; border: 2px solid #333; }
+    </style>
+  </head>
+  <body>
+    <canvas></canvas>
+    <script type="module" src="/src/simplex-demo.ts"></script>
+  </body>
+</html>
--- a/src/simplex-demo.ts
+++ b/src/simplex-demo.ts
@ -0,0 +1,44 @@
+import alea from 'alea'
+import { createNoise2D } from "simplex-noise";
+
+const canvas = document.getElementsByTagName('canvas')[0];
+canvas.width = 1024;
+canvas.height = 768;
+
+const ctx = canvas.getContext('2d');
+if (!ctx) throw new Error('cannot create drawing context')
+
+const image = ctx.createImageData(canvas.width, canvas.height);
+const data = image.data;
+
+const seedFromUrl = decodeURIComponent(location.search.slice(1))
+const seed = seedFromUrl || 'Dig dat seed!'
+const prng = alea(seed)
+const noise = createNoise2D(prng)
+
+function paint(data: Uint8ClampedArray, w: number, h: number, steps = 100, threshold = 0, inverse = false) {
+  for (let x = 0; x < w; x++) {
+    for (let y = 0; y < h; y++) {
+      let value = noise(x / steps, y / steps);
+      value = 128 - 128 * value;
+      // value = Math.abs(256 * value);
+
+      const cell = (x + y * w) * 4;
+      if (threshold) value = value < threshold ? 0 : 255
+      if (inverse) value = 255 - value
+      data[cell] = value * x / y;  // red
+      data[cell + 1] = value * y / x;  // green
+      data[cell + 2] = 0;  // blue
+      // data[cell] += Math.max(0, (25 - value) * 8);
+      data[cell + 3] = 255; // alpha.
+    }
+  }
+}
+
+console.time('simplex canvas')
+paint(data, 1024, 768, 100)
+console.timeEnd('simplex canvas')
+
+ctx.fillStyle = 'black'
+ctx.fillRect(0, 0, 100, 100);
+ctx.putImageData(image, 0, 0);