Platonic Cells

Platonic solids, a special class of highly symmetrical 3D shapes, hold a unique place in geometry and mathematics. Defined by their identical faces, edges, and angles, they serve as a fascinating example of mathematical elegance and symmetry. In this demo, these shapes are integrated with the Quadrille API and p5.platonic libraries to explore their rendering and interaction within quadrilles.

Platonic cells are cell functions (cellFn) that handle the filling of Platonic solid cells in a quadrille game. This demo showcases how these cells can be generated, stored, and rendered using both retained and immediate rendering modes, which require WEBGL in p5.js. Retained mode preloads geometry for performance, while immediate mode dynamically calculates and renders shapes for flexibility. Together, these examples showcase how Platonic solids can be transformed into dynamic, interactive elements within a structured, cell-based system.

⚠️

The WEBGL mode in p5.js relies on GPU acceleration, which leads to higher energy consumption and a larger carbon footprint.

Retained Mode

code

let game, solids; // Quadrilles for the game and Platonic solids
let images = [];  // Array to store loaded images
const r = 5, c = 5, l = Quadrille.cellLength; // quadrille dimensions and cell size

function preload() {
  // Load 10 painting images into the images array
  for (let i = 1; i <= 10; i++) {
    images.push(loadImage('/paintings/p' + i + '.jpg'));
  }
}

function setup() {
  createCanvas(r * l, c * l, WEBGL); // Create a 3D canvas sized for the quadrille
  // Create a quadrille to store Platonic solids
  solids = createQuadrille(r, c);
  const args = [l / 2, true, ['yellow', 'blue', 'red',
                              'cyan', 'magenta', 'yellow']];
  // Fill the solids quadrille with Platonic geometries
  visitQuadrille(solids, (row, col) => solids.fill(row, col,
                                       platonicGeometry(...args)));
  // Create the main game quadrille
  game = createQuadrille(5, 5);
  // Fill the game quadrille with random images
  visitQuadrille(game, (row, col) => game.fill(row, col,
                                               random(images)));
  // Randomly populate the quadrille with Platonic cell functions
  game.rand(15).rand(10, cellFn);
}

function draw() {
  background('Gold'); // Set background color
  drawQuadrille(game, {
    origin: CORNER,         // Place the quadrille at the top-left corner
    options: { origin: CENTER } // Origin for cells (optional here)
  });
}

function cellFn({ row, col }) {
  // Render a Platonic solid at the specified cell with rotations
  push();
  background('black');
  stroke('lime');
  fill('blue');
  rotateX(millis() * 0.001); // Apply X-axis rotation over time
  rotateY(millis() * 0.001); // Apply Y-axis rotation over time
  rotateZ(millis() * 0.001); // Apply Z-axis rotation over time
  model(solids.read(row, col)); // Draw the solid stored in the solids quadrille
  pop();
}

function mouseClicked() {
  // Toggle a cell's content between empty and the Platonic cell function
  const row = game.mouseRow;
  const col = game.mouseCol;
  game.isEmpty(row, col) ? game.fill(row, col, cellFn) :
                           game.clear(row, col);
}

function keyPressed() {
  // Save the quadrille as an image when 's' is pressed
  key === 's' && game.toImage('game.png', {
    origin: CORNER,         // Origin of the quadrille within the canvas
    options: { origin: CENTER } // Origin within each cell
  });
  // Save the canvas as an image when 'c' is pressed
  key === 'c' && save(cnv, 'platonic_cells.png');
}

const mouseWheel = () => false; // Disable mouse wheel interaction

Setup

Retained mode rendering of the Platonic cells requires the geometry to be built and stored in a separate solids quadrille in setup:

function setup() {
  // ...
  solids = createQuadrille(r, c)
  const args = [l / 2, true, ['yellow', 'blue', 'red',
                              'cyan', 'magenta', 'yellow']]
  // When no specific Platonic solid is passed to the p5.platonic 
  // platonicGeometry function (as done here), it returns a p5.Geometry 
  // instance of a random one. See: https://bit.ly/3XcQYUs
  visitQuadrille(solids, (row, col) => solids.fill(row, col,
                                       platonicGeometry(...args)))
}

The cellFn rendering procedure reads the solid located at (row, col) in the solids quadrille and renders it after applying some rotations, in retained mode with p5 model:

function cellFn({ row, col }) {
  push()
  background('black')
  stroke('lime')
  fill('blue')
  rotateX(millis() * 0.001)
  rotateY(millis() * 0.001)
  rotateZ(millis() * 0.001)
  model(solids.read(row, col))
  pop()
}

ℹ️

Object Destructuring in Functions

JavaScript object destructuring simplifies function arguments by extracting properties directly. This happens in two key places:

In platonicGeometry:
The args array is spread into individual arguments:
```
const args = [l / 2, true, ['yellow', 'blue', 'red', 'cyan', 'magenta', 'yellow']];
platonicGeometry(...args);
```
Inside platonicGeometry, these values are assigned to named parameters in the function definition:
```
function platonicGeometry(size, detail, colors) { ... }
```
This improves readability by allowing the function to work with meaningful variable names instead of indexed array elements.
In cellFn({ row, col }):
Here, { row, col } is destructured from the function parameter, allowing direct access without param.row or param.col:
```
function cellFn({ row, col }) {
  model(solids.read(row, col));
}
```

Both cases improve code clarity and streamline data handling.

Note that the cellFn may be handled by the quadrille like any other value:

game.fill(row, col, cellFn)

Retained mode is the fastest approach but it requires the geometry to be computed in setup so that it is set in GPU memory only once.

Immediate Mode

code

let game; // game quadrille
let images = []; // Array to store loaded images
const r = 5, c = 5, l = Quadrille.cellLength; // quadrille dimensions and cell size

function preload() {
  // Load 10 painting images into the images array
  for (let i = 1; i <= 10; i++) {
    images.push(loadImage('/paintings/p' + i + '.jpg'));
  }  
}

function setup() {
  createCanvas(r * l, c * l, WEBGL); // Create a 3D canvas sized for the quadrille
  
  // Initialize the game quadrille
  game = createQuadrille(r, c);
  
  // Fill the game quadrille with either a cell function or a random image
  visitQuadrille(game, (row, col) => 
                 game.fill(row, col, random() < 0.5 ? 
                                                createCellFn() :
                                                random(images)));
  // Randomly fill additional cells
  game.rand(10);
}

function draw() {
  background('DeepSkyBlue'); // Set background color
  orbitControl();            // Enable 3D camera control
  drawQuadrille(game, {      // Draw the game quadrille
    outline: 'magenta',      // Add magenta outline to cells
    origin: CORNER,          // Place the quadrille at the top-left corner
    options: { origin: CENTER } // Origin within cells
  });
}

function createCellFn() {
  // Randomly select a Platonic solid function from the p5.platonic library
  const solid = random([tetrahedron, hexahedron, octahedron,
                        dodecahedron, icosahedron]);
  // Return a cell function that draws the solid with rotation and styling
  return function cellFn() {
    push();
    background('black');     // Set a black background for the cell
    stroke('lime');          // Apply lime-colored edges
    fill('red');             // Fill the solid with red
    rotateX(millis() * 0.001); // Apply X-axis rotation over time
    rotateY(millis() * 0.001); // Apply Y-axis rotation over time
    rotateZ(millis() * 0.001); // Apply Z-axis rotation over time
    solid(Quadrille.cellLength / 2); // Render the solid
    pop();
  }
}

function mouseClicked() {
  // Toggle a cell's content between empty and a Platonic cell function
  const row = game.mouseRow;
  const col = game.mouseCol;
  game.isEmpty(row, col) ? game.fill(row, col, createCellFn()) :
                           game.clear(row, col);
}

function keyPressed() {
  // Save the quadrille as an image when 's' is pressed
  drawQuadrille(game, {
    outline: 'magenta',
    origin: CORNER,
    options: { origin: CENTER }
  });
  key === 's' && game.toImage('game.png', {
    outline: 'magenta',     // Add magenta outline to saved image
    origin: CORNER,         // Origin of the quadrille in the canvas
    options: { origin: CENTER } // Origin within cells
  });
}

const mouseWheel = () => false; // Disable mouse wheel interaction

The function value returned by the creator is then stored in the game quadrille, just like any other data type:

game.fill(row, col, createCellFn())

Note that createCellFn is referred to as a higher-order function.

Immediate mode rendering is less performant than retained mode as it requires constantly transferring the Platonic solid geometry data once per frame to the GPU.

Further Exploration

Cell functions offer all the drawing features of the main canvas, extending beyond just displaying Platonic solids. Since each cell can incorporate complex WebGL content, a wide range of creative possibilities opens up, such as:

Interactive Animations: Embedding animated sequences within individual cells, making each cell an interactive component.
Textured Surfaces: Applying custom textures or procedural shaders to each cell for intricate visual effects.
Miniature Scenes: Creating miniature 3D scenes or models within each cell, turning the quadrille into a collection of diverse, detailed environments.
Dynamic Data Visualization: Visualizing dynamic data within cells, where each cell could represent a different data point or metric with its unique graphical representation.

Leveraging p5.Framebuffer for these features allows for more advanced rendering techniques and enhanced performance compared to p5.Graphics.

References

Quadrille API

p5 API

createCanvas — Creates a drawing canvas on which all the 2D and 3D visuals are rendered in p5.js.
background — Sets the color used for the background of the canvas.
push — Saves the current drawing style and transformation settings to the stack. Useful for isolating visual changes in specific sections of code.
pop — Restores the most recently saved drawing style and transformation settings from the stack. Complements push() to maintain clean transformations.
stroke — Sets the color or style used for lines and the edges of shapes.
fill — Sets the color or style used to fill shapes.