Infinite Noise - OpenProcessing

mySketch.js
LeafletP5Bridge.js
style.css
index.html
xxxxxxxxxx
 
/******************
Code by Vamoss
Original code link:
https://openprocessing.org/sketch/1197168
​
Author links:
http://vamoss.com.br
http://twitter.com/vamoss
http://github.com/vamoss
******************/
​
function defineSketch(coords){
  return function(p) {
    
    var colors = [p.color("#FFC30F"), p.color("#581845"), p.color("#900C3F"), p.color("#C70039"), p.color("#FF5733"), p.color("#FFC30F")];
    const size = 8;
    var tileX, tileY, zoomResolution;
    
    p.setup = function() {
      p.createCanvas(256, 256);
      p.background(0);
      p.noStroke();
​
      zoomResolution = Math.pow(2, (map.getMaxZoom()-coords.z));
      tileX = coords.x * zoomResolution;
      tileY = coords.y * zoomResolution;
    };
​
    p.draw = function() {
      //noise background
      let time = new Date().getTime()/1000;
      let scale = zoomResolution/p.width;
      for(let x = 0; x < p.width; x+=size){
        for(let y = 0; y < p.height; y+=size){
          const noiseScale = 800;
          let angle = p.noise((x * scale + tileX) / noiseScale, (y * scale + tileY) / noiseScale, time/10) * p.TWO_PI * 10;
          let col = lerpColors(angle%p.TWO_PI/p.TWO_PI, colors);
          
          //super slow
          //p.fill(col.r, col.g, col.b);
          //p.rect(x, y, size, size);
          
          //fast hack
          p.drawingContext.fillStyle = 'rgb(' + col.r + ', ' + col.g + ', ' + col.b + ')';
          p.drawingContext.fillRect(x, y, size, size);
          
        }
      }
      
      p.fill(0);//fix hack
      p.fill(255);
      p.ellipse(p.mouseX, p.mouseY, 50, 50);
    };
    
    /**
     * lerp color from multiple color array
     * param {Integer} [t] lerp factor from 0 to 1
     * param {Array} [[color, color]] colors to lerp, minimum 2 colors in array
     */
    function lerpColors(t, colors)
    {
      let i = Math.floor(t*(colors.length-1));
      if(i < 0) return colors[0];
      if(i >= colors.length-1) return colors[colors.length-1];
​
      let percent = (t - i / (colors.length-1)) * (colors.length-1);
      return {
        r: colors[i]._getRed() + percent*(colors[i+1]._getRed()-colors[i]._getRed()),
        g: colors[i]._getGreen() + percent*(colors[i+1]._getGreen()-colors[i]._getGreen()),
        b: colors[i]._getBlue() + percent*(colors[i+1]._getBlue()-colors[i]._getBlue())
      }
    }
  };
};
​
var map = L.map('map', {
  center: [0, 0],
  zoom: 10,
  maxZoom: 19
});
map.addLayer( L.gridLayer.p5jsBridge() );