number_display.md

weight	draft
2	false

numberDisplay

Static method for drawing cells that are filled with numbers. Implemented in terms of [Quadrille.colorDisplay]({{< ref "color_display" >}}) as: Quadrille.colorDisplay({ graphics: graphics, cell: graphics.color(graphics.constrain(cell, 0, 255)), cellLength: cellLength }).

Used by [drawQuadrille]({{< ref "draw_quadrille" >}}) and sample.

Example

{{< p5-global-iframe lib1="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.js" width="190" height="220" >}} use strict; let number;

function setup() { createCanvas(165, 165); number = createSlider(0, 255, 125, 1); }

function draw() { background('blue'); Quadrille.numberDisplay( { graphics: this, value: number.value(), cellLength: width } ); } {{< /p5-global-iframe >}}

{{< details title="code" open=false >}}

let number;

function setup() {
  createCanvas(165, 165);
  number = createSlider(0, 255, 125, 1);
}

function draw() {
  background('blue');
  Quadrille.numberDisplay({graphics: this, value: number.value(), cellLength: width});
}

{{< /details >}}

Syntax

Quadrille.numberDisplay({graphics, value, [cellLength]})

Parameters

parameter	description
graphics	p5.Graphics: renderer target
value	Number: cell contents
cellLength	Number: edge length in pixels default is [Quadrille.cellLength]({{< ref "cell_length" >}})