Fragmentiert HTML5-Video

0
70

Ich habe gesehen, verschiedene Implementierungen des Voronoi-Diagramms. Vielleicht haben Sie schon gesehen, ohne zu wissen, was es war. Es sieht fast so aus wie random Glasmalerei:

Wikipedia:

In der Mathematik wird ein Voronoi-Diagramm wird eine ZERLEGUNG der Ebene in Regionen auf der Grundlage der Entfernung, um Punkte in einer bestimmten Teilmenge der Ebene.

Es ist sogar möglich, erstellen Sie ein Voronoi-Diagramm mit der hand, wie eLVirus88 dokumentiert hat.

Ich wollte, es zu versuchen.

Die Idee

Meine Idee ist es zu hacken, bis ein video in fragmentierten Teile (sogenannte Zellen) und legen Sie Sie in den 3D-Raum auf eine etwas andere z-Achse. Dann, durch bewegen der Maus, Sie würden drehen Sie die ganze Erfahrung, so würden Sie sehen, die Zellen in den verschiedenen tiefen.

Der Code

Gebäude auf der Spitze von Raymond Hill und Larix Kortbeek die JavaScript-Umsetzung, das erste, was ich brauchte, war die Aufteilung der Zellen.

Ich wählen, um das <canvas> – element, und setzen Sie jede der Zellen, die auf verschiedene Leinwände auf eine ungleiche 3D-Ebene durch CSS.

Die Voronoi-Bibliothek kümmert computing alle Websites auf Zellen und das erstellen von Objekten mit Ecken und Kanten für uns mit zu arbeiten.

Zellen Leinwände

Zunächst erstellen wir die Leinwände entsprechend der Anzahl der Voronoi-Zellen. Diese werden dargestellt, um den DOM. Die Leinwände und Ihre jeweiligen Kontexte gespeichert werden, um ein array.

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

canv.id = ” mirror-‘+i;
canv.Breite = canvasWidth;
canv.Höhe = canvasHeight;

// Anhängen an DOM
Dokument.Körper.appendChild(canv);
Dokument.getElementById(‘container-Spiegel”).appendChild(canv);

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

Maskierung

Alle Leinwände sind jetzt eine Kopie von dem video.

Der gewünschte Effekt ist zu zeigen, eine Zelle pro Leinwand. Die Voronoi-Bibliothek bietet uns mit einer compute-Funktion. Bei der Bereitstellung von Standorten mit den Grenzen erhalten wir ein detailliertes Objekt, wo wir alle extrahieren der Zellen Kanten. Diese wird verwendet, um ein schneiden zu jedem Abschnitt mit der globalCompositeOperation.

// Compute
Diagramm = voronoi.compute(Websites, bounds);

// Finde die Zelle
for (i=0;i<Standorte.length;i++) {
if (!gefunden) {
Zelle = Diagramm.Zellen[i];
wenn (sites[j].voronoiId === Zelle.Website.voronoiId) {
gefunden = 1;
}
}
}

// Maske erstellen, um nur die aktuelle Zelle
ctx.globalCompositeOperation = ‘Zieladresse’;
ctx.globalAlpha = 1;

ctx.beginPath();

var halfedges = Zelle.halfedges,
nHalfedges = halfedges.Länge,
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 = Seiten[j].c;
ctx.fill();

Hinzufügen Von Video

Anzeigen des Videos auf der Leinwand dauert nur ein paar Zeilen code. Dies wird ausgeführt auf requestAnimationFrame:

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

Es ist auch möglich, eine video-input-Quelle (wie eine webcam), aber ich wusste nicht wie das Ergebnis, so viel für diese demo. Wenn Sie wissen möchten, wie Sie mithilfe der webcam zu zeichnen auf canvas mit die getUserMedia () – Methode können Sie darüber Lesen Sie hier.

Optimieren video Zeichnung performance direkt ein paar frames zwischen den requestAnimationFrame. Videos für das web sind in der Regel codiert, mit einer frame-rate nicht höher als 30 fps.

Finden Sie den Stift Fragmentiert HTML5-Video – Demo 1 by virgilspruit (@Virgilspruit) auf CodePen.

Fazit

Demos wie diese sind meine Lieblings-Dinge zu tun. Zu sehen, was es da draußen gibt, und das hinzufügen Ihrer eigenen Ebene der Interaktivität. Ich freue mich zu sehen, was andere Menschen tun werden, mit diesem tollen visual-Algorithmus.

Finden Sie den Stift Fragmentiert HTML5-Video – Demo 2 von virgilspruit (@Virgilspruit) auf CodePen.

Finden Sie den Stift Fragmentiert HTML5-Video – Demo-3 von virgilspruit (@Virgilspruit) auf CodePen.

Demos GitHub Repo