Color Noise in canvas - ver 2

Canvas animation with filling of color noise.

by Elena Shevchuk

HTML

<h2>Заливка двух контуров</h2>
  <div>
    <canvas id="figure" width=500 height=500></canvas>
  </div>
  <div>
    <canvas id="figure-2" width=500 height=500></canvas>
  </div>

JavaScript

window.onload = main;


function main() {
  var canvas = document.getElementById("figure");
  var canvas2 = document.getElementById("figure-2")
  var c = document.getElementById("figure").getContext("2d");
  var c2 = document.getElementById("figure-2").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);

  c2.drawImage(c.canvas, 0, 0);
  var cNoise = new ColorNoise(c, 15, 0, 0, 400, 400, 1000, true); // Линии разного цвета
  var c2Noise = new ColorNoise(c2, 15, 0, 0, 400, 400, 10, false); // Одного цвета
  setInterval(function() {
    cNoise.run();
    c2Noise.run();
  }, 100);


}

function ColorNoise(c, n, x, y, w, h, shiftCounter, crossline) {
  this.pixels = c.getImageData(x, y, w, h);
  this.data = this.pixels.data;
  this.counter = 0;
  this.shiftCounter = shiftCounter || 10; // Каждые shiftCounter раз меняем базовые установки
  console.log(this.shiftCounter);
  this.changeBaseColor();
  this.crossline = crossline || false; // много линий
  this.c = c;
  this.x = x;
  this.y = y;
}

ColorNoise.prototype = {
  debug: function() {
    console.log(this.shiftCounter, this.crossline, this.counter);
  },
  setRGB: function(data, i) {
    var data = this.data;
    var pos = this.colorRandom.pos;
    var color = this.colorRandom.color;
    switch (pos) {
      case 1:
        data[i - 2] = color;
        data[i - 3] = this.noiseColor();
        data[i - 4] = this.noiseColor();
        break;
      case 2:
        data[i - 2] = this.noiseColor();
        data[i - 3] = color;
        data[i - 4] = this.noiseColor();
        break;
      case 3:
        data[i - 2] = this.noiseColor();
        data[i - 3] =...