如何使用 P5.js deviceMoved() 函数顺序显示文本？答案

【问题标题】：How to display text sequentially using P5.js deviceMoved() function?如何使用 P5.js deviceMoved() 函数顺序显示文本？
【发布时间】：2021-08-08 08:41:21
【问题描述】：

我目前正在尝试制作一个程序，当手机使用 P5.JS deviceMoved() 函数移动每几个值时，文本会发生变化。（下面的 gif 显示了我希望文本在设备移动时最终如何改变）

如下面的代码所示，我已将所有文本放入数组中，并且每次说移动值广告 30 时，我都想将索引更改为 +1，然后重复直到所有文本消失。

let button;
let permissionGranted = false;
let nonios13device = false;

let cx, cy

let value = 0;

var myMessages = ["The", "Quick", "Brown", "Fox", "Jumped", "Over", "The", "Lazy", "Dog"];
var index = 0;


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255)

  text(myMessages[index], width / 2, height / 2);
  fill(value);
  text(value, width / 3, height / 3);
  textSize(30)
}

function deviceMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function onMove() {
  var currentValue = value + 30;

  if (value = currentValue) {
    index++;
    return;
  }

  if (index >= myMessages.length) {
    index = 0;
  }
}

&lt;script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"&gt;&lt;/script&gt;

我认为我的问题出在 onMove 函数中，我需要在其中定义当前值以及哪些值可以更改文本，我对此还很陌生，因此非常感谢任何对此的见解/解决方案 :)

谢谢！

【问题讨论】：

为了将来参考，最好包含一个最小的可重现的问题示例。在这种情况下，由于传感器的使用和移动设备的兼容性，最好的方法是提供一个托管在其他地方的示例。正如您在我的回答中看到的那样，我使用 Glitch.com 完成了此操作。

标签： javascript ios mobile processing p5.js

【解决方案1】：

有几个与onMove 函数相关的问题。首先，它永远不会被调用，并且与 deviceMoved 不同，它不是 p5.js 自动调用的特殊函数。其他问题：

function onMove() {
  // You create a currentValue variable that is just value + 30.
  // Within the same function, checking if value is >= currentValue, 
  // assuming that is what you intended, will be fruitless because it
  // is never true.
  // What you probably want to do is declare "currentValue" as a global
  // variable and check the difference between value and currentValue.
  var currentValue = value + 30;

  // This is the assignment operator (single equal sign), I think you meant
  // to check for equality, or more likely greater than or equal to.
  if (value = currentValue) {
    index++;
    // You definitely do not want to return immediately here. This is where
    // you need to check for the case where index is greater than or equal
    // to myMessages.length
    return;
  }

  if (index >= myMessages.length) {
    index = 0;
  }
}

这是一个固定版本：

function deviceMoved() {
  value = value + 5;
  if (value > 255) {
    // When value wraps around we need to update currentValue as well to
    // keep track of the relative change.
    currentValue = 255 - value;
    value = 0;
  }

  onMove();
}

let currentValue = 0;
function onMove() {
  if (value - currentValue >= 30) {
    // Update currentValue so that we will wait until another increment of
    // 30 before making the next change.
    currentValue = value;
    index++;

    // We only need to make this check after we've incremented index.
    if (index >= myMessages.length) {
      index = 0;
    }
  }
}

为了在我的移动设备 (iOS 14) 上进行测试，我必须添加一些代码来请求访问 DeviceMotionEvent，并将其托管在使用 HTTPS 的环境中，而不是嵌入到 iframe 中。你可以看到我的代码on glitch 并实时运行它here。

【讨论】：