A grid-based teaching and rendering library for p5.js.
npm install p5.quadrille
Welcome to the p5.quadrille.js source code repository. This open-source p5.js addon library offers a simple yet powerful API for grid-based creative coding, game design, and visual computing. Most methods are demonstrated with interactive sketches for hands-on exploration.
!Quadrille cells sorted by luminance
Paintings sorted according to their luma) using quadrille sort
- Usage
- CDN
- npm (ESM)
- Algorithms \& Performance
- Adoption
- Releases
- System Requirements
- Contribute
- Support
- Open TODOs
- Further Reading
Using p5.quadrille.js can be as minimal or as interactive as you need:
* 2 steps — storage only: declare and create the quadrille.
* 3 steps — add rendering: use drawQuadrille() in draw().
* 4 steps — add interactivity: call a mutator method (e.g. fill(), clear(), replace()) inside an event like keyPressed() or mousePressed().
The library works in two setups:
- CDN: Use the IIFE (Immediately Invoked Function Expression) format with
You can run the example, which uses global mode, by opening the index.html file in a browser, or by using VSCodium (recommended) or Visual Studio Code with the Live Server extension.
Install both p5 and p5.quadrille as dependencies:
`bash`
npm i p5 p5.quadrille
Then import them in your project's entry file (e.g., main.js) using a modern bundler like Vite, which runs in instance mode only:
`js
// main.js
import p5 from 'p5'
import Quadrille from 'p5.quadrille'
const sketch = p => {
let q // Step 1: Declare
p.setup = () => {
p.createCanvas(600, 400)
q = p.createQuadrille(6, 4, 10, '🐲') // Step 2: Create
}
p.draw = () => {
p.background(0)
p.drawQuadrille(q) // Step 3: Render
}
p.mousePressed = () => {
q.randomize() // Step 4: Interact
}
}
new p5(sketch)
`
This approach gives you full modularity and clean instance isolation using modern JavaScript tooling.
Let n be the total number of cells in the quadrille.
* Grid Operations: O(n) — Covers transformations and cell iteration performed with for...of loops. O(n × k²)
- Image Filtering: — Where k is the kernel width/height (assumed square). O(n × m)
- Pattern Search & Merging: — Where m is the number of cells in the pattern or quadrille being searched/merged. O(n)
- Drawing: — Efficient rendering using the p5.js canvas.
Observations:
- Optimized for grid-based games and interactive applications, including WebGL-heavy scenarios. Supports rendering JavaScript functions via p5.Framebuffer for advanced effects.
- Produces deterministic results—identical inputs always yield the same outputs.
- Maintains a clear distinction between mutable and immutable methods, promoting API integrity and predictable behavior.
- Tested in real-world scenarios:
– Object-Oriented Programming courses at UNAL.
– National and international game jams with the UNGames group.
- Fosters creativity and problem-solving in both classroom and jam settings.
- Publicly showcased at objetos.github.io/docs/showcase, featuring student projects, games, and demos.
- Latest (v3.4.13):
These links always point to the latest stable version on npm.
- p5.quadrille.js (unminified)
- p5.quadrille.min.js (minified)
- npm package
- Current tagged version (v3.4.13):
Use these if you want to lock to a specific version.
- p5.quadrille@3.4.13.js (unminified)
- p5.quadrille@3.4.13.min.js (minified)
- npm package (v3.4.13)
- Legacy (v2.x):
GitHub CDN links compatible with p5 v1.
- p5.quadrille.js (GitHub CDN)
- All GitHub releases
- 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.
Your contributions are welcome!
Use the bug report or feature request templates to report issues or suggest new features.
Fork the repo and submit a pull request to help with any of the following (GitHub Guide):
1. Implement isPolyomino() perlin()
2. Add and simplex() noise-based utilities sort()
3. Extend to support 'webgl' mode — requires Framebuffer support for sample() (currently limited to the P2D renderer) WEBGL
4. Add support for screenRow() and screenCol() — may depend on features from p5.treegl
- 
Always use the latest version of p5.quadrille.js from npm. Supports modern p5.js v2 and includes ESM and IIFE builds.
Install with npm i p5.quadrille.createQuadrille()
- 
The creative coding library powering this project. From newcomers to advanced users—explore the reference, examples, tutorials, and libraries.
- 
Browse the full API reference, including all methods, usage patterns, and detailed explanations—each with interactive examples. Start with and drawQuadrille()`, then explore shape manipulation, color handling, I/O, WebGL rendering, and more.
- 
Published in SoftwareX. Goes beyond technical documentation—explains the motivation, research hypothesis, design rationale, and internal architecture of p5.quadrille.js.
- 
Official GitHub repository.
– Fork the repo and contribute via pull requests (GitHub Guide)
– Use the bug report or feature request templates for support
- 
Experimental features, new ideas, and early previews shaping future versions of the library.