title: noisy gradient in p5.js
body: <p><strong>The Goal</strong></p>
  
  <p>An often seen effect in illustrations and other graphic works is a gradient between two colors, which is provided with a grain/noise and thus gets a very special effect. (especially example 3.) </p>
  
  <p>My research has shown many solutions how to achieve this effect in software like Illustrator, but I would like to recreate it with p5js or the vanilla js canvas.</p>
  
  <p><a href="https://i.stack.imgur.com/Wzm0x.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wzm0x.jpg" alt="enter image description here"></a></p>
  
  <p>(source: <a href="https://medium.com/@stefanhrlemann/how-to-create-noisy-risograph-style-gradients-and-textures-in-photoshop-in-3-ways-394d6012a93a" rel="nofollow noreferrer">https://medium.com/@stefanhrlemann/how-to-create-noisy-risograph-style-gradients-and-textures-in-photoshop-in-3-ways-394d6012a93a</a>)</p>
  
  <p><strong>My attempt</strong></p>
  
  <p>I have already tried to create a gradient and set a random noise with a specific color using the pixel array on top of it. 
  Which only partially leads to the desired effect:</p>
  
  <pre><code>function draw() {
      setGradient(0, 0, width, height, color(0, 0, 0), color(255, 255 ,255));
      setNoise();
  }
  
  function setNoise() {
      loadPixels();
      for (let x = 0; x &lt; width; x++ ) {
          for (let y = 0; y &lt; height; y++ ) {
              if (random(1) &gt; 0.9) {
                  const index = (x + y * width) * 4;
                  pixels[index] = 255;
                  pixels[index + 1] = 255;
                  pixels[index + 2] = 255;
                  pixels[index + 3] = 255;
              }
          }
      }
      updatePixels();
  }
  
  function setGradient(x, y, w, h, c1, c2) {
      noFill();
      for (let i = y; i &lt;= y + h; i++) {
          let inter = map(i, y, y + h, 0, 1);
          let c = lerpColor(c1, c2, inter);
          stroke(c);
          line(x, i, x + w, i);
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/aCIKx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aCIKx.png" alt="enter image description here"></a></p>
  
  <p>what do you think? is this the right approach or is there a better / simpler solution? </p>