# Filling 1D noise optimally

**URL:** <https://discourse.processing.org/t/filling-1d-noise-optimally/20666>\
**Category:** Coding Questions\
**Created:** [May 9, 2020, 1:09pm UTC](https://discourse.processing.org/t/filling-1d-noise-optimally/20666 "2020-05-09T13:09:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shinyogre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shinyogre/32/9133_2.png) [@shinyogre](https://discourse.processing.org/u/shinyogre)\
**Post date:** [May 9, 2020, 1:09pm UTC](https://discourse.processing.org/t/filling-1d-noise-optimally/20666/1 "2020-05-09T13:09:26Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 9, 2020, 2:19pm UTC](https://discourse.processing.org/t/filling-1d-noise-optimally/20666/2 "2020-05-09T14:19:34Z")

</div>

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? 😊

---

<div class="post-metadata">

**Author:** ![shinyogre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shinyogre/32/9133_2.png) [@shinyogre](https://discourse.processing.org/u/shinyogre)\
**Post date:** [May 9, 2020, 2:42pm UTC](https://discourse.processing.org/t/filling-1d-noise-optimally/20666/3 "2020-05-09T14:42:59Z")

</div>

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](https://editor.p5js.org/shinyogre/sketches/iaI_n5-DS)