Made by Sébastien Raynaud @Chopokopx, 4th October 2018

  Display sticky blobs using the pixels array

  A "pix" array is created, with 1 cell per pixel, and passed to all blobs

  Each blob adds an intensity in "pix" for each pixels around it

  The "pix" array is then used to determine in a pixel will be displayed on screen,

  depending on the value in "pix" being superior or inferior to a certain threshold

*/

​

let blobs = [];

​

function setup() {

  createCanvas(400, 400);

  frameRate(30);

  let n = 10;

  for (let i = 0; i < n; i++) {

    maxR = 40;

    let x = random(maxR + 1, width - maxR - 1);

    let y = random(maxR + 1, height - maxR - 1);

    let r = random(10, 40);

    blobs[i] = new Blob(x, y, r);

  }

}

​

function draw() {

  background(255, 100, 255);

  let pix = []

  for (let i = 0; i < height; i++) {

    for (let j = 0; j < width; j++) {

      let index = j + i * width;

            pix[index] = 0;

    }

  }

  for (let b of blobs) {

    pix = b.show(pix);

    b.update();

  }

  loadPixels();

  for (let i = 0; i < height; i++) {

    for (let j = 0; j < width; j++) {

      let index = j + i * width;

      if (pix[index] < 95) {

        pixels[index * 4 + 0] = 10;

        pixels[index * 4 + 1] = 10;

        pixels[index * 4 + 2] = 10;

      } else {

        pixels[index * 4 + 0] = 100;

        pixels[index * 4 + 1] = 100;

        pixels[index * 4 + 2] = 255;

      }

    }

  }

  updatePixels();

}