Color noise in canvas

Woks with

by Elena Shevchuk

HTML

<canvas id="square" width=1000 height=1000></canvas>

JavaScript

window.onload = main;

function main() {
  var canvas = document.getElementById("square");
  var c = document.getElementById("square").getContext("2d");

  c.font = "bold 60pt sans-serif";
  c.lineWidth = 2; 
  c.strokeStyle = "#000";
  c.strokeRect(175, 25, 50, 325); 
  c.strokeText("<canvas>", 15, 330); 
  polygon(c, 3, 200, 225, 200); 
  polygon(c, 3, 200, 225, 100, 0, true); 
  c.clip();
  c.lineWidth = 10;
  c.stroke();
  c.fillStyle = "#aaa";
  c.fillRect(175, 25, 50, 325);
  c.fillStyle = "#888";
  c.fillText("<canvas>", 15, 330);

  setInterval(function() {
    smear(c, 15, 0, 0, 400, 400);
  }, 100);
}

smear.spectr = 0;

function smear(c, n, x, y, w, h) {
  var pixels = c.getImageData(x, y, w, h);
  var data = pixels.data;

  var spectrPause = 1000;
  for (var i = 1; i < data.length; i++) {
    if (i % 4 == 0) {
      if (data[i - 1] === 0) {
        continue;
      } else {
        if (Math.random() > 0.2) {
          if (smear.spectr < spectrPause) {
            data[i - 2] = 0;
            data[i - 3] = Math.random() * 255;
            data[i - 4] = Math.random() * 255;
          } else if (smear.spectr >= spectrPause && smear.spectr < spectrPause * 2) {
            data[i - 2] = Math.random() * 255;
            data[i - 3] = 0;
            data[i - 4] = Math.random() * 255;
          } else {
            data[i - 2] = Math.random() * 255;
            data[i - 3] = Math.random() * 255;
            data[i - 4] = Math.random() * 0;
          }

          if (smear.spectr === spectrPause * 3) {
            smear.spectr = 0;
          } else {
            smear.spectr++;
          }
        } else {
          data[i - 2] = data[i - 3] = data[i - 4] = 255;
        }
      }

    }
  }
  c.putImageData(pixels, x, y);
}

function polygon(c, n, x, y, r, angle, counterclockwise) {
  angle = angle || 0;
  counterclockwise = counterclockwise || false;
  c.moveTo(x + r * Math.sin(angle),
    y - r * Math.cos(angle));
  var delta = 2 * Math.PI / n;
  for (var i =...