​

function setup() {

  createCanvas(400, 400);

  frameRate(10)

}

​

function draw() {

  background(0);

  // fill(255, 0, 255)

  stroke(255, 0, 255)

  circle(mouseX, height/2, 50);

  circle(mouseY, height/2, 50);

  loadPixels();

  let newPixels = pixels;

  // apply blur

  const d = pixelDensity();

  // console.log(d)

  for (let t = 0; t < 20; t++) {

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

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

        let rowtop = 4 * ((d + j - 1) * width * d + (d + i));

​

        // top left

​

        const tlR = pixels[rowtop-4]

        const tlG = pixels[rowtop-3]

        const tlB = pixels[rowtop-2]

​

        // top

​

        const tR = pixels[rowtop]

        const tG = pixels[rowtop+1]

        const tB = pixels[rowtop+2]

​

        // top right

​

        const trR = pixels[rowtop+4]

        const trG = pixels[rowtop+5]

        const trB = pixels[rowtop+6]

​

​

​

        let rowcur = 4 * ((d + j) * width * d + (d + i));

​

        // current left

​

        const clR = pixels[rowcur-4]

        const clG = pixels[rowcur-3]

        const clB = pixels[rowcur-2]

​

        // current

​

        const cR = pixels[rowcur]

        const cG = pixels[rowcur+1]

        const cB = pixels[rowcur+2]

​

        // current right

​

        const crR = pixels[rowcur+4]

        const crG = pixels[rowcur+5]

        const crB = pixels[rowcur+6]

​

​

        let rowbot = 4 * ((d + j + 1) * width * d + (d + i));

​

        // bottom left

​

        const blR = pixels[rowbot-4]

        const blG = pixels[rowbot-3]

        const blB = pixels[rowbot-2]

​

        // bottom

​

        const bR = pixels[rowbot]

        const bG = pixels[rowbot+1]

        const bB = pixels[rowbot+2]

​

        // bottom right

​

        const brR = pixels[rowbot+4]

        const brG = pixels[rowbot+5]

        const brB = pixels[rowbot+6]

​

        // RED

​

        newPixels[rowcur] = (tlR + tR + tlR + clR + cR + crR + blR + bR + brR) / 9;

        newPixels[rowcur+1] = (tlG + tG + tlG + clG + cG + crG + blG + bG + brG) / 9;

        newPixels[rowcur+2] = (tlB + tB + tlB + clB + cB + crB + blB + bB + brB) / 9;

      }

    }

  }

  pixels = newPixels;

  // console.log(d)

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

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

      let rowcur = 4 * ((d + j) * width * d + (d + i));

      // RED

      newPixels[rowcur] = pixels[rowcur] > threshold ? 225 : 0

      newPixels[rowcur+1] = pixels[rowcur+1] > threshold ? 225 : 0

      newPixels[rowcur+2] = pixels[rowcur+2] > threshold ? 225 : 0

    }

  }

  pixels = newPixels;

  updatePixels();

}