需要帮助使用开放处理草图可视化一些数据

如何解决需要帮助使用开放处理草图可视化一些数据

我在这里整理的项目名为 Swellcloud。动画是从 here 分叉出来的。此代码连接到我当地海滩附近的波浪浮标，动画与现场条件相关。如果“膨胀”很高，我希望波峰和波谷较大，波峰数据的范围为 min 0.1m = 动画中波谷和波峰最小的最小波峰。最大 10m 大波浪如此大的波谷和波峰......那么范围为 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,waveColor3,waveColor3];
  }

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

    background(0);
    nostroke();

    const amp = map(surfht,10,1);
    //const amp = map(surfpd,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),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,20,0.01,0.5);
        xoff += inc + 0.5 / 10000.0;
      }

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

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

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

解决方法

这是一段主要绘制单波的代码：

// 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),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,20,0.01,0.5);
        xoff += inc + 0.5 / 10000.0;
      }

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

您已经知道如何map() inc 值。类似的通知 y 也被映射，从 0.0 -> 1.0 范围到 (height / 10) * (i + 1) 到 height - height / 10 + (height / 10) * i 范围。

一种快速而笨拙的方法是将这些值乘以一个可以缩放波浪高度的值。

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

您还可以查看此 detailed answer on drawing sine waves 并记住您可以将波浪相加/相乘以获得不同的形状。