fill(row, col, value, directions)

Fills a specific cell and all connected cells in the quadrille with the specified value, based on the given directions using a flood fill algorithm.

Example #

(click on any cell to perform flood fill based on selected directions; press any key to reset)

code

Quadrille.cellLength = 20;  
let quadrille;  
let mode;  

function setup() {  
  createCanvas(400, 400);  
  mode = createSelect();  
  mode.option('flood fill 4-directions');  
  mode.option('flood fill 8-directions');  
  mode.selected('flood fill 4-directions');  
  reset();  
}  

function draw() {  
  background('black');  
  drawQuadrille(quadrille);  
}  

function mouseClicked() {  
  const row = quadrille.mouseRow;  
  const col = quadrille.mouseCol;  
  const directions = mode.value() === 'flood fill 4-directions' ? 4 : 8;  
  quadrille.fill(row, col, 255, directions);  
}  

function keyPressed() {  
  reset();  
}  

function reset() {  
  quadrille = createQuadrille(20, 20, 100, color('red'));  
  quadrille.rand(100, color('lime')).rand(100, color('blue'));
}

Syntax #

fill(row, col, value, directions)

Parameters #

Param	Description
`row`	Number: row index of the cell to start filling [0..height]
`col`	Number: column index of the cell to start filling [0..width]
`value`	Any: A valid JavaScript value
`directions`	Number: Number of directions for flood fill (4 or 8), default is 4