const cnvH = 700;

const cellSize = 10;

const circleRadius = cellSize*20;

const gridW = cnvW / cellSize;

const gridH = cnvH / cellSize;

let grid = [];

let circles = [];

const bgColor = 220;

​

function setup() {

  createCanvas(cnvW, cnvH);

  // create grid of cells

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

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

      grid.push(new Cell(i, j, cellSize, 255));

    }

  }

}

​

function draw() {

  background(bgColor);

  translate(cellSize/2, cellSize/2);

  strokeWeight(0.5);

  stroke(128);

  // noStroke();

  for (let i = 0; i < grid.length; i++) {

    grid[i].show();

  }

}

​

​

function mousePressed() {

  let x = mouseX;

  let y = mouseY;

  if (x > cnvW || y > cnvH || x < 0 || y < 0) {

  } else {

    let c = getCellIndex(x, y);

    withinRadius(c.x, c.y, circleRadius);

  }

}

​

​

​

function getCellIndex(x, y) {

  let i = floor(y / cellSize);

  let j = floor(x / cellSize);

  return grid[i + j * gridW];

}

​

function withinRadius(x,y,r) {

  let cells = grid.filter(cell => {

    return dist(x, y, cell.x, cell.y) < r+cellSize/2;

  });

  for (let cell of cells) {

    let d = dist(x, y, cell.x, cell.y);

    let h = map(d, 0, r, 255, 1);

    cell.update(h);

  }

  // return cells;

}

​

​

​

​

// classes

​

class Cell {

  constructor(x, y, s, c) {

    this.h = c;

    this.c = c;

    this.s = s;

    this.x = x * this.s;

    this.y = y * this.s;

  }

​

  update(amt) {

    this.h -= amt;

    this.c = this.h;

  }

​

  show() {

    push();

    fill(this.c);

    rectMode(CENTER);

    rect(this.x, this.y, this.s);

    pop();

  }

}

​