Finn Rudolph

ImageFlow 0.6 online - Documentation in progress

ImageFlow, JavaScript, PHP von Finn Rudolph

For ImageFlow caused a international feedback - see the Google Analytics map below - this newsblog entry is in English. But beware: As I'm not a native English speaker there may be some language mistakes ;D



This new version of ImageFlow features a browsercompatible arrow key support and some usability improvements concerning the mouse wheel use and the embedding of the imageflow div container. ImageFlow now just interacts on mouse wheel events if the cursor is over the main div container "imageflow". This enables the user to scroll a long website and to navigate through the images with his mouse wheel.



I currently write on a documentation of ImageFlow, which covers FAQ and some other stuff, that might be of interest. The English translation of it is in progress...

Structure Synth

3D, Interest von Finn Rudolph

"Structure Synth is an application for creating 3D structures from a set of user specified rules. It is an attempt to make a 3D version of Context Free."

Obwohl Structure Synth derzeit noch eine Alpha ist, macht es schon einen sehr überzeugenden Eindruck. Laut Blog wird es in der nächsten Version auch POV-Ray support geben. Zum Ausprobieren habe ich mal Syntopias Binary Kite gerendert...

ImageFlow 0.5 online

ImageFlow, JavaScript, PHP von Finn Rudolph

Nach einigen Benchmarks zur JavaScript Performance von aktuellen Browsern und vor allem nach einigen Performance Tests mit Opera hat sich die Render Engine der Browser als Flaschenhals herausgestellt. Alle Browser versuchen die Qualität der in den Abmessungen geänderten Bilder durch Interpolation zu verbessern. Diese Filter sind ziemlich rechenintensiv und je nachdem wie stark sie auf die Bilder angewandt werden (oder wie gut diese Filter programmiert sind) senkt es die Leistung von ImageFlow.



Um diesen Effekt in Grenzen zu halten, aber trotzdem viele Bilder (>100) mit ImageFlow darstellen zu können habe ich eine Fokus Funktion implementiert. Es werden nur die Bilder dargestellt - und somit vom Browser optimiert -, welche im Fokus des Betrachters liegen. Damit das bei vielen Bildern nicht unübersichtlich wird und vor allem noch benutzerfreundlich bleibt, gibt es dazu einen Scrollbalken.

Toast Messenger - Honey I left it on the toast

Design, Interest von Finn Rudolph

"This toaster by Sasha Tseng incorporates a little message board where one can read quick notes. The message also gets "toasted" into the toast itself so it gives new meaning to "read while you eat". - Yanko Desing

Larry Lessig - How creativity is being strangled by the law

TED, Interest, Web von Finn Rudolph

"The Net´s most adored lawyer brings together John Philip Sousa, celestial copyrights, and the "ASCAP cartel" to build a case for creative freedom. He pins down the key shortcomings of our dusty, pre-digital intellectual property laws, and reveals how bad laws beget bad code. Then, in an homage to cutting-edge artistry, he throws in some of the most hilarious remixes you´ve ever seen." - TED Talks

ImageFlow 0.4 online - Performance Benchmarking

ImageFlow, JavaScript, PHP von Finn Rudolph

Die vierte Version von ImageFlow ist mit zwei neuen Features online. Das Mausrad kann jetzt zum durchblättern benutzt werden. Und während die Bilder vom Browser geladen werden sieht der Benutzer einen Ladebalken. Die Funktionen von ImageFlow im Überblick:

• Unterstützt alle Bild-Seitenverhältnisse
• Dynamische Spiegelreflexionen (serverseitig via PHP)
• 100% JavaScript (bis auf die Reflexion)
• Mausrad Unterstützung
• Ladebalken
• Bildunterschrift
• Skaliert 100% dynamisch
• Einbindung durch div Tags
• Kompatibel mit allen aktuellen Browsern

Seit der ersten Version, welche auf dem Code von Michael Perrys Cover Flow in Javascript aufbaute, habe ich versucht die Performance von ImageFlow zu optimieren. Version 0.4 scheint in dieser Hinsicht das Optimum zu sein. Die Versionsschritte kann man unter Refactor :my => code nachvollziehen.

Leider gibt es immer noch starke Performanceschwankungen zwischen den unterschiedlichen Browsern. Um das messbar zu machen, habe ich ein 10 Sekunden Benchmark für ImageFlow programmiert: http://benchimageflow.finnrudolph.de


Das Benchmark ermittelt die durchschnittliche Geschwindigkeit, mit der ein Browser die zentrale Schleife in ImageFlow durchläuft. Je schneller die Berechnung, desto flüssiger sollte die Animation sein. Unter Windows habe ich damit folgende Ergebnisse erzielt:
Benchmarkergebnisse in ms für 10 Bilder (weniger ist besser)

Schon bei einem Benchmark mit 10 Bildern stellt man fest, dass die JavaScript Performance von Opera weit hinter der von anderen aktuellen Browsern liegt. Da ImageFlow aber auch mit sehr vielen Bildern funktionieren soll, habe ich die Browser mit einem 100 Bilder Benchmark getestet:
Benchmarkergebnisse in ms für 100 Bilder (weniger ist besser)

Was sich in dem kleinen Benchmark schon abgezeichnet hat nimmt hier erstaunliche Ausmaße an. Während alle Browser erwartungsgemäß so um den Faktor 20 herum langsamer geworden sind bricht die Leistung von Opera um den Faktor 77 ein. Mit anderen Worten Opera ist 24 mal langsamer als der schnellste Browser im Benchmark!

ImageFlow 0.3 online

ImageFlow, JavaScript, PHP von Finn Rudolph

ImageFlow hat jetzt serverseitig generierte Reflexionen. Dazu habe ich ein wenig Richard Daveys Easy Reflections v2 manipuliert. Die Bilder werden jetzt dynamisch auf dem Server via PHP mit einer Spiegelreflexion versehen. Wer ImageFlow in seine Seite einbinden will kann sich jetzt auch bequem den ganzen Quelltext herunterladen.