*  thanks to ali spittel for https://github.com/aspittel/flood 

*/ 

​

​

let squareValues = [];

const randomElement = arr => arr[Math.floor(Math.random() * arr.length)];

const colors = [

  "#F06292",

  "#9575CD",

  "#E1BEE7",

  "#FFD740",

  "#A5D6A7",

  "#00B8D4"

];

let n = 15;

let flood;

let size;

let offset;

let slider;

​

function getSurroundingElements(row, col) {

  const toCheck = [];

​

  // down

  if (row < n - 1) toCheck.push(squareValues[row + 1][col]);

  // right

  if (col < n - 1) toCheck.push(squareValues[row][col + 1]);

  // up

  if (row > 0) toCheck.push(squareValues[row - 1][col]);

  // left

  if (col > 0) toCheck.push(squareValues[row][col - 1]);

​

  return toCheck;

}

​

function expand(element, color) {

  const {

    row,

    col

  } = element;

  element.color = color;

​

  const squaresToCheck = getSurroundingElements(row, col);

​

  squaresToCheck.forEach(squareToCheck => {

    if (flood.includes(squareToCheck)) return;

    if (squareToCheck.color === color) {

      flood.push(squareToCheck);

      expand(squareToCheck, color);

    }

  });

}

​

function drawMatrix() {

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

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

      fill(squareValues[row][col].color);

      rect(offset + row * size, offset + col * size, size, size);

    }

  }

}

​

function init() {

  size = int(width / n);

  offset = (width - size * n) / 2;

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

    squareValues[i] = [];

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

      squareValues[i][j] = {

        row: i,

        col: j,

        color: randomElement(colors),

      }

    }

  }

  flood = [squareValues[0][0]];

}

​

function setup() {

  createCanvas(400, 450);

  slider = createSlider(5, 20, n);

  slider.position(25, 425);

  slider.style('width', '350px');

  slider.mouseReleased(()=>{

    n = slider.value();

    init();

  });

  init();

​

  noStroke();

}

​

function draw() {

  background(255);

  drawMatrix();

}

​

function mouseClicked() {

  const row = int((mouseX - offset) / size);

  const col = int((mouseY - offset) / size);

​

  if (row > -1 && row < n && col > -1 && col < n) {

    const color = squareValues[row][col].color;

    flood.forEach(el => expand(el, color));

  }

​

}