Scratchbook

Das Leben ist immer anders als die Realität.

Javascript meets Blinkenlights

Claude, 25. Juli 2010, 17:47 Uhr

Warning: Use of undefined constant ri_rand_compare - assumed 'ri_rand_compare' (this will throw an Error in a future version of PHP) in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/random-image-widget/random_image.php on line 129 Warning: Use of undefined constant ri_rand_compare - assumed 'ri_rand_compare' (this will throw an Error in a future version of PHP) in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/random-image-widget/random_image.php on line 130 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700 Warning: Invalid argument supplied for foreach() in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700 Warning: Invalid argument supplied for foreach() in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Kleines Projekt, entstanden an ein paar verregneten Nachmittagen:

Blinkentube – das ist Blinkenlights im Browser!

Blinkenlights erblickte 2001 die Lichter der Welt. Ein Hochhaus mit 8 Stockwerken und 18 Fensterreihen – platziert man hinter jedes Fenster einen Scheinwerfer, ergibt das ein Display mit 18×8 Pixeln.
Jeder konnte mit Blinkenpaint seine eigenen Blinkenlights-Movies erstellen und auf dem Gebäude abspielen lassen.

Es gab zahlreiche Folgeprojekte und Nachbauten. Blinkenlights mit LEDs, Simulatoren, räumliche Blinkenlights, Wände, Uhren, C64 Lights und viele mehr.
Ein Nachbau fehlte mir aber auf dieser Liste: Blinkenlights im Browser.

Ich habe mit Blinkenpaint herumgespielt, und es fiel mir auf, dass die CPU-Auslastung konstant auf 100% war. Und die Animationen spielten sich eher etwas langsamer ab. Auch das Laden eines Blinkenmovies (eine XML-Datei) kann schon mal 2 Sekunden dauern…
Ich habe mich gefragt: Ist es wirklich so rechenaufwändig, ein paar Lichter an- und auszuschalten? Geht das auch in meinem Browser?

Und ob!
Nach einem Abend habe ich die Lichter (ok, „1“ und „0“ in einer HTML-Tabelle) zufallsmässig an- und ausgeschaltet. Läuft prima.
Hmm… Ich muss ja das Rad nicht neu erfinden. Warum nicht gleich Blinkenmovies laden und abspielen? Ob das Parsen von 3000 Zeilen XML wohl genug schnell geht?

Und ob!
Am nächsten Abend spielt ein Blinkenmovie in meinem Browser. Das Parsen geht *zagg* *bumm* – sofort da. Wonderful.

Aber die HTML-Tabelle ist hässlich. Wenn schon, dann jetzt mit den Originalbildern der leuchtenden Fenster.

Tabellenlos. Und es läuft immer noch tipptopp in Echtzeit und ohne gröbere CPU-Belastung…
Und – das hat mir dann die Schuhe ausgezogen – selbst im IE6! 😛

Und als kleines Goodie vom verregneten Samstagnachmittag: Man kann seine eigenen mit Blinkenpaint erstellten Movies hochladen.

Blinkenpaint: http://blinkenlights.net/blinkenlights/blinkenpaint

Namics Blinkenmovie: http://scratchbook.ch/blinkentube/#namics

Filme, die ich im Netz gefunden habe:
http://scratchbook.ch/blinkentube/#changing-figures
http://scratchbook.ch/blinkentube/#ampel
http://scratchbook.ch/blinkentube/#the-game
http://scratchbook.ch/blinkentube/#bit-laden
http://scratchbook.ch/blinkentube/#column-shooting
http://scratchbook.ch/blinkentube/#le-chat-noir
http://scratchbook.ch/blinkentube/#g
http://scratchbook.ch/blinkentube/#der-wasserhahn
http://scratchbook.ch/blinkentube/#james-blond
http://scratchbook.ch/blinkentube/#labyrinth
http://scratchbook.ch/blinkentube/#tetris
http://scratchbook.ch/blinkentube/#the-fly
http://scratchbook.ch/blinkentube/#thunderstorm
http://scratchbook.ch/blinkentube/#winter-in-the-city
http://scratchbook.ch/blinkentube/#worm
http://scratchbook.ch/blinkentube/#x-ball

Daniel

De Chaos Computer Club isch halt scho kreativ! 🙂
Echt cools Projekt. S Letschd mol isch mir Blinkenlights in Sinn cho wo du de Post über di Beamerexpermiment mit diner Nochbarschaft gschribe hesch…

Warning: count(): Parameter must be an array or an object that implements Countable in /home/httpd/vhosts/scratchbook.ch/httpdocs/wp-content/themes/scratchbook/navigation_bar_bottom.php on line 1