如何在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

"视频应该通过切割形状的三角形轮廓可见。">

下面是我从你的代码快速游玩得到的结果。
也许它会在某些方面对你有用(例如:提供了如何进行的新想法)。

代码的逻辑是简单地创建2层。
底层1是video第二层是三角形(画布)) .

其他的想法可能包括使用混合模式，如屏幕或正片叠底:
(例如: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();
}