const cnvH = 600;

const cellSize = 15;

const gridW = cnvW / cellSize;

const gridH = cnvH / cellSize;

let grid = [];

let circles = [];

let colorCycle = 0;

const bgColor = 220;

const colorsArr = [ "#005f73", "#0a9396", "#94d2bd", "#e9d8a6", "#ee9b00", "#ca6702", "#bb3e03", "#ae2012", "#620f12" ];

​

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, "#ffffff"));

    }

  }

}

​

function draw() {

  background(bgColor);

  translate(cellSize/2, cellSize/2);

  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 = getCell(x, y);

    let cells = withinRadius(c.x, c.y, cellSize*6);

    let ccolor = colorsArr[colorCycle % colorsArr.length];

    // colorize(cells,ccolor);

  }

  colorCycle+=1;

}

​

function getCell(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, 0, 255);

    cell.c = color(h);

  }

  return cells;

}

​

function colorize(cells, ccolor) {

  for (let cell of cells) {

    cell.c = ccolor;

  }

}

​

​

​

// classes

​

class Cell {

  constructor(x, y, s, c) {

    this.c = color(c);

    this.s = s;

    this.x = x * this.s;

    this.y = y * this.s;

    this.h = 0;

  }

​

  show() {

    push();

    stroke(bgColor);

    fill(this.c);

    rectMode(CENTER);

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

    pop();

  }

}

​