| 6 | const noise4D = createNoise4D(); |
| 7 | |
| 8 | function visualize(title, fn) { |
| 9 | const canvas = document.createElement('canvas'); |
| 10 | const s = 512; |
| 11 | canvas.width = s; |
| 12 | canvas.height = s; |
| 13 | const ctx = canvas.getContext('2d'); |
| 14 | if (ctx == null) throw new Error('Canvas 2d not supported'); |
| 15 | const imageData = ctx.getImageData(0, 0, s, s); |
| 16 | for (let i = 0; i < imageData.data.length; i++) { |
| 17 | const x = (fn(i % 512, ~~(i / 512)) + 1) * 128; |
| 18 | imageData.data[i * 4] = x; |
| 19 | imageData.data[i * 4 + 1] = x; |
| 20 | imageData.data[i * 4 + 2] = x; |
| 21 | imageData.data[i * 4 + 3] = 255; |
| 22 | } |
| 23 | ctx.putImageData(imageData, 0, 0); |
| 24 | const h2 = document.createElement('h2'); |
| 25 | h2.innerHTML = title; |
| 26 | document.body.appendChild(h2); |
| 27 | document.body.appendChild(canvas); |
| 28 | } |
| 29 | |
| 30 | visualize('noise2D x1', function (x, y) { |
| 31 | return noise2D(x, y); |