Canvas2D: Grain

README.md

Canvas2D: Grain

view on jsgist

index.css

body {
}
div {
  position: relative;
}
img {
  display: block;
}
canvas {
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  display: block;
}

index.html

<div>
  <img>
  <canvas></canvas>
</div>

index.js

function noise(u, v) {
  const dot = u * 12.9898 * 2.0 + v * 78.233 * 2.0;
  const s = Math.sin(dot) * 43758.5453 % 1;
  return Math.abs(s % 1);
}

function grain(ctx) {
  const {width, height} = ctx.canvas;
  const imgData = new ImageData(width, height);
  const pixels = new Uint32Array(imgData.data.buffer);
  let offset = 0;
  for (let y = 0; y < height; ++y) {
    for (let x = 0; x < width; ++x) {
      const n = noise(x / width, y / height) * 255 | 0;
      pixels[offset++] = n << 24 | n << 16 | n << 8 | n;
    }
  }
  ctx.putImageData(imgData, 0, 0);
}

async function main() {
  // https://live.staticflickr.com/65535/52834380994_6fd5e4b7a2_h.jpg
  const url = 'https://live.staticflickr.com/65535/52834380994_6fd5e4b7a2_h.jpg';
  const img = document.querySelector('img');
  //const img = new Image();
  img.src = url;
  await img.decode();

  const ctx = document.querySelector('canvas').getContext('2d');
  ctx.canvas.width = img.naturalWidth;
  ctx.canvas.height = img.naturalHeight;

  grain(ctx);
}

main();

jsGist.json

{"name":"Canvas2D: Grain","settings":{},"filenames":["index.html","index.css","index.js"]}