如何在运行草图的过程中更改像素密度？

Question

我正在尝试在设置中首次初始化草图后更改其像素密度。基本上，用户可以与一些 UI 输入进行交互，并且应该基于此更改像素密度。然而，除了 setup() 中的一个实例之外，我还没有找到实际更改像素密度的方法。 还可能吗？

这是我的代码的简化版本。 有一个事件处理程序在输入元素上的输入事件上调用

updateSettings()

。

let pd = 2

setup() {
  createCanvas(windowWidth, windowHeight)
  pixelDensity(pd)
}

function updateSettings(target) {
  if (target.name == "pixelDensity" && pd != target.value) {
    pd = target.value
    changePixelDensity()
  }
}

function changePixelDensity() {
  pixelDensity(pd)
}

我想做的是让用户更改草图的像素数，以希望降低对 CPU 的影响，然后在生成所有内容后，用户可以放回像素密度以完整详细地绘制草图。

Answer 1

我认为您过于简化了代码。没有足够的上下文来运行代码并重现问题。

问题可能是您没有将

target.value

从字符串转换为数字。尝试一下

+target.value

。

这是一个工作示例：

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  drawCircle();
}

function drawCircle() {
  background(200);
  circle(50, 50, 70);
}

function changePixelDensity({target}) {
  pixelDensity(+target.value);
  drawCircle();
}

document
  .querySelector("input")
  .addEventListener("change", changePixelDensity);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<input type="range" min="0.1" max="10" value="0.5" step="0.1">

也可能

target.name

并不是您想象的那样

"pixelDensity"

。当条件未运行时，在其上方添加打印内容以检查条件中使用的变量及其类型 (

print(typeof someVar, someVar)

)，以确保它们符合您的预期。