Need help visualizing some data with an open processing sketch

The project that i have put together here called Swellcloud. The animation was forked from here. This code connects to a wave buoy just off my local beach and the animation is relevant to the live conditions. If the 'swell' is high, I would like the peaks & troughs to be large, the swell data has a range of min 0.1m = smallest swell so low troughs & peaks in the animation. And maximum 10m large waves so large troughs & peaks... then the surf 'period' data which has a range of 0s to 20s would reflect the 'smoothness' of the animation, so high period nice straight lines on the animation, and low period would be choppy/ragged lines.

I have managed to get the data to 'speed' up the animation if the swell data is large but i cant control the height of the waves on the animation or the period

Does anyone have any pointers?

We make these variables global so we know when they have loaded: let surfheight, surfperiod;

  fetch(
    "https://data.channelcoast.org/observations/waves/latest?key='my key"
  )
    .then(function (resp) {
      return resp.text();
    })
    .then(function (data) {
      //console.log(data);
      let parser = new DOMParser(),
        xmlDoc = parser.parseFromString(data, "text/xml");
      //console.log(xmlDoc.getElementsByTagName('ms:hs')[36].innerHTML); //76=Perran,36 Porthleven
      surfheight = xmlDoc.getElementsByTagName("ms:hs")[36].innerHTML;
      surfperiod = xmlDoc.getElementsByTagName("ms:tp")[36].innerHTML;

      // you can set the surf variable here, because the sketch will start only after the data loads,
      // also make sure to first convert it to a number like "Number(surfheight)" otherwise it won't work

      surfht = Number(surfheight);
      surfpd = Number(surfperiod);

      document.getElementById("surfheight").textContent = surfheight;
      document.getElementById("surfperiod").textContent = surfperiod;
    });

  var yoff = 0; // 2nd dimension of perlin noise

  var waveColor, waveColor2, waveColor3;
  var waveColorArr;
  var controls, waveSpeed;
  var canvas;

  let surfht;
  let surfpd;

  function setup() {
    canvas = createCanvas(windowWidth, windowHeight);

    waveColor = color(0, 50, 120, 100);
    waveColor2 = color(0, 100, 150, 100);
    waveColor3 = color(0, 200, 250, 100);
    noiseDetail(2, 0.2);

    waveColorArr = [waveColor, waveColor, waveColor2, waveColor2, waveColor3, waveColor3];
  }

  function draw() {
    // after these load, the sketch starts
    if (!surfperiod && !surfheight) {
      return;
    }
      
      

    background(0);
    noStroke();

    const amp = map(surfht, 0, 10, 0, 1);
    //const amp = map(surfpd, 0, 10, 0, 1);

    for (var i = 0; i <= 5; i++) {
      // We are going to draw a polygon out of the wave points
      beginShape();
      fill(waveColorArr[i]);
      var xoff = 0;

      for (var x = 0; x <= width + 500; x += 100) {
        var y = map(
          noise(xoff, yoff - 0.5 * i),
          0,
          1,
          (height / 10) * (i + 1),
          height - height / 10 + (height / 10) * i
        );
        vertex(x, y);

        // i've extracted this into a variable for cleaner code
        const inc = map(surfpd, 0, 20, 0.01, 0.5);
        xoff += inc + 0.5 / 10000.0;
      }

      vertex(width, height);
      vertex(0, height);
      endShape(CLOSE);
    }
      

    const inc = map(surfht, 0, 10, 0, 0.025);
    yoff += 0.007 + inc + 0.5 / 10000.0;
  }

  function windowResized() {
    resizeCanvas(window.innerWidth, window.innerHeight);
      
      
  }