使用p5.js 获取窗口宽度

什么是 p5.js

p5.js 是一个流行的 JavaScript 库，用于创建交互式图形和动画，尤其适用于在网页浏览器中展示艺术作品、数据可视化以及嵌入式系统等。p5.js 建立在 Processing 编程环境之上，支持包括基于事件的交互、动画、运动等繁杂的图形功能。

窗口宽度的获取

有时我们需要获取浏览器窗口的宽度以便优化我们的应用程序。使用 p5.js，可以轻松地获取窗口宽度。

p5.js 提供了一个称为 windowWidth 的可读属性，返回当前窗口的宽度，例如：

console.log(windowWidth);

此代码将记录当前窗口的宽度，并在浏览器的控制台中记录该值。windowWidth 属性还包括一个约定俗成的函数，当窗口大小改变时，将调用该函数。

function windowResized() {
  console.log("New width: " + windowWidth + " and new height: " + windowHeight);
}

这段代码将创建一个名为 windowResized() 的函数，当窗口大小发生变化时，该函数将记录当前窗口的宽度和高度。为确保 p5.js 能够调用该函数，请使用如下代码：

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

function draw() {
  background(220);
}

function windowResized() {
  console.log("New width: " + windowWidth + " and new height: " + windowHeight);
}

应该注意的是，p5.js 保留对窗口大小的缓存，请注意不要使用任何隐式布局大小。因此，如果您在代码中使用了任何固定值和窗口大小相关的计算，请确保在大小发生改变时更新这些值。

结论

p5.js 提供了一种简单而强大的方式获取当前窗口的宽度。使用 windowWidth 属性，可能会在开发应用程序时极大地简化代码，并减少重复的冗余代码。使用上述代码片段时，记得将其存储为 JavaScript 文件并将其链接到 HTML 中。

参考资料

1. the p5.js reference on windowWidth
2. Processing and p5.js Documentation
3. Leading Graphics Libraries for JavaScript in 2021