p5.js deviceOrientation 变量

在 p5.js 中，deviceOrientation 是一个全局变量，用于检测设备的方向。它主要用于移动设备或支持陀螺仪的平板电脑，并提供了设备的旋转值。

语法

deviceOrientation

返回值

deviceOrientation 变量返回一个数字，表示当前设备的旋转值。

• 0 表示设备竖直，上方朝向屏幕，底部朝向地面。
• 90 表示设备水平，面向屏幕的右边。
• -90 表示设备水平，面向屏幕的左边。
• 180（或-180） 表示设备倒置，上下位置与0相同。

示例

下面的示例演示了如何使用 deviceOrientation 变量以及如何根据设备的方向来改变页面上的元素。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(width/2, height/2, 50, 50);

  // 根据设备的方向改变图形的位置
  if (deviceOrientation === 90) {
    ellipse(width/2 + 50, height/2, 50, 50);
  } else if (deviceOrientation === -90) {
    ellipse(width/2 - 50, height/2, 50, 50);
  } else if (deviceOrientation === 180) {
    ellipse(width/2, height/2 + 50, 50, 50);
  } else {
    ellipse(width/2, height/2 - 50, 50, 50);
  }
}

上面的代码将在画布中央绘制一个圆圈，并根据设备的方向在其四个方向之间来回移动另一个圆圈。

注意事项

• deviceOrientation 变量在只能在支持陀螺仪的移动设备或平板电脑上使用。
• 该变量在不同设备上可能会有不同的结果，具体结果取决于设备的实现方式。
• 可以通过 windowWidth 和 windowHeight 变量来获取窗口大小，并基于窗口大小调整绘制的图形。