Codi complet amb explicació de cada paràmetre

<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <title>Exemple p5.js: Canvas i Sliders visibles</title>
    <!-- Inclou p5.js des del CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
    <style>
      body { font-family: sans-serif; margin: 20px; }
      #sketch-container { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }
      #slider-container { margin-top: 10px; }
      .slider-group { margin-bottom: 5px; }
      pre { background: #f4f4f4; padding: 10px; overflow-x: auto; }
    </style>
  </head>
  <body>
    <div id="sketch-container"></div>

    <script>
      // Variables globals per als sliders
      let octavesSlider, falloffSlider, seedSlider;

      function setup() {
        // Seleccionem el contenidor on posarem el canvas i els sliders
        let container = select('#sketch-container');
        
        // Creem el canvas de 600x400 i l'afegim al contenidor
        let cnv = createCanvas(600, 400);
        cnv.parent(container);
        
        // Creem un div per als sliders dins del contenidor
        let sliderContainer = createDiv();
        sliderContainer.id('slider-container');
        sliderContainer.parent(container);
        
        // Grup per al slider "octaves"
        let octavesGroup = createDiv();
        octavesGroup.addClass('slider-group');
        octavesGroup.parent(sliderContainer);
        createSpan('Octaves: ').parent(octavesGroup);
        octavesSlider = createSlider(1, 10, 4, 1);
        octavesSlider.parent(octavesGroup);
        
        // Grup per al slider "falloff"
        let falloffGroup = createDiv();
        falloffGroup.addClass('slider-group');
        falloffGroup.parent(sliderContainer);
        createSpan('Falloff: ').parent(falloffGroup);
        falloffSlider = createSlider(0, 1, 0.5, 0.01);
        falloffSlider.parent(falloffGroup);
        
        // Grup per al slider "seed"
        let seedGroup = createDiv();
        seedGroup.addClass('slider-group');
        seedGroup.parent(sliderContainer);
        createSpan('Seed: ').parent(seedGroup);
        seedSlider = createSlider(0, 1000, 0, 1);
        seedSlider.parent(seedGroup);
      }

      function draw() {
        background(220);
        
        // Recull els valors actuals dels sliders
        let octaves = octavesSlider.value();
        let falloff = falloffSlider.value();
        let seed = seedSlider.value();
        
        // Ajusta el comportament del noise:
        // - noiseDetail(octaves, falloff): defineix la quantitat de detalls i la seva disminució.
        // - noiseSeed(seed): estableix la llavor per a un patró reproducible.
        noiseDetail(octaves, falloff);
        noiseSeed(seed);
        
        // Dibuixa una línia de terreny utilitzant noise()
        stroke(0);
        noFill();
        beginShape();
        for (let x = 0; x <= width; x++) {
          let n = noise(x * 0.01); // Escala per controlar la freqüència del soroll
          let y = map(n, 0, 1, height, height / 2); // Mapeja el valor a una posició y al canvas
          vertex(x, y);
        }
        endShape();
      }
    </script>
  </body>
</html>

Explicació dels paràmetres