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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

@ggorlen thanks again for the help. No, `frameRate()` turns it into a choppy animation at best. Varying the `start` value too wouldn't help here. It just varies the intensity of the noise values. I want to make the animation slow like a calm wave. Wonder if it's possible in 1D at all. — Tornado_code, Jun 21 '22 at 23:20
It is not working I have tried appending to it 0.01, 0.001. 0.0001 too. Could you please try it in the editor? — Tornado_code, Jun 21 '22 at 23:26

George Profenza · Accepted Answer · 2022-06-22T00:45:35.600

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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

Thank you very much for the brilliant solution, man. However, I am very curious. You wrote, "You call noise() multiple times in the for loop starting with the same value, incrementing by the same amount hence the identical height bars." But if you run my OP sketch with noLoop(), the bars height vary as expected. And also, although I am calling noise multiple times in the `for` loop, the increment at the end of each `for` loop iteration should apply a **new** noise value to the next **i** item in the index array. — Tornado_code, Jun 22 '22 at 07:59
So I don't get it. I was only looking for a way to slow down the animation. Please excuse my inexperience. I want to understand this better. :) — Tornado_code, Jun 22 '22 at 07:59
Good question. I'm not 100% sure I get it myself TBH. Initially I thought it was persistence of vision: the illusion that values change when they're all the same, just all changing fast from one frame to the next. Then I invoked the debugger in DevTools Console and noticed indeed the values are different when the `speed` increments fast(0.1), but not when it's slow (0.0001). My hunch is it might have something to do with the [`perlin`](https://github.com/processing/p5.js/blob/e32b45367baad694b1f4eeec0586b910bfcf0724/src/math/noise.js#L139) cache, but I'm afraid I won't have time to debug more. — George Profenza, Jun 22 '22 at 10:48

Uncontrollably fast p5.js sketch in 1D perlin noise

1 Answers1