Fragmentert HTML5-Video

0
103

Jeg har sett ulike implementeringer av Voronoi Diagram. Du har kanskje sett en uten å vite hva det var. Det ser nesten ut som tilfeldig farget glass:

Wikipedia:

I matematikk, et Voronoi-diagram er en oppdeling av et fly inn i regioner basert på avstand til poeng i en bestemt undergruppe av flyet.

Det er også mulig å opprette et Voronoi-diagram for hånd, som eLVirus88 har dokumentert.

Jeg ønsket å gi den en prøve.

Ideen

Min idé er å hogge opp en video i fragmenterte deler (som kalles celler) og sette dem inn i 3D-rommet på en litt annen z-aksen. Deretter, ved å flytte musen, vil du rotere hele opplevelsen så ville du se celler i forskjellige dybder.

Kode

Bygningen på toppen av Raymond Hill ‘s og Larix Kortbeek’ s JavaScript implementering, er det første jeg trengte var å splitte opp celler.

Jeg velger å bruke <lerret> – element, og sette hver av cellene på ulike lerret på en differnet 3D fly gjennom CSS.

Den Voronoi-biblioteket tar vare på computing alle stedene på celler og lage objekter med hjørner og kanter for oss å jobbe med.

Celler Lerreter

Først oppretter vi lerretene å matche antallet Voronoi-celler. Disse vil bli gjort til DOM. Lerretene og deres respektive sammenhenger vil bli lagret i en matrise.

var canv = – dokument.createElement(‘lerret’);

canv.id = ‘speil-‘+i;
canv.bredde = canvasWidth;
canv.høyde = canvasHeight;

// Legg til DOM
dokumentet.kroppen.appendChild(canv);
dokumentet.bürgerliches(‘container-mirrors’).appendChild(canv);

// Presse til array
canvasArray.trykk(canv);
contextArray.trykk(canv.getContext(‘2d’));

Maskering

Alle lerretene er nå en kopi av videoen.

Den ønskede effekten er å vise en celle per lerret. Den Voronoi-biblioteket gir oss en beregne funksjon. Når gi nettsteder med grensene vi få en detaljert objekt hvor vi trekke ut alle cellene kantene. Disse vil bli brukt til å skape et kutt ut til hver seksjon med globalCompositeOperation.

// Compute
diagram = voronoi.beregn(nettsteder, grense);

// Finn celle
for (i=0;i<nettsteder.lengde;i++) {
if (!funnet) {
mobil = diagrammet.celler[i];
hvis (nettsteder som[j].voronoiId === celle.stedet.voronoiId) {
funnet = 1;
}
}
}

// Lag maske for å bare vise den gjeldende cellen
ctx.globalCompositeOperation = “destinasjon”;
ctx.globalAlpha = 1;

ctx.beginPath();

var halfedges = celle.halfedges,
nHalfedges = halfedges.lengde
v = halfedges[0].getStartpoint();

ctx.moveTo(v. x,v. y);

for (var iHalfedge=0; iHalfedge<nHalfedges; iHalfedge++) {
v = halfedges[iHalfedge].getEndpoint();
ctx.lineTo(v. x,v. y);
}

ctx.fillStyle = nettsteder[j].c;
ctx.fyll();

Å Legge Til Video

Vise video til lerretet tar bare et par linjer med kode. Dette vil bli utført på requestAnimationFrame:

v = – dokument.bürgerliches (“video”);
ctx.drawImage(v,0,0,960,540);

Det er også mulig å bruke en video input-kilde (som et webkamera), men jeg likte ikke resultatet så mye for denne demoen. Hvis du ønsker å vite hvordan du skal bruke webkameraet til å trekke til lerretet ved hjelp av getUserMedia () – metoden kan du lese om det her.

For å optimalisere video tegning ytelse hoppe over et par bilder i mellom requestAnimationFrame. Videoer for web er vanligvis kodet med en bildefrekvens ikke er høyere enn 30 fps.

Se Penn Fragmentert HTML5-Video – Demo 1 av virgilspruit (@Virgilspruit) på CodePen.

Konklusjon

Demoer som dette er min favoritt ting å gjøre. Se hva som er der ute og legge til ditt eget lag av interaktivitet til det. Jeg gleder meg til å se hva andre mennesker vil gjøre med dette fine visuelle algoritme.

Se Penn Fragmentert HTML5-Video – Demo 2 av virgilspruit (@Virgilspruit) på CodePen.

Se Penn Fragmentert HTML5-Video – Demo 3 av virgilspruit (@Virgilspruit) på CodePen.

Se Demoer GitHub Repo