array logo animation

gistfile1.txt

// go here:
// https://p5js.org/examples/math-distance-2d.html
// and copy pase code below:
// ------------------ START ---------------------------

var max_distance;
var mouseover = false;
var cell_size = 15;
var canvW = 710;
var canvH = 400;

function setup() {
  bg = loadImage("https://image.ibb.co/kzA3X7/Screenshot_2018_3_26_Sketchpad_5_1_Draw_Create_Share.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.3;
  setInterval(function(){
    offset = offset + inc;
  },50);
}

function draw() {
  //d = pixelDensity();
  bg.loadPixels();
  background(255);
  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(offset+  5*size/max_distance)+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);

        //(255 - fingers.pixels[i*4])
        fill(color(0,0,0));
        ellipse(i, j, size, size);
      }
    }
  } else {
    background(bg);
  }
}

// ---------------magic people voodoo people-----------