From 9ba37c04a7110a292f4218c05916ae838af7e525 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norman=20K=C3=B6hring?= Date: Sun, 12 Feb 2023 20:17:01 +0100 Subject: [PATCH] add simplex noise test (/simplex.html) --- simplex.html | 14 ++++++++++++++ src/simplex-demo.ts | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 simplex.html create mode 100644 src/simplex-demo.ts diff --git a/simplex.html b/simplex.html new file mode 100644 index 0000000..065f847 --- /dev/null +++ b/simplex.html @@ -0,0 +1,14 @@ + + + + Simplex Noise Test + + + + + + + diff --git a/src/simplex-demo.ts b/src/simplex-demo.ts new file mode 100644 index 0000000..fdd4efc --- /dev/null +++ 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);