Как наложить фигуру на видео в p5js?
В P5js я хочу наложить форму на видео, но они не имеют одного и того же дома. Есть ли способ сделать это?
Тест кода здесь: Видео должно быть видно сквозь треугольный контур, пересекающий фигуру.
Код:
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().
@ggorlen, извините, моя ошибка, я пропустил слово: «у них не один и тот же дом ЭЛЕМЕНТ». Они появляются в разных элементах dom.
Спасибо. Возможно, вы захотите поставить редактировать сообщение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
"The video should be visible through the triangular contour that cuts the shape."
Ниже приведен результат, который я получил в результате быстрой игры с вашим кодом.
Возможно, это будет вам чем-то полезно (например: дает новые идеи, как действовать дальше).
Логика кода состоит в том, чтобы просто создать 2 слоя.
Нижний слой 1 — это видео, а верхний слой 2 — треугольник (холст).
Другие идеи включают, возможно, использование режимов смешивания, таких как Screen или Multiply:
пример: 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();
}
«они не используют один и тот же дом» — я не понимаю. В этом скетче кажется, что все находится в одном и том же доме. Можете ли вы уточнить?