javascript - gyronorm 库：如何正确地将传感器值传递给函数？

Question

大家！

我是一个编程新手，我很确定我的做法是一团糟，而且非常糟糕……我是一名工业设计专业的学生，​​我正在为我的学期项目做一个项目。这只是一个奇怪而草率的尝试……

我正在尝试使用来自陀螺仪和加速度计的数据构建一个在移动设备上的浏览器中运行的手势控制合成器。我正在使用 p5.js 和 p5.sound.js 库以及 gyronorm.js 库。

目前我设法让这个东西作为一个单音合成器工作，我正在尝试用来自陀螺仪的传感器数据来调制振幅。到目前为止，它可以工作，围绕 z 轴转动手机（平放在桌子上，面朝上），但它会发出奇怪的噼啪声。我认为这可能与绘图功能的帧速率有关，但我不知道哪里错了，老实说，我在谷歌中找不到答案，因为我真的不太清楚，我是什么寻找XD。

所以这是我的代码：

let gn; // global variable for the Gyronorm Constructor
let movZ, movX, movY; //global variables for the accelerometer values

var alpha = 0,
  beta = 0,
  gamma = 0; //global variables for the gyroscope values

let vol; //global variable for the value calculation of the z-axis (alpha) value
let osc1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(120);

  osc1 = new p5.Oscillator();
  osc1.freq(300);

  osc1.start();
  //constructor for gyroscope
  gn = new GyroNorm();

  let args = {
    decimalCount: 2,
    frequency: 10
  }

  gn.init(args).then(function() {
    gn.start(function(data) {
      // Process:
      alpha = data.do.alpha; //( deviceorientation event alpha value 0- 360 degrees)
      beta = data.do.beta; //( deviceorientation event beta value )
      gamma = data.do.gamma; //( deviceorientation event gamma value )


      movZ = data.dm.z; //( devicemotion event acceleration z value )
      movX = data.dm.x; //( devicemotion event acceleration x value )
      movY = data.dm.y; //( devicemotion event acceleration y value )
      vol = abs(sin(radians(alpha))); //trigonometric calculation of the alpha value to a value between 1 and 0

    });
  }).catch(function() {
    notAvailable()
  });
}


function draw() {
  background(0);
  fill(255);

  osc1.amp(vol);

  text("rotationZ (computed): " + vol, 200, 300);
  text("rotationX: " + beta, 200, 350);
  text("rotationY: " + gamma, 200, 400);

  text("accZ: " + movZ, 50, 300);
  text("accX: " + movX, 50, 350);
  text("accY: " + movY, 50, 400);

}

function notAvailable() {
  text("Gyroscope not supported!Sorry...", 300, 300);
}

这是本地隧道的链接，因此您可以在手机上尝试（我认为这应该可以吗？）

http://4892fdea.ngrok.io

有没有人有解释或提示或任何东西？？？我真的很感激！请帮助我，因为我真的被困在这里！thx

此致！

路德维希

标签： javascriptaudiomobilep5.jsgyroscope