[p5.js 2.0 Bug Report]: p5.strands noise has a different range than non-strands noise

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.1.2

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Steps:

1. Create a p5.strands shader that offsets position with noise
2. Draw something with the shader

It moves both above and below the initial value. Here's an example showing three lines:

• In white, the initial line at y=0
• In red, the line offset by a strands noise function
• In blue, the line drawn with noise added outside of strands

The blue line only ever adds to y, pushing it down. The red line moves it up half the time and down half the time.

(This maybe also explains why the shader noise visual test was failing, since it was outputting negative colours.)

While it's not necessarily important for the shader implementations to match exactly (there are performance reasons why it probably should be different), it'll probably lead to confusion if the output range for noise is different. It confused me, at least!

I think there's definitely a use for noise centered at 0, but that should maybe be a different noise mode option if we add noiseMode.

Snippet:

let lineGeom;
let wobble;

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

  lineGeom = buildGeometry(() => {
    noFill();
    beginShape();
    const n = 400;
    for (let i = 0; i <= n; i++) {
      vertex(map(i, 0, n, -width / 2, width / 2), 0);
    }
    endShape();
  });

  wobble = baseStrokeShader().modify(() => {
    const t = uniformFloat(() => millis());
    const size = uniformVec2(() => [width, height]);
    getWorldInputs((inputs) => {
      noiseDetail(1, 0.5);
      inputs.position.y +=
        noise((inputs.position.x / size.x) * 3, t * 0.0001) * size.y * 0.5;
      return inputs;
    });
  });
}

function draw() {
  background(0);
  push();
  strokeWeight(5);
  push();
  stroke("red");
  strokeShader(wobble);
  model(lineGeom, 50);
  pop();
  stroke("blue");
  beginShape();
  const n = 100;
  const t = millis()
  noFill()
  noiseDetail(1, 0.5)
  for (let i = 0; i <= n; i++) {
    vertex(map(i, 0, n, -width / 2, width / 2), height*0.5*noise(i/n * 3, t*0.0001));
  }
  endShape();
  stroke("white");
  model(lineGeom);
  pop();
}

Live: https://editor.p5js.org/davepagurek/sketches/lXuGsdnK6

[skyash-dev]

yes, this is confusing. having something like

setNoiseMode('signed')

would make the behavior clearer and easier to reason about.

[shuklaaryan367-byte]

I was initially confused by this, it seems the core issue is that noise() has different output ranges depending on context.

CPU-side noise() returns values in [0, 1], so it only displaces geometry in one direction, while strands shader noise appears centered around 0, causing bidirectional displacement.

Since both use the same noise() API, this difference is surprising unless the user already understands where the code is executing. Clarifying or making this distinction explicit would likely reduce confusion.

[davepagurek]

We have an additional issue for an addon for a simplex noise mode: #6152 THere's also discussion of a noiseMode() there to support simplex noise. Possibly worth making an additional issue for implementing scaffolding in p5 for noiseMode so that addons can tap into that rather than making them all individually implement noiseMode.