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);
