使用PVectors的Processing Java程序转换为p5.js运行异常求助

核心适配点说明 #

你遇到的空白屏问题基本都是Java Processing和p5.js的语法差异导致的，主要需要修改的点如下：

• p5.js 没有 new PVector() 写法，创建向量统一用 createVector() 方法
• 图片必须预加载才能操作，否则代码执行时图片还没加载完成会直接报错
• p5.js 内置的像素数组是按RGBA四个通道拆分存储的，直接按Java版的索引取像素会出错，推荐用get()/set()方法操作像素，更不容易踩坑
• 原代码只做了offset下限校验，补充上限校验避免数组越界报错

let img;

// 预加载阶段加载图片，确保后续代码运行时图片资源已就绪
function preload() {
  img = loadImage('turner.jpg');
}

function setup() {
  createCanvas(500, 500, P2D);
  img.resize(500, 500);
}

function draw() {
  loadPixels();
  const imgWidth = img.width;
  const imgHeight = img.height;
  const totalPixels = imgWidth * imgHeight;
  img.loadPixels();
  
  for (let x = 0; x < imgWidth; x++) {
    for (let y = 0; y < imgHeight; y++) {
      const i = x + y * imgWidth;
      const n = warp(x, y, 0.003, 255);
      let offset = i - Math.floor(n);
      // 双边界校验避免数组越界
      offset = offset < 0 ? 0 : offset;
      offset = offset >= totalPixels ? totalPixels - 1 : offset;
      // 按坐标取图片对应像素颜色
      const c = img.get(offset % imgWidth, Math.floor(offset / imgWidth));
      // 给画布对应位置赋值颜色
      set(x, y, c);
    }
  }
  updatePixels();
}

function warp(_x, _y, factor, n_range) {
  const n1 = noise((_x + 0.0) * factor, (_y + 0.0) * factor) * n_range;
  const n2 = noise((_x + 5.2) * factor, (_y + 1.3) * factor) * n_range;
  const q = createVector(n1, n2);
  
  const n3 = noise(((_x + q.x * 4) + 1.7) * factor, ((_y + q.y * 4) + 9.2) * factor) * n_range;
  const n4 = noise(((_x + q.x * 4) + 8.3) * factor, ((_y + q.y * 4) + 2.8) * factor) * n_range;
  const r = createVector(n3, n4);
  
  return noise((_x + r.x * 4) * factor, (_y + r.y * 4) * factor) * n_range;
}

调试技巧 #

Linux环境下直接用VS Code安装p5.js扩展，运行代码后打开浏览器的开发者控制台就能看到所有报错信息，不用反复在线上环境试错。

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