P5.waves - waveforms for motion, patterns and morphing

Gallery
1

Hi everyone,

I’d like to share p5.waves, a small library I’ve been developing for using waveforms to drive motion, shapes and patterns in p5.js.

It started with a 16×16 black-and-white grid and a set of wave formulas curated by Ted Davis. Combining a wave for the rows with another for the columns produced patterns that kept changing character. I wanted to make that kind of exploration easy to use in other sketches.

The idea is simple: pass in a position and optional time, get a number back. Use that value for a position, a radius, a colour, line spacing, or whatever your sketch needs.

The library includes 35 wave shapes. You can choose one by name, blend two together, or use Wave Shift to move between formulas automatically with smooth transitions. Samplers let you set up the options once and reuse them throughout a sketch.

For a small example, add this after p5.js and before sketch.js in your index.html:

<script src="https://cdn.jsdelivr.net/gh/seb-prjcts-be/p5.waves@v3.6.0/p5.waves.min.js"></script>

Then try this sketch. The same line gradually takes on the character of different waves:

let motion;

function setup() {
  createCanvas(600, 300);
  noFill();
  stroke(30);
  strokeWeight(2);

  motion = Waves.createSampler({
    shift: true,
    group: ['classic sine', 'triangle', 'mountain peaks'],
    amplitude: 70,
    frequency: 0.15
  });
}

function draw() {
  background(245);
  const t = millis() / 1000;

  beginShape();
  for (let x = 0; x <= width; x += 3) {
    vertex(x, height / 2 + motion.sample(x, t));
  }
  endShape();
}

It supports p5.js 1.x and 2.x and is released under the MIT licence. Credit for the original wave-formula dataset goes to Ted Davis. The library was developed with AI coding assistance; the background story on the project website describes that process.

I’d love to see what you make with it, and hear where the API or examples could be clearer.

Sebastien

1 Like