Writing a sketch

A p5 sketch

One sketch.js in global mode. p5 itself is supplied.

sketch.js, the shape this page describes · moved by a pulse here; in Sialk, by the room

One folder, one sketch.js that declares setup() or draw().

my-sketch/
  sketch.js

That is global mode, the shape the p5 web editor produces, and the shape nearly every p5 sketch on the internet is in. Sialk supplies p5 itself, so your folder needs no library, no index.html, and no network connection.

The smallest one that works

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
  circle(width / 2, height / 2, 100 + sialk.audio.level * 400);
}

Drag the folder on. That is the whole process.

Making it react

Everything is on window.sialk - the audio contract:

function draw() {
  background(0, 0, 0, 40);

  const r = 100 + sialk.audio.bass * 300;
  stroke(255, 200, 120);
  noFill();
  circle(width / 2, height / 2, r);

  // The spectrum, as 64 bars
  const bins = sialk.audio.spectrum;
  for (let i = 0; i < bins.length; i++) {
    const h = bins[i] * height * 0.66;
    rect((i / bins.length) * width, height - h, width / bins.length - 2, h);
  }
}

Guard for the contract if you also want the sketch to run in a plain browser:

const audio = window.sialk?.audio ?? { level: 0, bass: 0, spectrum: new Float32Array(64) };

Canvas size

createCanvas(windowWidth, windowHeight) is the right call - Sialk sizes the surface and your sketch fills it.

A canvas smaller than the layer is transformed to fit rather than resized, so your sketch keeps its own coordinate system and its own idea of width and height. Nothing you drew moves relative to anything else you drew.

Transparency

If you never call background(), the layer is transparent and whatever is beneath it shows through. That is often what you want in a stack. If you want it opaque, call background(0). See layers.

Cost

p5 does not care about resolution. The work is per-vertex and per-JavaScript statement, so four times the pixels are close to free, a 60,000-point cloud runs the same at 4K as at 720p.

What it cares about is count. A quarter of a million points is slow at every resolution. If your sketch is struggling, the number to reduce is the number of things, not the size of the frame.

That is the exact opposite of GLSL, and knowing which one you are writing is most of the answer to "will this run".

3D

createCanvas(w, h, WEBGL) works, and behaves as p5 does everywhere else.