Uncontrollably fast p5.js sketch in 1D perlin noise

Question

For the life of me, I cannot figure a way to get this sketch to run at a slow pace to clearly see the moving wavy pattern. It's just maddeningly fast paced. It uses 1D perlin noise.

let gap = 10;
let start = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(20);
  noStroke();
  fill(225, 225, 0);
  translate(0, height / 2);

  for (let i = gap; i < width - gap; i += gap) {
    let n1 = noise(start);
    let noise1 = map(n1, 0, 1, 20, 150);
    rect(i, 0, 3, -noise1);
    start += 0.1;
  }
}

user_89766 · Answer

You call noise() multiple times in the for loop starting with the same value, incrementing by the same amount hence the identical height bars. (Similar to calling noise once, then re-using the value in the for loop).

You need two more ingredients:

an array to store initial noise values (which is reused to update these values)
initialising the initial values with different values. These would help with getting a different value per bar.

In terms of speed, simply decrease the increment value (start += 0.1; becomes start += 0.001;)

Here's what I mean:

let gap = 10;
let start = new Array(39);

function setup() {
  createCanvas(400, 400);
  // init array with different values
  for(let  i = 0 ; i < 39; i++){
    start[i] = 0.1 * i;
  }
}

function draw() {
  background(20);
  noStroke();
  fill(225, 225, 0);
  translate(0, height / 2);

  for (let i = gap, nIndex = 0; i < width - gap; i += gap, nIndex++) {
    let n1 = noise(start[nIndex]);
    let noise1 = map(n1, 0, 1, 20, 150);
    rect(i, 0, 3, -noise1);
    start[nIndex] += 0.01;
  }
}

Personally I'd switch the for loop to iterate using an index, not an x position offset, but it may be a matter of preference:

let gap = 10;
let numBars = 42;
let noiseXValues = new Array(numBars);

function setup() {
  createCanvas(400, 400);
  // init array with different values
  for(let  i = 0 ; i < numBars; i++){
    noiseXValues[i] = 0.1 * i;
  }
}

function draw() {
  background(20);
  noStroke();
  fill(225, 225, 0);
  translate(0, height / 2);
  let barWidth = (width - gap) / numBars;
  for (let i = 0; i < numBars; i++) {
    let x = gap + (barWidth * i);
    let noiseValue = noise(noiseXValues[i]);
    let mappedNoiseValue = map(noiseValue, 0, 1, 20, 150);
    rect(x, 0, 3, -mappedNoiseValue);
    noiseXValues[i] += 0.01;
  }
}

Uncontrollably fast p5.js sketch in 1D perlin noise

1 Answers