Gefragmenteerde HTML5 Video

0
15

Ik heb gezien dat verschillende implementaties van het Voronoi-Diagram. Misschien heb je gezien zonder te weten wat het was. Het lijkt bijna alsof willekeurige glas in lood:

Wikipedia:

In de wiskunde, een Voronoi-diagram is een partitionering van een vliegtuig in de regio ‘ s op basis van de afstand van de punten in een specifieke subset van het vliegtuig.

Het is zelfs mogelijk om een Voronoi-diagram met de hand, zoals eLVirus88 heeft gedocumenteerd.

Ik wilde het een kans geven.

Het Idee

Mijn idee is om te hakken van een video in gefragmenteerde delen (cellen genoemd) en leg ze in een 3D-ruimte op een iets andere z-as. Dan, door het bewegen van de muis, je zou het draaien van de hele ervaring, zodat u zou zien van de cellen in de verschillende dieptes.

De Code

Gebouw op de top van Raymond Hill ‘ s en Larix Kortbeek JavaScript implementatie, het eerste wat ik nodig had om de opsplitsing van de cellen.

Ik kies voor het gebruik van het <canvas> element, en elk van de cellen op verschillende canvas op een meerdere 3D-vlak door middel van CSS.

De Voronoi bibliotheek verzorgt computing alle sites cellen en het maken van objecten met de hoeken en randen voor ons om te werken met.

Cellen op te Doeken

Eerst maken we de doeken overeenkomen met het aantal van de Voronoi-cellen. Deze zal worden verleend aan de DOM. De doeken en hun respectievelijke context zal worden opgeslagen in een array.

var canv = document.createElement(‘canvas’);

canv.id = ‘spiegel-‘+i;
canv.breedte = canvasWidth;
canv.height = canvasHeight;

// Append te DOM
document.lichaam.appendChild(canv);
document.getElementById(‘container-spiegels’).appendChild(canv);

// Push to-array
canvasArray.push(canv);
contextArray.push(canv.getContext(‘2d’));

Maskeren

Alle doeken zijn nu een kopie van de video.

Het gewenste effect is aan te tonen met één cel per doek. De Voronoi-bibliotheek geeft ons met het berekenen van een functie. Bij het verstrekken van de sites met de grenzen krijgen we een gedetailleerd object waar we het uitpakken van alle cellen randen. Deze worden gebruikt voor het maken van een knip van elk hoofdstuk met behulp van de globalCompositeOperation.

// Bereken
diagram = voronoi.berekenen(sites, bounds);

// Vind cel
for (i=0;i<sites.lengte;i++) {
if (!gevonden) {
cel = schema.cellen[i];
als (sites[j].voronoiId === cel.de site.voronoiId) {
gevonden = 1;
}
}
}

// Maak een masker om de huidige cel
ctx.globalCompositeOperation = ‘doel-in’;
ctx.globalAlpha = 1;

ctx.beginPath();

var halfedges = cel.halfedges,
nHalfedges = halfedges.lengte,
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 = sites[j].c;
ctx.vul();

Toevoegen Video

Het weergeven van video op het doek duurt slechts een paar regels code. Dit zal worden uitgevoerd op requestAnimationFrame:

v = document.getElementById(‘video’);
ctx.drawImage(v,0,0,960,540);

Het is ook mogelijk gebruik te maken van een video-ingangsbron (zoals een webcam), maar ik vond het niet leuk resultaat zo veel voor deze demo. Als u wilt weten hoe u de webcam te tekenen op het canvas met de getUserMedia() methode kunt u meer lezen over het hier.

Optimaliseren van video tekening prestaties van het overslaan van een paar frames tussen de requestAnimationFrame. Video ‘ s voor het web zijn meestal gecodeerd met een frame rate van niet meer dan 30 fps.

Zie de Pen Gefragmenteerd HTML5 Video – Demo 1 door virgilspruit (@Virgilspruit) op CodePen.

Conclusie

Demo ‘ s als deze zijn mijn favoriete dingen om te doen. Het zien van wat er allemaal is en het toevoegen van uw eigen laag van interactiviteit. Ik ben benieuwd naar wat andere mensen doen met dit mooie visuele algoritme.

Zie de Pen Gefragmenteerd HTML5 Video – Demo 2 door virgilspruit (@Virgilspruit) op CodePen.

Zie de Pen Gefragmenteerd HTML5 Video – Demo 3 door virgilspruit (@Virgilspruit) op CodePen.

Bekijk De Demo ‘ S GitHub Repo