visitQuadrille(quadrille, fx)

p5.js function that visits all cells in the quadrille, executing the specified fx function on each cell. The function takes (row, col) as parameters to define the cell’s position.

Example

The example below uses a named function fx to visit each cell in the upper quadrille, filling its empty cells that have exactly three neighbors, and storing the result in the lower quadrille.

code

let source, target;
Quadrille.cellLength = 20;
const w = 600 / Quadrille.cellLength;
const h = 400 / Quadrille.cellLength;
let yellow, blue, red;

function setup() {
  createCanvas(600, 400);
  yellow = color('yellow');
  blue = color('blue');
  red = color('red');
  source = createQuadrille(w - 2, (h / 2) - 2, 50, yellow);
  source.rand(50, blue);
  target = createQuadrille(w - 2, (h / 2) - 2);
  visitQuadrille(source, fx);
}

function fx(row, col) {
  if (source.isEmpty(row, col) && source.ring(row, col).order === 3) {
    target.fill(row, col, red);
  }
}

function draw() {
  background('coral');
  drawQuadrille(source, { outline: 'white', row: 1, col: 1 });
  drawQuadrille(target, { outline: 'cyan', row: (h / 2) + 1, col: 1 });
}

ℹ️

To implement the above sketch, the following quadrille methods are used: isEmpty(), ring, rand(times, value), and fill(row, col, value).

Example using arrow functions

The following example uses an arrow function, also known as an anonymous function, instead of a named function. Arrow functions provide a concise way to write functions in JavaScript, especially for short, one-off uses.

code

let source, target;
Quadrille.cellLength = 20;
const w = 600 / Quadrille.cellLength;
const h = 400 / Quadrille.cellLength;
let yellow, blue, red;

function setup() {
  createCanvas(600, 400);
  yellow = color('yellow');
  blue = color('blue');
  red = color('red');
  source = createQuadrille(w - 2, (h / 2) - 2, 50, yellow);
  source.rand(50, blue);
  target = createQuadrille(w - 2, (h / 2) - 2);
  visitQuadrille(source, (row, col) => {
    if (source.isEmpty(row, col) && source.ring(row, col).order === 3) {
      target.fill(row, col, red);
    }
  });
}

function draw() {
  background('coral');
  drawQuadrille(source, { outline: 'white', row: 1, col: 1 });
  drawQuadrille(target, { outline: 'cyan', row: (h / 2) + 1, col: 1 });
}

Step-by-Step Transformation to Arrow Function

To convert the named function fx into an arrow function, also known as an anonymous function, follow these steps:

// Original named function
function fx(row, col) {
  if (source.isEmpty(row, col) && source.ring(row, col).order === 3) {
    target.fill(row, col, red);
  }
}

Step 1: Convert the named function to an anonymous function expression.

const fx = function(row, col) {
  if (source.isEmpty(row, col) && source.ring(row, col).order === 3) {
    target.fill(row, col, red);
  }
};

Step 2: Replace function with arrow syntax.

const fx = (row, col) => {
  if (source.isEmpty(row, col) && source.ring(row, col).order === 3) {
    target.fill(row, col, red);
  }
};

Final Step: Inline the arrow function directly in visitQuadrille as shown in the second example above:

visitQuadrille(source, (row, col) => {
  if (source.isEmpty(row, col) && source.ring(row, col).order === 3) {
    target.fill(row, col, red);
  }
});

Using arrow functions provides a more concise syntax, making them suitable for inline functions in cases like this one.

ℹ️

From now on, arrow functions, also known as anonymous functions, will be used instead of named functions to simplify examples. Keep in mind that arrow functions do not have their own this context. For more details on how this behaves in arrow functions, refer to this guide on arrow functions.

Syntax

visitQuadrille(quadrille, fx)

Parameters

Param	Description
`quadrille`	Quadrille: The `quadrille` to be visited
`fx`	Function: A function of the form `fx(row, col)` to be executed on all visited cells

visitQuadrille(quadrille, fx, values)