glitched-canvas-cover.js

const glitch = require('glitch-canvas');
const canvasCover = require('./lib/canvas-cover.js');

const canvas = document.getElementById('canvas');
sizeCanvas();

const ctx = canvas.getContext('2d');

const image = new Image();
image.src = '/assets/images/stock.jpg';
image.onload = () => { glitchImage(); };

window.onresize = sizeCanvas;

function sizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

function glitchImage() {
  let params = {
    seed: randomFromRange(0, 99),
    quality: randomFromRange(0, 99),
    amount: randomFromRange(0, 99),
    iterations: randomFromRange(0, 99)
  };
  let duration = randomFromRange(0, 500);
  let countdown = randomFromRange(0, 5000);

  glitch(params)
    .fromImage(image)
    .toImage()
    .then((glitchedImage) => {
      drawScaledImage(glitchedImage);
      window.setTimeout(() => { drawScaledImage(image); }, duration);
      window.setTimeout(() => { glitchImage(); }, countdown);
    });
}

function randomFromRange(min, max) {
  return Math.random() * (max - min) + min;
}

function drawScaledImage(image) {
  canvasCover.drawImageProp(ctx, image, 0, 0, canvas.width, canvas.height);
}