npm version p5.js Source Code SoftwareX Paper Blog

p5.quadrille.js

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

Using p5.quadrille.js can be as minimal or as interactive as you need:

The library works in two setups:

CDN

Include both libraries using <script> tags, which run in both global and instance mode.

<!-- index.html -->
<!-- Load p5.js first (required by p5.quadrille.js, latest version) -->
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
<!-- Load p5.quadrille.js (latest stable version) -->
<script src="https://cdn.jsdelivr.net/npm/p5.quadrille/dist/p5.quadrille.min.js"></script>
<script>
  let q // Step 1: Declare

  function setup() {
    createCanvas(600, 400)
    q = createQuadrille(6, 4, 10, '🐲') // Step 2: Create
  }

  function draw() {
    background(0)
    drawQuadrille(q) // Step 3: Render
  }

  function mousePressed() {
    q.randomize() // Step 4: Interact
  }
</script>

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.

npm (ESM)

Install both p5 and p5.quadrille as dependencies:

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:

// 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.

Algorithms & Performance

Let n be the total number of cells in the quadrille.

Observations:

Adoption

Releases

System Requirements

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

Contribute

Your contributions are welcome!

Support

Use the bug report or feature request templates to report issues or suggest new features.

Open TODOs

Fork the repo and submit a pull request to help with any of the following (GitHub Guide):

  1. Implement isPolyomino()
  2. Add perlin() and simplex() noise-based utilities
  3. Extend sort() to support 'webgl' mode — requires Framebuffer support for sample() (currently limited to the P2D renderer)
  4. Add WEBGL support for screenRow() and screenCol() — may depend on features from p5.treegl

Further Reading