array effect 4

gistfile1.txt

//
// paste below code here:
// https://p5js.org/examples/math-distance-2d.html
// for a nice array.io affect.
//

var max_distance;
var mouseover = false;
var cell_size = 15;
var canvW = 710;
var canvH = 400;
var d = new Array();

function setup() {
  to = color(200, 220, 0);
  from = color(0, 220, 250);

  //bg = loadImage("https://image.ibb.co/kzA3X7/Screenshot_2018_3_26_Sketchpad_5_1_Draw_Create_Share.png");
  //bg = loadImage("http://78.media.tumblr.com/6463bd9ba395993bb24cf293cc6c106b/tumblr_oa6k0mn0ts1td4uwgo1_1280.jpg");
  bg = loadImage("https://image.ibb.co/kpzGN7/Screenshot_2018_3_27_6987f43d_c1f4_48bd_ae4f_d650835b23b2_png_PNG_Image_717_413_pixels.png");
  cnv = createCanvas(canvW, canvH);
  cnv.mouseOver(function(){
    mouseover = true;
  });
  cnv.mouseOut(function(){
    mouseover = false;
  });
  //background(255);
  noStroke();
  max_distance = dist(0, 0, width, height);
  offset = 1;
  inc = -0.2;
  setInterval(function(){
    offset = offset + inc;
  },50);
    for(var i = 0; i <= width; i += cell_size) {
      d[i] = new Array();
      for(var j = 0; j <= height; j += cell_size) {
        d[i][j]=Math.random();
      }
    }

}

function draw() {
  //d = pixelDensity();
  bg.loadPixels();
  background(color(10,150,200));
  //fill(color(255,255,255));
  //text(mouseX.toString(),20,20);
  //  if (mouseover) {
    //background(255);
    for(var i = 0; i <= width; i += cell_size) {
      for(var j = 0; j <= height; j += cell_size) {
        var size = dist(mouseX, mouseY, i, j);
        size = Math.sin(d[i][j]*offset+  5*size/max_distance)*0.8+0.1;
        //size = darkness*100;
        x = (i + bg.width  * j);
        darkness = (bg.pixels[x*4+2]+bg.pixels[x*4+1]+bg.pixels[x*4])/(255*3);
        size = round(cell_size*((1-darkness)*size), 0, cell_size)*0.7;

        //(255 - fingers.pixels[i*4])
        fill(lerpColor(from, to, (i/width)*(j/height)));
        ellipse(i, j+5, size, size);
      }
    }
  //} else {
  //  background(bg);
  //}
}