demo.js
1linkconst ROWS = 20;

2linkconst COLS = 40;

3linkconst LENGTH = 20;

4linklet board, quadrille;

5linklet col, row;

6linklet animate = true;

7linklet al;

8link

9linkfunction preload() {

10link  al = loadImage('abraham_lincoln.jpg');

11link}

12link

13linkfunction setup() {

14link  createCanvas(COLS * LENGTH, ROWS * LENGTH);

15link  board = createQuadrille(COLS, ROWS);

16link  quadrille = active(int(random(5)));

17link  col = int(random(0, COLS - 4));

18link  row = int(random(0, ROWS - 4));

19link}

20link

21linkfunction draw() {

22link  background('#2E0E36');

23link  if ((frameCount % 30 === 0) && animate) {

24link    stick('u');

25link  }

26link  drawQuadrille(board, { cellLength: LENGTH, outline: 'magenta' });

27link  drawQuadrille(quadrille, { x: col * LENGTH, y: row * LENGTH, cellLength: LENGTH, outline: '#1EB2A6' });

28link}

29link

30linkfunction keyPressed() {

31link  if (key === 'c') {

32link    board.clear();

33link  }

34link  if (key === '1' || key === '2' || key === '3' || key === '4' || key === '5') {

35link    quadrille = active(parseInt(key));

36link  }

37link  if (key === 'u' || key === 'x' || key === 'i' || key === 'd') {

38link    stick(key);

39link  }

40link  if (key === 'f') {

41link    quadrille.reflect();

42link  }

43link  if (key === 'r') {

44link    quadrille.rotate();

45link  }

46link  if (key === 't') {

47link    quadrille.transpose();

48link  }

49link  if (key === 'q') {

50link    animate = !animate;

51link  }

52link  row = key === 'w' ? row - 1 : key === 'z' ? row + 1 : row;

53link  col = key === 'a' ? col - 1 : key === 's' ? col + 1 : col;

54link}

55link

56linkfunction stick(key) {

57link  let clone = quadrille.clone();

58link  clone.replace(color('#965695'));

59link  board = key === 'u' ? Quadrille.OR(board, clone, row, col) :

60link          key === 'x' ? Quadrille.XOR(board, clone, row, col) :

61link          key === 'i' ? Quadrille.AND(board, clone, row, col) :

62link                        Quadrille.DIFF(board, clone, row, col);

63link  quadrille = active(int(random(5)));

64link  col = int(random(0, COLS - 4));

65link  row = int(random(0, ROWS - 4));

66link}

67link

68linkfunction active(value) {

69link  let c1 = color(random(255), random(255), random(255), 255);

70link  let c2 = color(random(255), random(255), random(255), 255);

71link  let c3 = color(random(255), random(255), random(255), 255);

72link  let e1 = '👽';

73link  switch (value) {

74link    case 1:

75link      return createQuadrille([[c1,   'g'],

76link                              [null, 'o', al],

77link                              [al,   'l'],

78link                              [e1, c2, c3]

79link                              ]);

80link    case 2:

81link      return createQuadrille(2, [c1, al, c3, e1, c2]);

82link    case 3:

83link      return createQuadrille(4, int(random(1, 1048576)), c2);

84link    case 4:

85link      return createQuadrille(5, 'hola mundo');

86link    default:

87link      let w = int(random(2, 6));

88link      let h = int(random(2, 6));

89link      return createQuadrille(w, h, int(random(1, w * h)), c3);

90link  }

91link}

This demo displays two quadrilles: a static board and an interactive quadrille that can be geometrically transform and stick into the board.

linkCreate & display

linkCreation

Different forms of the introduced p5.js createQuadrille command are used to instantiate some quadrilles. Both the board and the quadrille (using the implemented active function) are created in the setup:

excerpt from demo.js
1linkconst ROWS = 20;

2linkconst COLS = 40;

3linkconst LENGTH = 20;

4linklet board, quadrille; // --> Quadrille instances

5linklet row, col;

6linklet animate = true;

7link

8linkfunction setup() {

9link  createCanvas(COLS * LENGTH, ROWS * LENGTH);

10link  board = createQuadrille(COLS, ROWS); // --> Creates empty quadrille

11link  quadrille = active(int(random(5)));

12link  row = int(random(0, COLS - 6));

13link  col = int(random(0, ROWS - 6));

14link}

The active function switches among different quadrille constructors to return the quadrille instance that is to be displayed at a particular moment in time:

excerpt from demo.js
1linkfunction active(value) {

2link  switch (value) {

3link    let c1 = color(random(255), random(255), random(255), 255);

4link    let c2 = color(random(255), random(255), random(255), 255);

5link    let c3 = color(random(255), random(255), random(255), 255);

6link    let e1 = '👽';

7link    case 1: // --> Creates a 3-width quadrille from (sparse) matrix

8link      return createQuadrille([[c1,   'g'],

9link                              [null, 'o', al],

10link                              [al,   'l'],

11link                              [e1,   c2,  c3]

12link                             ]);

13link    case 2: // --> Creates a 2-width quadrille from (5-length) array

14link      return return createQuadrille(2, [c1, al, c3, e1, c2]);

15link    case 3: // --> Creates a 4-width quadrille from bitboard (random int) filled it with color

16link      return createQuadrille(4, int(random(1, 1048576)), c2);

17link    case 4: // --> Creates a 5-width quadrille from string

18link      return createQuadrille(5, 'hola mundo');

19link    default: // --> Creates a quadrille of random width, height and order

20link      let w = int(random(2, 6));

21link      let h = int(random(2, 6));

22link      return createQuadrille(w, h, int(random(1, w * h)), c3);

23link  }

24link}

linkDisplay

The introduced p5.js drawQuadrille command is used to display both quadrilles:

excerpt from demo.js
1linkfunction draw() {

2link  background('#2E0E36');

3link  if ((frameCount % 30 === 0) && animate) {

4link    stick('u'); // --> the stick command is described below

5link  }

6link  drawQuadrille(board, {cellLength: LENGTH, outline: 'magenta'}); // --> draw board with edges at (0, 0)

7link  drawQuadrille(quadrille, {x: col * LENGTH, y: row * LENGTH, cellLength: LENGTH, outline: '#1EB2A6'}); // --> draw quadrille with edges at (x, y)

8link}

linkGeometry transformations

The interactive quadrille may be translated by setting the row, col coordinates used to display it, and also rotated, reflected and transposed:

excerpt from demo.js
1linkfunction keyPressed() {

2link  if (key === 'c') {

3link    board.clear(); // --> clears all cells of the board quadrille

4link  }

5link  if (key === '1' || key === '2' || key === '3' || key === '4' || key === '5') {

6link    quadrille = active(parseInt(key)); // --> quadrille creation on key

7link  }

8link  if (key === 'u' || key === 'x' || key === 'i' || key === 'd') {

9link    stick(key); // --> the stick function is described below

10link  }

11link  if (key === 'f') {

12link    quadrille.reflect(); // --> reflects quadrille

13link  }

14link  if (key === 'r') {

15link    quadrille.rotate(); // --> rotates quadrille

16link  }

17link  if (key === 't') {

18link    quadrille.transpose(); // --> transposes quadrille

19link  }

20link  if (key === 'q') {

21link    animate = !animate; // --> toggles animation

22link  }

23link  col = key === 'w' ? col - 1 : key === 'z' ? col + 1 : col; // --> quadrille vertical displacement

24link  row = key === 'a' ? row - 1 : key === 's' ? row + 1 : row; // --> quadrille horizontal displacement

25link}

linkLogical operators

The stick function adds the quadrille into the board by means of the static Quadrille.OR, Quadrille.XOR, Quadrille.AND and Quadrille.DIFF logical operators:

excerpt from demo.js
1linkfunction keyPressed() {

2link  if (key === 'u' || key === 'x' || key === 'i' || key === 'd') {

3link    stick(key); // --> stick(key);

4link  }

5link  //...

6link}

The quadrille is first cloned and dim (using the replace method) its color when stick it, and the active function is then called to start all over again:

excerpt from demo.js
1linkfunction stick(key) {

2link  let clone = quadrille.clone(); // --> performs a shallow copy of the quadrille

3link  clone.replace(color('#965695')); // --> dim the cloned quadrille color

4link  board = key === 'u' ? Quadrille.OR(board, clone, col, row) :

5link          key === 'x' ? Quadrille.XOR(board, clone, col, row) :

6link          key === 'i' ? Quadrille.AND(board, clone, col, row) :

7link                        Quadrille.DIFF(board, clone, col, row); // --> Quadrille static logic operators

8link  quadrille = active(int(random(5)));

9link  row = int(random(0, COLS - 6));

10link  col = int(random(0, ROWS - 6));

11link}