Function generateProceduralTexture

src/tools/texture-lab/utils.js:238–319

(type, size = 256)

};

export const generateProceduralTexture = (type, size = 256) => {
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(size, size);
  const data = imageData.data;

  const seededRandom = seed => {
    const x = Math.sin(seed) * 10000;
    return x - Math.floor(x);
  };

  switch (type) {
    case 'paper': {
      for (let i = 0; i < data.length; i += 4) {
        const px = (i / 4) % size;
        const py = Math.floor(i / 4 / size);
        const noise1 = seededRandom(px * 0.1 + py * 0.1);
        const noise2 = seededRandom(px * 0.05 + py * 0.2 + 1000);
        const value = Math.round((noise1 * 0.7 + noise2 * 0.3) * 60 + 195);
        data[i] = data[i + 1] = data[i + 2] = value;
        data[i + 3] = 255;
      }
      break;
    }

    case 'film-grain': {
      for (let i = 0; i < data.length; i += 4) {
        const noise = seededRandom(i);
        const value = Math.round(noise * 255);
        data[i] = data[i + 1] = data[i + 2] = value;
        data[i + 3] = Math.round(noise * 100);
      }
      break;
    }

    case 'canvas': {
      for (let i = 0; i < data.length; i += 4) {
        const px = (i / 4) % size;
        const py = Math.floor(i / 4 / size);
        const weave = (Math.sin(px * 0.5) * 0.5 + 0.5) * (Math.sin(py * 0.5) * 0.5 + 0.5);
        const noise = seededRandom(i) * 0.2;
        const value = Math.round((weave + noise) * 60 + 180);
        data[i] = data[i + 1] = data[i + 2] = value;
        data[i + 3] = 255;
      }
      break;
    }

    case 'dust': {
      for (let i = 0; i < data.length; i += 4) {
        const noise = seededRandom(i);
        if (noise > 0.98) {
          data[i] = data[i + 1] = data[i + 2] = 0;
          data[i + 3] = Math.round(seededRandom(i + 1) * 200);
        } else if (noise > 0.95) {
          data[i] = data[i + 1] = data[i + 2] = 255;