En P5js, quiero superponer una forma a un video, pero no comparten el mismo elemento dom. ¿Hay alguna forma de hacerlo?
Prueba de código aquí : el video debe ser visible a través del contorno triangular que corta la forma.
El código:
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(); } Veo aquí que al ocultar el video y usar la image (es decir image(video, 10, 10) ) es posible dibujar un solo cuadro. Por desgracia, uso noLoop() y, en mi caso, no habría una actualización automática del video en draw() .
"El video debe ser visible a través del contorno triangular que corta la forma".
A continuación se muestra un resultado que obtuve de un juego rápido con su código.
Tal vez le sea útil de alguna manera ( por ejemplo: da nuevas ideas sobre cómo proceder).
La lógica del código es simplemente crear 2 capas.
La capa inferior 1 es un video y la capa superior 2 es un triángulo (el lienzo ).
Otras ideas incluyen tal vez usar BlendModes como Screen o Multiply:
ejemplo: canv.blendMode(SCREEN);
Donde SCREEN hace que los blancos sean transparentes y MULTIPLY hace que los negros sean transparentes).
El código de prueba de ejemplo (hace dos capas y también elimina 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(); }