Typotisch – 1 from David L on Vimeo.

Dieses Projekt wurde im Rahmen des Praktikums “Aesthetic Computing” geplant und umgesetzt von Nora von Egloffstein und mir. Nachfolgend mehr Informationen (siehe auch hier).

Der Typotisch ist eine weiße Box, etwa so hoch wie eine Arbeitsplatte. Die Oberseite besteht aus einer Milchglasscheibe, auf die der Benutzer Wortplättchen legen kann. Auf einer großen Leinwand oder einem Bildschirm wird dann eine Animation der gelegten Worte gezeigt, wie wenn die Milchglasscheibe mit einer Kamera abgefahren würden. Je nachdem in welchem Winkel die Wortplättchen zueinander liegen, macht die Kamera eine entsprechende Drehung, auf 90° gerundet. Manche Wörter haben in der Animation einen fest zugeordneten Effekt. Der Typotisch soll eine Verknüpfung von Kinetischer Typographie und einer besonderen Interaktionsmöglichkeit sein.

Material

Die Box ist aus 12mm dicken MDF-Platten gebaut. Oben ist ein 30cm*30cm große Aussparung für die Milchglassplatte die dann auf Ausfräsungen am Rand der Aussparung gelegt werden kann. Im Inneren der Box sind zwei Bretter angebracht.

Die Wortplättchen sind aus Magnetgummi. Auf der vorderen Seite eines solchen Plättchens steht das Wort geschrieben und auf der Rückseite ist das Wort als QR-Code dargestellt.

So funktioniert´s

Auf dem oberen inneren Brett wird eine Digitalkamera, bei uns eine Canon Powershot A620, mit Objektiv nach oben, angebracht. Auf dem unteren Brett steht ein mit der Kamera verbundener Laptop. Durch die Fernsteuerungssoftware von Canon wird alle zehn Sekunden ein Foto von der Milchglasscheibe gemacht und in einen Ordner abgelegt. Dieser Ordner ist für den zweiten Laptop im lokalen Netzwerk freigegeben. Die Software die auf diesem Laptop läuft, greift auf die Fotos zu und generiert die Animation.

Software & Libraries

Die Analyse des Fotos wurde mit Processing (1) realisiert. Das Foto wird gelesen, potentielle Plättchen erkannt, dank einer Bibliothek für OpenCV für Processing (2) Dann wird deren Lage bestimmt und ihre Drehung auf 0°, 90°, 180° oder 270° gerundet. Anschließend wird die Reihenfolge der Plättchen ausgelesen, angefangen an der linken oberen Ecke der Milchglasscheibe. Dabei werden auch die QR-Codes (3) dekodiert.

1. http://processing.org
2. http://ubaa.net/shared/processing/opencv/
3. http://qrcode.sourceforge.jp/

$(".page_item ul").hide(); 
$(".current_page_item").parents("ul").show(); 
$(".current_page_item ul:first").slideDown();

Dies ist meine Version des Code-Schnipsels und tut eigentlich genau das was ich wollte (und animiert nur, wenn man ein Menüpunkt mit Unterpunkten angeklickt hat). Aber da ja sowieso schon die gesamte Navigation vorhanden ist (nur nicht sichtbar), könnte man ja auch den Rest ausklappbar machen …

$(".page_item > ul:hidden").before( '<a href="#" class="menuToggle menuToggleOpen">v</a>');
$(".page_item > ul:visible").before('<a href="#" class="menuToggle menuToggleClose">^</a>');
a = function(){
    $(this).text("^").next("ul").slideDown();
};
b = function(){
    $(this).text("v").next("ul").slideUp();
};
$(".menuToggleClose").toggle(b,a);
$(".menuToggleOpen").toggle(a,b);

Hab dazu auch mal ein kleines Demo hier aufgesetzt.

Einziges Problem ist natürlich mal wieder der Internet Explorer 6, der SlideDown/-Up nicht sonderlich schön darstellt. Aber es ist benutzbar. Je nach erwarteter IE6-Dichte könnte man einen Switch einbauen, der dann im IE 6 die Animation nicht anzeigt (und nur show()/hide() nutzt).

Originalartikel: WordPress Navigation & jQuery