Tutorial: Video-Wiedergabe in P5.js

Heute habe ich das hier angekündigte Versprechen wahrgemacht und erste Experimente mit Videos und P5.js, dem JavaScript-Mode von Processing durchgeführt. Als Material diente ein siebzehn Sekunden langes Video von mir, das die Berliner S-Bahn in Neukölln zeigt (ja, manches Mal bin ich ein fanatischer Puffer-Küsser). 🤓 Um meine Leitung nicht zu sehr zu belasten, habe ich es nach MP4 konvertiert und auf 1,4 MB heruntergerechnet.

Trotzdem kann es schon einige Zeit dauern, bis Ihr etwas auf dieser Seite seht (wenn es Euch zu lange dauert, fahrt mal mit der Maus über die weiße Fläche, vielleicht ist der Sketch ja auch schon lange geladen und wird als weiße Fläche angezeigt). Und ich wollte natürlich nicht nur P5.js als Abspielkonsole mißbrauchen, sondern ich wollte zeigen, daß fast alle (Processing-) Bild-Filter auch mit Videos funktionieren. Aber erst einmal den Sketch:

let movie;
let bg;

function preload() {
        movie = createVideo("assets/sbahn.mp4");
        movie.hide();
        bg = loadImage("images/background.jpg");
}

function setup() {
        canvas = createCanvas(480, 360);
        canvas.parent("myCanvas");
}

function mousePressed() {
        movie.loop();
}

function draw() {
        background(bg);
        let v = mouseX/width;
        image(movie, 0, 0);
        filter(THRESHOLD, v);
}

Die Video-Befehle sind Teile der DOM-Bibliothek, also muß auch diese in die Seite eingebunden werden:

<script src="javascripts/p5.min.js" type="text/javascript" ></script>
<script src="javascripts/p5.dom.min.js" type="text/javascript" ></script>
<script src="javascripts/video1.js" type="text/javascript" ></script>

Die Funktion preload() lädt nicht nur das Video, sondern auch das Hintergrundbild (das einfach ein Screenshot des ersten Bildes des Videos ist). So verhindere ich, daß das Script versucht, das Video zu starten, bevor es überhaupt geladen wurde.

An der Stelle, wo das Script ausgeführt werden soll, habe ich ein div angelegt:

<div id="myCanvas"></div>

Daher mußte ich in setup() dieses div auch noch dem canvas zuweisen:

function setup() {
        canvas = createCanvas(480, 360);
        canvas.parent("myCanvas");
}

Der THRESHOLD-Filter macht das Bild schwarz-Weiß und benötigt einen Wert zwischen 0 und 1. Bei 0 wird das Bild ganz weiß, bei 1 ersäuft es in sattem schwarz. Daher habe ich mit

        let v = mouseX/width;

der horizontalen Mausbewegung einen Wert zwischen 0 und 1 erzeugen lassen. Ist die Maus weit links, tendiert der Wert nach 0, ist die Maus weit rechts, geht ergegen 1. Die interessanten Werte liegen – wie so oft – in der Mitte.

DerTHRESHOLD-Filter wirkt natürlich nicht nur auf das Video, sondern auch auf das Hintergrundbild. Das ist der Grund, warum Ihr bei ungünstiger Maus-Position nichts seht, obwohl der Sketch schon lange geladen ist.

Ach ja, bevor Ihr verzweifelt: Das Video wird mit einem Mausklick gestartet. Dazu dient diese Funktion:

function mousePressed() {
	movie.loop();
}

Das ist alles noch nichts weltbewegendes und es ist sicher nicht klug, so einen ganzen Spielfilm durch das Netz zu jagen. Aber das Verfremden kleiner Schnipsel, wie die 17 Sekunden in diesem Fall, kann ja auch Spaß machen. Und vielleicht fällt Euch ja noch etwas ein, was Ihr mit P5.js und Videos anstellen könnt. Ich denke auch noch nach. Still digging!

(Kommentieren)