Thresholding Crossfader

Mit dem Thresholding Crossfader könnt ihr Bilder ineinander überblenden. Bis hierher nicht wirklich spannend. Aber die Art und Weise der Überblendung ist mal etwas Anderes. Per Thresholding, bzw. per Schwellenwertverfahren lässt sich ein interessanter Effekt erziehlen, den ich so und in dieser Form, mit Hilfe der Canvas und etwas JavaScript umgesetzt, noch nicht oft gesehen habe. Das Schwellenwertverfahren ist ein extrem simpler Algorithmus zur Segmentierung von Bildern. In diesem Fall wird Schritt für Schritt (von 0 bis 255) und mit Hilfe der Helligkeit einzelner Pixel eine Segmentierung des Bildes vorgenommen. Bei jedem einzelnen Schritt werden die Pixel ausgewählt, die eine bestimmte Helligkeit haben. Diese so ausgewählten Pixel werden dann durch die des neuen Bildes ersetzt. Bei allen 255 Schritten wird eine Variable von 255 auf 0 runter gezählt. Diese Variable dient dann zum abgleichen. Bei jedem einzelnen Pixel wird geschaut, ob dieses eine geringere Helligkeit hat als der Wert der in der Variablen gespeichert ist.

Aber schaut einfach selbst. Klickt einfach auf Start unten und danach so oft ihr wollt. Auf diese Weise könnt ihr euch durch die kleine Gallerie an Matropolis Bildern klicken. Mit Hilfe der Controls könnt ihr die Geschwindigkeit bestimmen mit der die Bilder ineinander übergeblendet werden.

 
Wenn ihr Interesse an den Sources habt. Kein Problem! Hier geht es zu einer nicht minifizierten Seite bei der ihr euch den Quellcode anschauen könnt. Ich hab den Code nicht wirklich aufgeräumt, oder besonders schön gescriptet, aber wie der Effekt funktioniert sollte so trotzdem schnell klar werden. Hier die entscheidene Function:

/*
param value = 0 - 255
*/
function crossfade( value ) {

 for ( var i = 0, l = pix.length; i < l; i += 4 ) {

        var r = sourcePix[ i ];
        var g = sourcePix[ i + 1 ];
        var b = sourcePix[ i + 2 ]; 

        if ( ( r + g + b ) / 3 >= value ) {

            pix[ i ]     = r;
            pix[ i + 1 ] = g;
            pix[ i + 2 ] = b;
            pix[ i + 3 ] = 255;

        }

    }

}

Vielleicht werde ich die Tage noch ein kleines jQuery-Plugin dazu schreiben.
Bis dahin wünsche ich viel Spaß beim Bilder überblenden.