Fragmenterad HTML5 Video

0
63

Jag har sett olika implementeringar av Voronoi-Diagram. Du kanske har sett en utan att veta vad det var. Det ser nästan ut som slumpmässiga målat glas:

Wikipedia:

I matematik, ett Voronoi-diagram är en uppdelning av ett plan i regioner baserat på avstånd till punkter i en specifik delmängd av planet.

Det är även möjligt att skapa ett Voronoi-diagram för hand, som eLVirus88 har dokumenterats.

Jag ville ge det ett försök.

Tanken

Min idé är att hacka upp en video i fragmenterade delar (som kallas celler) och sätta dem i 3D-rymden på ett något annorlunda z-axeln. Sedan, genom att flytta musen, du skulle rotera hela upplevelsen så skulle du se att celler i olika djup.

Koden

Byggnad på toppen av Raymond Hill ‘ s och Larix Kortbeek JavaScript-implementering, det första jag behövde var att dela upp celler.

Jag väljer att använda <canvas> – element, och sätter var och en av cellerna på olika duk på ett annorlunda 3D-plan genom CSS.

Den Voronoi-biblioteket tar hand om design och alla de platser till cellerna och skapa objekt med hörn och kanter för oss att arbeta med.

Celler Dukar

Först skapar vi dukar till det antal som motsvarar antalet av Voronoi-celler. Dessa kommer att bli till DOM. Dukarna och deras respektive sammanhang kommer att sparas i en array.

var canv = dokument.createElement(‘canvas”);

canv.id = ‘spegel’+i;
canv.bredd = canvasWidth;
canv.höjd = canvasHeight;

// Lägg till i DOM
dokumentet.organ.appendChild(canv);
dokumentet.getElementById(‘container-speglar’).appendChild(canv);

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

Maskering

Alla dukar är nu en kopia av videon.

Den önskade effekten är att visa en cell per duk. Den Voronoi bibliotek ger oss en beräkna funktionen. När du anger sidor med de gränser vi få en detaljerad objekt där vi extrahera alla celler kanter. Dessa kommer att användas för att skapa en klippa ut varje avsnitt med globalCompositeOperation.

// Beräkna
diagram = voronoi.beräkna(webbplatser, bounds);

// Hitta cell
for (i=0;i<webbplatser.längd;i++) {
if (!hittade) {
cell = diagrammet.celler[i];
om (webbplatser[j].voronoiId === cell.hotellet.voronoiId) {
hittade = 1;
}
}
}

// Skapa en mask för att endast visa den aktuella cellen
ctx.globalCompositeOperation = “destination-i’;
ctx.globalAlpha = 1;

ctx.beginPath();

var halfedges = cell.halfedges,
nHalfedges = halfedges.längd
v = halfedges[0].getStartpoint();

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

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

ctx.fillStyle = platser[j].c;
ctx.fill();

Lägga Till Video

Visa video till duken tar bara ett par rader kod. Detta kommer att utföras på requestAnimationFrame:

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

Det är också möjligt att använda en video ingångar (som en webbkamera), men jag gillade inte resultatet så mycket för denna demo. Om du vill veta hur man använder webbkameran för att dra till canvas med getUserMedia () – metoden kan du läsa om det här.

För att optimera video ritning prestanda hoppa över ett par bilder i mellan requestAnimationFrame. Video för webben är vanligtvis kodas med en bildhastighet som inte är högre än 30 fps.

Se Pennan Fragmenterad HTML5 Video – Demo 1 av virgilspruit (@Virgilspruit) på CodePen.

Slutsats

Demos som denna är min favorit saker att göra. Se vad som är ute och lägga till din egen nivå av interaktivitet. Jag ser fram emot att se vad andra människor kommer att göra med denna fina visuella algoritm.

Se Pennan Fragmenterad HTML5 Video – Demo 2 av virgilspruit (@Virgilspruit) på CodePen.

Se Pennan Fragmenterad HTML5 Video – Demo 3 av virgilspruit (@Virgilspruit) på CodePen.

Visa Demos GitHub Repo