复制功能无法识别 p5js 中另一个 canvas 上的图像

Question

我正在尝试制作 'slitscan' 效果。
我设置了 2 canvases。右边一张是源图，一张是扫描效果。
当我用文本功能尝试它时它完美地工作，但是对于图像，复制功能给了我一条错误消息。

这是我写的p5代码

let a1, a2;
let cv1, cv2;
let dy = 0;

let s1 = function(p) {
  p.setup = () => {
    cv1 = p.createCanvas(300, 300);
    p.background(150);
    cv1.position(0, 0);
  }

  p.draw = () => {
    p.copy(cv2, 0, dy, 400, 1, 0, dy, 400, 1);
    
    if (dy > cv2.height) {
      dy = 0;
    } else {
      dy += 1;
    } 
  }
}
a1 = new p5(s1);

let s2 = function(p) {
  let img;

  p.preload = () => {
    img = p.loadImage('https://pbs.twimg.com/profile_images/635910989498724356/uY4bc8q2.jpg');
  }

  p.setup = () => {
    cv2 = p.createCanvas(300, 300);
    cv2.position(300, 0);
  }

  p.draw = () => {
    p.background(30);
    p.imageMode(p.CENTER);
    p.image(img, p.mouseX, p.mouseY);
  }
}
a2 = new p5(s2);

另外，如果大家有更好的multi-canvas想法或者对我的代码有什么建议，欢迎大家留言。谢谢，

Answer 1

在您的 s1 草图中，您尝试使用 canvas cv2 进行操作。然而这个 canvas 只是稍后在您的草图中创建的。

要修复它，只需更改两个草图的顺序，即在 a2 = new p5(s2); 之后调用 a1 = new p5(s1);（定义 s1 和 [=15 无关紧要） =]，只有当你实例化它们时）。

例如，请参阅此 p5 编辑器 sketch。

复制功能无法识别 p5js 中另一个 canvas 上的图像

copy function does not recognize image on another canvas in p5js

javascript

processing

p5.js