Variation

Comments identify code that belongs outside the sketch functions, in setup(), or in draw(). Canvas creation, background clearing, styling, and function wrappers are omitted. Sine and cosine use p5.js’s default radians. The snippets draw the marks and reproduce the behavior, not the exact samples of these canvases; axes, curves, and the cursor are omitted.

Fixed random samples

// Outside setup() and draw():
let samples;

// In setup():
randomSeed(42);
samples = Array.from({ length: 49 }, () => random());

// In draw():
const inputScale = 1;
const amount = 0.8;
for (let i = 0; i < 25; i++) {
  const u = (i / 24) * 12 * inputScale;
  const value = samples[floor(u * 4)];
  const diameter = 14 + (value - 0.5) * 22 * amount;
  circle(map(i, 0, 24, 24, width - 24), 40, diameter);
}

Sine / cosine

// In draw():
const inputScale = 1;
const amount = 0.8;
for (let i = 0; i < 25; i++) {
  const u = (i / 24) * 12 * inputScale;
  const value = (1 + sin(u)) / 2;
  const diameter = 14 + (value - 0.5) * 22 * amount;
  circle(map(i, 0, 24, 24, width - 24), 40, diameter);
}
// Replace sin(u) with cos(u) for a quarter-cycle shift.

Perlin noise

// In setup():
noiseSeed(42);

// In draw():
const inputScale = 1;
const amount = 0.8;
for (let i = 0; i < 25; i++) {
  const u = (i / 24) * 12 * inputScale;
  const value = noise(u);
  const diameter = 14 + (value - 0.5) * 22 * amount;
  circle(map(i, 0, 24, 24, width - 24), 40, diameter);
}

Comments identify code that belongs outside the sketch functions, in setup(), or in draw(). Canvas creation, styling, and function wrappers are omitted.

// In setup():
randomSeed(42);

// In draw():
for (let row = 0; row < 7; row++) {
  for (let column = 0; column < 6; column++) {
    const value = random();
    circle(20 + column * 40, 20 + row * 30, 6 + value * 20);
  }
}

// Outside setup() and draw():
let values;

// In setup():
randomSeed(42);
values = Array.from({ length: 42 }, () => random());

// In draw():
for (let row = 0; row < 7; row++) {
  for (let column = 0; column < 6; column++) {
    const value = values[row * 6 + column];
    circle(20 + column * 40, 20 + row * 30, 6 + value * 20);
  }
}

// In setup():
noiseSeed(42);

// In draw():
const seconds = millis() / 1000;
for (let row = 0; row < 7; row++) {
  for (let column = 0; column < 6; column++) {
    const value = noise(column * 0.6, row * 0.6, seconds);
    circle(20 + column * 40, 20 + row * 30, 6 + value * 20);
  }
}

The code follows the controls. Drag an underlined number horizontally, or focus it and use arrow keys, to change the matching slider. Shift + arrow takes larger steps. Comments identify code that belongs outside the sketch functions, in setup(), or in draw(); canvas creation, background clearing, styling, and function wrappers are omitted. In a sketch, millis() supplies time and mouseX/mouseY supply pixel coordinates; this page normalizes the pointer to run from 0 to 1 across the canvas and multiplies by 10 to explore a larger input range.

// In setup():
noiseSeed(42);

// In draw():
const inputScale = 0.6;
const amount = 0.9;
for (let row = 0; row < 8; row++) {
  for (let column = 0; column < 18; column++) {
    const u = column * inputScale;
    const v = row * inputScale;
    const value = noise(u, v);
    const diameter = 20 + (value - 0.5) * 34 * amount;
    circle(20 + column * 40, 30 + row * 40, diameter);
  }
}

The expressions use normalized values: wave(u) = (1 + sin(u)) / 2. fixedRandom(x, y, z) retrieves a seeded random value for a coordinate cell; it is a helper in this demonstration, not a p5.js function. Its cache keeps one sample per cell for the life of the sketch, so with the same seed, visiting cells in the same order reproduces the samples. Run initialization once, not on every frame. The noise demonstration uses single-octave gradient Perlin noise; p5.js noise() has different implementation details, but the same useful nearby-input behavior. The snippet reproduces the behavior, not the exact noise or random samples of this canvas.