如何在p5.js草图运行中途修改pixelDensity？

我希望在p5.js的setup()初始化完成后，通过用户UI输入交互修改草图的pixelDensity——生成过程中降低像素密度减轻CPU负载，生成完成后恢复高像素密度呈现细节。但目前只有在setup()里设置pixelDensity才有效，尝试用以下代码实现动态修改却失败了，请问这是否可行？

简化代码：

let pd = 2

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

// EDIT: 补充上下文代码
let settingsList = {
   panel: document.querySelector(".settings"),
   closeIcon: document.querySelector(".settings-exit"),
   settingInputs: [
      document.querySelector(".settings input[name='pixelDensity']")   
   ]
}

settingsList.settingInputs.forEach((input) => {
  input.addEventListener("input", (e) => {
      updateSettings(e.target)
   })
})

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

function changePixelDensity() {
  pixelDensity(pd)
}

解决方案 #

首先明确：p5.js的pixelDensity()仅在画布初始化阶段生效，也就是只能在setup()里调用一次。因为这个函数会决定画布的实际像素尺寸（比如设置为2时，画布实际像素是窗口宽高的2倍），setup完成后画布已创建，再调用pixelDensity()不会有任何效果。

要实现动态调整的需求，必须重新创建画布，同时应用新的像素密度。具体步骤和修改后的代码如下：

修改后的示例代码 #

let pd = 2;
let canvas;

function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  pixelDensity(pd);
  // 初始化绘制内容（根据你的需求调整）
  drawDefaultContent();
}

function drawDefaultContent() {
  background(220);
  fill(255, 0, 0);
  circle(width/2, height/2, 100);
}

// UI事件监听
let settingsList = {
  settingInputs: [document.querySelector(".settings input[name='pixelDensity']")]
};

settingsList.settingInputs.forEach(input => {
  input.addEventListener("input", e => updateSettings(e.target));
});

function updateSettings(target) {
  // 把输入值转为数字，避免字符串类型问题
  const newPd = parseInt(target.value);
  if (target.name === "pixelDensity" && pd !== newPd) {
    pd = newPd;
    changePixelDensity();
  }
}

function changePixelDensity() {
  // 可选：保存当前画布内容，避免重新创建后丢失
  const currentCanvas = canvas.get();
  
  // 重新调整画布尺寸并应用新的像素密度
  resizeCanvas(windowWidth, windowHeight);
  pixelDensity(pd);
  
  // 恢复之前的画布内容（如果需要保留）
  image(currentCanvas, 0, 0);
}

// 如果有持续绘制逻辑，保留draw循环
function draw() {
  // 你的动态绘制代码
}

关键要点 #

1. 必须重新创建画布：通过resizeCanvas()（窗口尺寸不变时更合适）或createCanvas()重新初始化画布，此时调用pixelDensity()才能生效。
2. 处理输入类型：UI输入框的值是字符串，必须转为数字后再赋值给pd，否则会导致像素密度设置出错。
3. 内容保留（可选）：如果需要保留之前的绘制内容，用canvas.get()获取当前画布图像，重新创建画布后用image()将其绘制回去。
4. 适配生成流程：你可以在生成复杂图形前调用changePixelDensity()降低像素密度，生成完成后再调用一次恢复高像素密度，同时重新绘制或恢复内容。

内容的提问来源于stack exchange，提问作者IanBalls737