Блог

Я пытаюсь создать эффекты ‘slitscan’.
Я установил 2 холста. Один справа предназначен для исходного изображения, а другой — для эффекта сканирования.
Когда я попробовал это с текстовой функцией, она работает отлично, однако с изображением функция копирования выдает мне сообщение об ошибке.

Это код 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);
  

Кроме того, если у вас есть идея получше создать мульти-холст или какие-либо предложения по поводу моего кода, пожалуйста, оставьте комментарий.
Спасибо,

В вашем s1 эскизе вы пытаетесь что-то делать с холстом cv2 . Тем не менее, этот холст создается только позже в вашем эскизе.

Чтобы исправить это, просто измените порядок ваших двух эскизов, т. Е. Вызовите a1 = new p5(s1); after a2 = new p5(s2); (не имеет значения, когда вы определяете s1 and s2 , только когда вы их создаете).

Посмотрите, например, этот эскиз редактора p5.