Filling 1D noise optimally

I am generating vertices using perlin noise and making a shape out of them with beginShape() and endShape(). I am then scrolling to the left while generating more vertices on the right.

https://editor.p5js.org/shinyogre/sketches/iaI_n5-DS

This is based one of Daniel Shiffman’s Coding Train tutorials. My question is, is there a way to fill the regions between each of the lines with their respective colors? My goal is to make some parallaxing mountains. I tried using line() but the performance drops to about 1 fps, even with WEBGL.

1 Like

You can fill a shape with the color red like this: fill(255, 0, 0). In your sketch right now, you’re calling the noFill function, so you have to replace that with a call to fill. That will actually take you pretty close to your end goal.

Now, can you figure out a way to go the last mile? :blush:

1 Like

I had noFill() on because fill() wasn’t behaving nicely, but after some thought, I figured it out. I added a couple of vertices outside of the noise loop, whose x,y position don’t change. These points are the "base of the “mountain”. That worked to enclose the shape properly such that fill() worked

https://editor.p5js.org/shinyogre/sketches/iaI_n5-DS

2 Likes