如何在p5js中的视频上覆盖形状？

Question

在P5js中，我希望将形状覆盖到视频中，但它们不共享相同的dom元素。有什么办法吗？

代码测试：视频应该通过切割形状的三角形轮廓来显示。

守则：

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();
}

我看到这里隐藏视频并使用image (即image(video, 10, 10))绘制单个帧是可能的。唉，我使用noLoop()，在我的例子中，在draw()中不会自动刷新视频。

Answer 1

“视频应该通过切割形状的三角形轮廓来显示。”

下面是我从你的代码的快速循环中得到的一个结果。

也许它会在某种程度上对你有用(例如:给出关于如何进行的新想法)。

代码的逻辑是简单地创建两个层。

底层1是视频，顶层2是三角形(画布)。

其他的想法包括可能使用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();
}