如何在 p5js 中的视频上叠加形状？

Question

在 P5js 中，我想将一个形状叠加到视频中，但它们不共享相同的 dom 元素。有什么办法吗？

Code test here: 视频应该可以通过切割形状的三角形轮廓看到。

代码：

let video;

function preload() {
  video = createVideo("video.mp4");
}


function setup() {
  createCanvas(400, 300);
  background("gray");

  video.size(400,400);
  video.loop();
  
  var w = width * 0.7;
  var h = height * 0.7;

  translate((width/2) - (w/2), (height/2) - (h/2));

  fill("lightgray");
  noStroke();
  beginShape();
    vertex(0, 0);
    vertex(w, 0);
    vertex(w, h);
    vertex(0, h);
    beginContour();
      vertex(w * 0.2, h * 0.4);
      vertex(w * 0.5, h * 0.8);
      vertex(w * 0.8, h * 0.4);
    endContour();
  endShape();

  noLoop();
}

我看到 here 隐藏视频并使用 image（即 image(video, 10, 10)）可以绘制单帧。唉，我使用 noLoop()，在我的情况下，draw() 中的视频不会自动刷新。

Answer 1

"The video should be visible through the triangular contour that cuts the shape."

以下是我使用您的代码快速 play-around 得到的结果。
也许它在某些方面对您有用（例如： 提供了关于如何进行的新想法）。

代码的逻辑是简单地创建 2 层。
底层 1 是 video，顶层 2 是三角形（canvas）。

其他想法可能包括使用像 Screen 或 Multiply 这样的 BlendModes：
示例：canv.blendMode(SCREEN);
其中 SCREEN 使白色透明，MULTIPLY 使黑色透明）。

示例测试代码（制作两层并删除background("gray");）

let video; let canv;

function preload() 
{ video = createVideo("video.mp4"); }

function setup() 
{
  translate(0, 0);
  
  video.size(400,300);
  video.style("z-index: 1"); //# is default in P5.JS
  video.position(0, (width * 0.7) );
  video.loop();
  
  canv = createCanvas(400, 400);
  canv.style("z-index: 2");
  canv.position(0, 0); //# important to have a setting
  
  //# Not needed ....
  //background("gray");
  
  var w = width * 1;
  var h = height * 1;
   
  translate((width/2) - (w/2), (height/2) - (h/2));

  fill("lightgray");
  noStroke();
  
  beginShape();
    vertex(0, 0);
    vertex(w, 0);
    vertex(w, h);
    vertex(0, h);
  
 beginContour();
      vertex(w * 0.2, h * 0.4);
      vertex(w * 0.5, h * 0.8);
      vertex(w * 0.8, h * 0.4);
    endContour();
  endShape();

  noLoop();
}

如何在 p5js 中的视频上叠加形状？

How to overlay a shape on a video in p5js?

javascript

video

shapes

p5.js