Javascript 需要帮助以开放式处理草图可视化某些数据吗

我在这里完成的项目叫做。动画是从中派生出来的。这段代码连接到我当地海滩附近的波浪浮标，动画与现场条件相关。如果“涌浪”较高，我希望波峰和波谷较大，涌浪数据的范围为min 0.1m=最小涌浪，因此动画中的波谷和波峰较低。最大波高10米，波谷和波峰都很大。。。然后，具有0到20秒范围的冲浪“周期”数据将反映动画的“平滑度”，因此高周期动画上的直线很漂亮，而低周期将是起伏/参差不齐的直线

如果涌浪数据较大，我已设法获取数据以“加速”动画，但我无法控制动画上波浪的高度或周期

有人有什么建议吗

我们将这些变量设置为全局变量，以便知道它们何时加载： 让冲浪高度，冲浪周期

  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);
      
      
  }

fetch(
"https://data.channelcoast.org/observations/waves/latest?key=“我的钥匙”
)
.然后（功能（resp）{
返回相应的文本（）；
})
.then（功能（数据）{
//控制台日志（数据）；
让parser=new DOMParser（），
xmlDoc=parser.parseFromString（数据，“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；
//可以在此处设置surf变量，因为只有在加载数据后草图才会启动，
//还请确保首先将其转换为“number（surfheight）”之类的数字，否则它将无法工作
surfht=数量（surfheight）；
surfpd=数量（surfperiod）；
document.getElementById（“surfheight”）.textContent=surfheight；
document.getElementById（“surfperiod”）.textContent=surfperiod；
});
var yoff=0；//柏林噪声的第二维
var waveColor、waveColor2、waveColor3；
var-wavecolorr；
var控制，波速；
var帆布；
让冲浪；
让我们一起来；
函数设置（）{
canvas=createCanvas（窗口宽度、窗口高度）；
waveColor=颜色（0,50,120,100）；
waveColor2=颜色（0,100,150,100）；
waveColor3=颜色（0，200，250，100）；
噪声尾（2,0.2）；
waveColorArr=[waveColor，waveColor，waveColor2，waveColor2，waveColor3，waveColor3]；
}
函数绘图（）{
//加载这些后，草图开始绘制
如果（！surfperiod&&！surfheight）{
返回；
}
背景（0）；
仰泳（）；
常数amp=map（surfht，0，10，0，1）；
//常数amp=map（surfpd，0,10,0,1）；
对于（var i=0；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);

//我们将从波点中绘制一个多边形
beginShape（）；
填充（waveColorArr[i]）；
var xoff=0；
对于（var x=0；x 1.0范围至
（高度/10）*（i+1）
至
高度-高度/10+（高度/10）*i
范围

一种快速而简单的方法是将这些值乘以一个可以缩放波高的值

更好的是，您可以将指令封装到一个可重用的函数中，并可以使用参数进行配置

你也可以看看这个，记住你可以把波加在一起，得到不同的形状