fill(row, col, value, border)

Fills a specific cell and all connected cells in the quadrille with the specified value using a flood fill algorithm. The border parameter determines if the fill includes the boundary of the flood fill area.

Example

(click on any cell to perform flood fill with selected border option; press any key to reset)

code

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

function setup() {  
  createCanvas(400, 400);  
  mode = createSelect();  
  mode.option('flood fill without border');  
  mode.option('flood fill with border');  
  mode.selected('flood fill without border');  
  reset();  
}  

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

function mouseClicked() {  
  const row = quadrille.mouseRow;  
  const col = quadrille.mouseCol;  
  const border = mode.value() === 'flood fill with border';  
  quadrille.fill(row, col, 255, border);  
}  

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, border)

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
`border`	Boolean: Specifies whether to include the border of the flood fill area. Default is `false`

fill(row, col, value, directions)