p5.quadrille.js API #

Welcome to the p5.quadrille.js Application Programming Interface (API). This open-source p5.js library provides a simple yet powerful API for grid-based creative coding, game design, and visual computing. Most methods are illustrated with interactive sketches to help you explore their use.

Paintings sorted by luma using quadrille.sort() — **Paintings sorted according to their luma using quadrille sort**

At the heart of the library lies the Quadrille class, coupled with some p5.js functions that allow manipulation and customization of the quadrille’s visual appearance. The class provides iterators such as for…of and visit, enabling elegant traversal of filled or filtered cells. It also exposes a set of properties, some read-only like mouseRow, mouseCol, size, and order, and others read-write such as width, height, and memory2D. The class also offers methods to perform geometric transformations, conduct algebraic operations inspired by constructive solid geometry, and perform visualizations involving image filtering with convolution matrices and triangle rasterization. Additionally, the class includes various accessors such as queries, cell contents, and instance creators, along with mutators like delete, insert, randomize, rand, swap, replace, clear, fill, and sort (used to order the images within the logo above), which allow for detailed customization and manipulation of the quadrille’s state. Moreover, reformatters within the library enable seamless transformation between quadrille instances and various data formats, such as arrays, images, bitboards, and Forsyth–Edwards Notation (FEN) chess board positions.

p5.js Web Editor #

To start coding right away, right-click the sketch title (quadrille-api-intro) and choose “Open Link in New Tab” to edit it directly in the p5.js Web Editor.

(Mouse press randomizes the quadrille Pola; key press resets it.)

Why not take it further? Try implementing a simple puzzle game where the player swaps cells using swap(cell1, cell2) to restore the original image after it has been randomized.

This sketch demonstrates the complete 4-step p5.quadrille.js usage workflow:

Declare a Quadrille variable.
Create it in setup().
Render it in draw() using drawQuadrille.
Interact through events like mousePressed(), calling mutator methods such as randomize().

To replicate this locally or in the Web Editor, make sure your index.html includes:

<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.quadrille/dist/p5.quadrille.min.js"></script>

Refer to the Releases section below for the latest versions.

Note that with p5.js, there’s no “installation” in the traditional sense. You simply include the necessary scripts to get started. See the official guide or the Getting Started section in the book draft for local setup instructions.

Releases #

Latest (v3.0.0):
These links always point to the latest stable version on npm.
Current tagged version (v3.0.0):
Use these if you want to lock to a specific version.
Legacy (v2.x):
GitHub CDN links compatible with p5 v1.
- p5.quadrille.js (GitHub CDN)
- All GitHub releases

System Requirements #

Hardware: Any modern device—PC, phone, or tablet—with a browser supporting ES6 (Firefox 54+, Chrome 51+, Safari 10+, Edge 15+, Opera 38+).
Software: Like any p5.js sketch—just include p5.js and p5.quadrille.js via local file or CDN.

Observation: The library leverages p5.js for rendering and modern browser APIs for performance. WebGL enhances 3D/GPU examples but is optional.

Introduction

p5.quadrille.js API #

p5.js Web Editor #

Releases #

System Requirements #

Further Reading #