Allgemein (General)

• RT When buildings start to tweet: Good overview of recent media architecture examples (Via @strg_n, @Heuserkampf)
• Kurzes schönes Videoportrait über Julis von Bismarck
• Starting to upload FOTB2010 videos: Brendan Dawes - more going up regularly. (via @FOTB)
• Great Master thesis by Tim Devine about Device Shifting and #Design #mobile
• Sabine is talking about Functional Aesthetics book in TEDx Vienna
• Maybe an interesting book: Web Aesthetics - How Digital Media Affect Culture and Society
• #Arte präsentiert ein Netzwerk für Künstler, Kulturproduzenten und alle anderen
• Moving talk by Jonathan Harris on his work and the absurdities of digital livestyle
• Mendeley is a free reference manager and academic social network via Henning Schulze
• Die Qual der Wiki-Wahl - #Wikis für #Wissensmanagement in Organisationen  #dokumentation #vergleich
• Nice articles about #urban based #computing & #design No. 1 | No. 2 | No. 3
• The Museum of Lost Interactions - very interesting and nice videos, too #media #archeology #art #design
• RT open culture http://bit.ly/9qQrQD 340 free movies.
• Sounds interesting: Kickstarter is a funding platform for creative projects

Generative Art:

• More new great #generative #art tutorials from Nicolas Barradeau #flash #design
• RT Fantastic geometry blog. http://moniker.name/worldmaking/
• Neuer Monat, neuer Live-Mitschnitt. Mario Klingemann aka Quasimondo über "Schönes aus Code"

Info Design and Visualization

• Nice resource for #information visualization projects: #Crime Maps of England (London) #infovis #data #webservice
• Free-for-any-use ArcGIS Online map services: basemaps, demographic, reference, and specialty maps. 
• RT Vis JavaScript-toolkit by @mbostock: Data-Driven Documents / D3 (via @moritz_stefaner, @peterpaulrubens).

UX and Interaction Design:

• RT Nice collection about small screen solutions: (via @minstyle)
• RT The Psychology of Web Performance:  (via @uxzentrisch)
• RT loads.in - test how fast a webpage loads in a real browser from over 50 locations worldwide: (via @janchriste)
• Nice read: The ABC of behaviour #interaction #design #ux #article #read
• Android UX Patterns via @richardleggett #interaction #interface #design
• KinectTouch: turns any surface into a #TUIO touchpad using #kinect
• rule based language for describing #multitouch #gestures by Lode Hoste

Projekte und Experimente (Projects and experiments)

• Very cool body mapping #kinecthacks via @chrisoshea
• Interesting effect: Kinect Cloth Simulations #processing
• Newstweek: a device to manipulate news read by other people on wireless hotspots (cafes, libraries, airports)
• Really nice project: Esper Domino #senseware
• Nice Space Motion Design by Sebastian Neitsch
• Amazing work of Ryota Kuwakubo's - the installation The Tenth Sentiment
• Wow Legoplatformer looks so nice for some experimental prototypings... #interaction #tangible #ar

Neue Technologie (new Technologies)

• some nice thoughts on Face Tracking & Face Recognition in AR #ar #tracking
• Biometric systems are developed for the detection of faces and gestures

Programmierung und Software Design (Programming)

• RT EaselJS v0.2 is released! Focus for this release: making vector shapes & text on HTML5 canvas easier
• RT @blogblog: #ParticleSDK, a #crossplaform SDK to develop native #mobile apps from one codebase
• RT Let's take a look: Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques …
• Less Framework 4 is now out
• RT Oh lovely: CSS Easing Animation Tool by @matthewlein (via @@mrdoob)
• RT Hand detection with Blobscanner in Processing
• Nice tutorial how to work with #java + eclipse in #MaxMSP
• PixelWave - Native 2D iPhone framework based on the Flash API

Physical Computing

• RT Arduino The Documentary (2010) by gnd
• Great! @make published a site only about #arduino projects. Nice resource of tutorials and articles http://makezine.com/arduino/
• Nice tips and advices for perfect soldering. Especially for #physical #computing beginners like me via @make
• http://www.inventables.com is a great resource for new #hardware and materials in physical (computing) projects.

Game Developing:

• RT New video tutorial on creating isometric 3D with @as3isolib
• Nice read for #gamedev: #Flash #Game #Monetization: Total revenue from last 3 years
• Interesting article: Indie #Flash #Game Development: 2010 by Josh Tynjala #gamedev #monetize
• Nice #paper about #modding and the impacts: Precarious Playbour: Modders and the Digital Games Industry
• A great #paper: Moving #Learning #games Forward by http://www.educationarcade.org #serious #gaming #design
• RT DAME is an awesome free tilemap editor for Flixel. Also extendable with Lua.

Flash and Flex

• RT gskinner: Open source profiler for AS3. Definitely worth checking out.
• RT nice list of #Flash #Compression Libraries
• RT Blogged: Using BlackBerry PaymentService with Adobe AIR for the #PlayBook
• RT Huge open-source gesture library released by @GestureWorks
• Nice tutorial: #Flash + #Alchemy Series Part 2: Environment Setup
• Nice implementation of SimpleStageVideo
• RT What can you do with bytes ? - Updated!
• #Flash media server 4 #whitepaper now available
• Nice tool for using #flash content: Resolume #VJ #Software
• Creating QR Codes in ActionScript via @riarockstars
• RT Check out the latest diagramming and #visualization libraries for #Flex and #Air apps by @KapLab
• RT AS3 API: AS3Square

Related posts:

1. My most important Twitter Messages #6
2. My most important Twitter Messages #11
3. My most important Twitter Messages #4

Bekanntlich Leben Totgesagte länger und so wie es aussieht geht es dem Medium interaktiver Film ähnlich. Die Idee des interaktiven Films gibt es schon seit einigen Jahren und dank des Rückkanals, welcher das Internet bietet, konnte dieses Medium Ende der neunziger Jahre einem breiterem Publikum zur Verfügung gestellt werden. Aber der wirkliche Durchbruch blieb bis heute aus, man könnte den interaktiven Film eigentlich auch als Totgeburt bezeichnen, obwohl das doch meiner Meinung zu hart klingt. Hauptsächlich lag es bestimmt an der Lean-Back Mentalität der Zuschauer, welche noch heute eine Hauptcharakteristik im Medium Film und Fernseh ist. Durch die immer stärker werdende Macht der interaktiven Medien (Internet und Games) wird sich dies Userverhalten auf die Dauer sicherlich mehr zu Gunsten der Interaktion verändern, und vielleicht gibt genau diese neue Entwicklung in der Mediennutzung dem interaktiven Film wieder ein Aufwind. Einen ersten Anfang hat YouTube mit der Einführung des Vermerk-Features (Video Annotation Feature) gemacht, welches von einigen Interactive Media Designer schon sehr schön für interaktive Filme eingesetzt wurde. Dennoch denke ich das diese Entwicklung noch nicht ausreicht, denn dem User muss selbst überlassen werden, wie sehr er sich interaktiv am Film beteiligt, so dass kein Überforderungs und auch kein Unterforderungsgefühl beim User auftritt. Aus diesem Grund haben wir (das erste Team am Klickfilm Projekt) versucht eine Story Engine zu entwickeln, die eine logische, sinnvolle und dramaturgische korrekte Erzählstruktur simuliert. Die ersten zwei Punkte konnten wir anhand von Tagging Techniken relativ gut umsetzen, nur die dramaturgischen Simulation ist um einiges komplexer und wurde am Ende von uns aussen vorgelassen. Dennoch war ich mit den Ergebnissen sehr zufrieden, weil mir dieses Projekt gezeigt hat, dass man einen interaktiven Film mit einem dynamischen Interaktionsgrad realisieren kann.

Mittlerweile ist seitdem einige Zeit (ca. 2-3 Jahre) vergangen. Aber nun gibt es einige wirklich hilfreiche Entwicklungen, die meiner Meinung nach den interaktiven Film zum neuen Auferstehen helfen können. Dazu gehören die positive Weiterentwicklung von StoryEngines, die zum Teil von der Game Industrie erstellt werden, die andere Entwicklung kommt aus der immer weiter voranschreitenen Disziplin der Bildverarbeitung (Image Processing).

Die Story Engine kümmert sich bei dem interaktiven Film fortgehend um eine logische und dramaturgische Narration (Erzählstruktur). Sie muss auf User Interaktionen reagieren können und eine passende Antwort bzw. eine passende Fortführung der Geschichte geben. Wenn keine Interaktion von Userseite geschieht oder wenn der User eine nicht passenden Befehl gibt, darf die Narration (bzw. der Geschichtsfluss) nicht unterbrochen werden. Die StoryEngine muss einen passenden weg dazu finden die Geschichte weiter fort zuführen. Einige interessante Informationen zu solchen Story Engines kann man hier finden:

• StoryTron
• Facade
• Interactive StoryTelling Slides
• Research in Interactive Narratives(University of Teeside)

Von Seiten der Bildverarbeitung werden immer besser werdende Objekterkennungs- und Trackingverfahren für Videobilder entwickelt. Diese Algorithmen könnte man sehr gut für die Verlinkung und Visualisierung von Interaktionsmöglickeiten im Videobild nutzen. Denn in unserem Projekt mussten wir einzelne klickbare Bereiche (Hotareas) im Videobild sehr mühevoll maskieren und im nach hinein Tracken. Diese Arbeit stand in keinen sinnvollen Aufwand/Nutzen Verhältnis, jedoch machen mir diese neuen Verfahren sehr gute Hoffnung einem Video leichter interaktive Elemente hinzu zufügen.

• Interactive VideoCutout
• Label Me
• Tracking und Videotracing
• Objektorientiertes Videoscrubbing
• Spracherkennung in Flash

Ich hoffe doch sehr, dass sich diese zwei sehr unterschiedlichen Disziplinen zusammefinden und noch ein paar gute Filmleute ins Boot holen, und schon könnte aus dieser Mischung ein richtig guter interaktiver Film entstehen, der dazu nebenher den so sehr herbei gewünschten Traum von der perfekten Medienkonvergenz erreicht

Related posts:

1. Links: Die Zukunft der Medieninformatik?!
2. My most important Twitter Messages #5
3. Neues von und für Medieninformatiker

Es ist endlich geschafft und auch noch rechtzeitig zu Weihnachten wurde die Version 1.2 meines Interactive Webcam Packages fertig gestellt. Viel hat sich in der Funktionalität zur Version 1.0 eigentlich nicht getan, ausser dass das Interactive Webcam Package nun komplett auf ActionScript 3 portiert wurde.
Aber der damit verbundene erhebliche Perfomancesprung von ActionScript 2 auf ActionScript 3 und die neuen Open-Source Projekte (wie z.B. Papervision 3D) ermöglichen einige neue interessante Anwendungsfelder für das Interactive Webcam Package. Als kleinen Vorgeschmack und für eine bessere Vorstellung wie solch eine Kombination aussehen könnte, habe ich für euch zwei Videos meiner neuen Webcam Experimente mit hochgeladen, die in Kombination mit der Papervision3D Engine entstanden sind.

Der Sourcecode dieser Experimente liegt in dem zip-File des Interactive Webcam Packages bei, so dass jeder damit ein wenig rumspielen kann. An dieser Stelle möchte ich mich noch bei den Entwickler der Papervision3D Engine,John Grden für das XFighter Modell und Jens Franke für seinen Papervision3D Vortrag und seine Utility Klassen bedanken. Ohne diese hilfreichen Tools hätte ich diese zwei kleinen Experimente auf jeden Fall nicht so schnell realisieren können.

Nochmal kurz zum Aufbau und zur Struktur des neuen Interactive Webcam Packages. Da sich bekanntlich die Flash API Struktur von ActionScript 2 auf ActionScript 3 schon gut verändert hat, musste ich auch ein bissl an der Struktur des Interactive Webcam Packages rumschrauben. Da die Klassen aber nicht so mega umfangreich sind, hat sich eigentlich nur das Eventhandling nennenswert verändert. So dass jetzt alle Events mit der bekannten ActionScript 3 addEventListener() Funktion abgefangen und bearbeitet werden müssen. Aber über solch eine Änderung lacht ja ein eingefleischter AS3 Coder . Für alle anderen offenen Punkten soll die beigelegte Dokumentation des Interactive Webcam Packages für Klärung sorgen. Dabei orientiert sich die Dokumentation an der etablierten Flash Hilfe. Aus diesem Grund sind alle möglichen Klassenmethoden und Attribute erklärt und mit Beispielcodes versehen. Sollte es dennoch Fragen oder Probleme geben, scheut euch nicht mich anzuschreiben oder hier zu posten. Ich werde dann mein Bestes geben.

Nun aber genug von mir, wünsch euch allen frohe Weihnachten und viel Spass beim Flashen im neuen Jahr!

Related posts:

1. AS2: Interactive Webcam Package
2. Webcam User Interface
3. Webcam – Lightwriter Version 2.0

Bildbearbeitung

Microsoft Photosynth
Photos werden inhaltlich passend 3dimensional zueinander ausgerichtet und mit Hyperlinks versehen.

Weitere Infos:
Vortrag auf der TED
Projekt Homepage

Using Photographs to Enhance Videos of a Static Scene
Ein Verfahren, welches Z-Parameter aus einem Videobild heraus extrahiert, und noch zusätzlich Fotos in das Video mappen kann um damit grössere Belichtungsspielräume (siehe HDR) im Video, Objekt- und Kamera-Shakesbearbeitung im Bild zu ermöglichen.

Weitere Infos:
Beispiel Video
Projekt Homepage

HDR Video
Das Max Planck Institut hat sich dem Thema HDR verschrieben. Einige interessante Arbeiten zum Thema HDR Video Encoding und HDR Image Processing sind daraus entstanden.

Weitere Infos:
Beispielvideo
HDR Video
Projekt Homepage

Digitales Schärfeziehen
Mit dieser Kamera kann man ein Bild aufnehmen, bei dem sich in der Post Production die Schärfeebene bearbeiten lässt.

Weitere Infos:
Beispielvideo
Projekt Homepage
netter Blogeintrag dazu

Charakter Motion Tracking Verfahren
Das Motion Trackingverfahren kommt ganz ohne die üblichen TrackingSensoren aus. Als erstes muss der Mensch durch einen 3D Scanner, wo ihm dann die Gelenkpartien zugeordnet werden. Danach kann er sich im Raum frei bewegen und die speziell ausgerichteten Kameras berechnen dann die Bewgung, und erstellen daraus die Bewegungsdaten für 3D PRogramme.

Weitere Infos:
Paper
Entwickler Homepage

Seam Carving for Content-Aware Image Resizing
Eine neue kontextbasierte Skalierung von Bildern. Das Verfahren fand eine grosse Aufmerksamkeit in der Bloggerszene. Nun will es Adobe in Photoshop integrieren.

Weitere Infos:
Paper
Beispielvideo
Umsetzung in Flash

Heliodisplay
Bei diesen Display soll es sich um ein Display aus Luft bzw. um eine Luftprojektion handeln. Mit 20.000 Dollar ist man dabei.

Weitere Infos:
Hersteller Seite
Blogeintrag dazu
Blogeintrag dazu

Mensch-Maschine Interaktion:

Multi-Touch Display
Jef Han verursachte mit seinen Mult-Touch Bildschirm einen riesigen Hype. Der Vorteil von MultiTouch Bildschirmen ist das mehrere Berührungspunkte (multi-touch) erkannt werden können, was widerum eine direkte, umfangreiche und gestenbasierte Steuerung am Display ermöglicht.

Weitere Infos:
Jef Han TED Vortrag
Microsoft Surface
Jens Frankes (Flash) MultiTouch
Tim Roths (Flash) MultiTouch
Blog zu MultiTouchs

360° Holographic Display mit 3D Interface
Ein kugelartiges Display, welches sich komplett mit den Händen steuern lässt. Ähnlich eines MultiTouch Displays.

Weitere Infos:
Paper
Entwickler Homepage
Entwickler Homepage
Entwickler Homepage
Universität
Blogeintrag dazu

DataTiles
Rekimotos hat im Jahre 2001 das grafische Interface mit einem physikalischen Interface verbunden. Eine sehr intuitive Interaktion ist daraus entstanden.

Weitere Infos:
Projekt Homepage

Mixed-Reality Painter
Das MIT hat eine Art Mixed-Reality Painter erstellt mit dem man das Gemalte beliebig im Raum positionieren kann.

Weitere Infos:
Projekt Homepage

Mobile Stadtspiele: REXplorer
Mobile Stadtspiele sind eigentlich nichts Neues, aber die RWTH hat mit ihrem REXplorer (Regensburg Tourismusführer) eine vorbildliche Umsetzung abgeliefert. Ihr System basiert auf Gestenerkennung, GPS und Smartphones.

Weitere Infos:
Projekt Homepage
Entwickler Homepage
Fernseh Beitrag

The Arcade Fire
Ein gut umgesetztes interaktives Musikvideo.

Weitere Infos:
Musikvideo

Drop Spin Fade
Mensch-Maschine Kommunikation über eine Art Fadensystem. Weiss gar nicht wie ich das erklären soll, muss man sich einfach mal anschauen.

Weitere Infos:
Projekt Homepage

Adobe Creativity Conducted
Blitz Agency präsentiert eine grosse HD Flash Interactive Leinwand, gesteuert mit Wii Remotes.

Weitere Infos:
Projekt Blogeintrag

Design

Justice - Dance
Das Musikvideo Dance von Justice ist eine hammerharte Motion Graphics und Tracking Arbeit, kombiniert mit einer geile Idee. Ein absolutes must see!

Weitere Infos:
Musikvideo

Creativity Spark From Masters Of Illustration
Eine sehr umfangreiche Gallery von Illustrationen, die die Zeichnungen wunderbar mit dem Realbild kombiniert.

Weitere Infos:
Gallery

Aukustik Hörspiel
Schon mal einen Stereobasierten Haarschnitt erlebt? Dann jetzt mal schnell die Kopfhörer aufziehen und zurücklehnen.

Weitere Infos:
Hörspiel

Ich hoffe die vorgestellten Projekte konnten euch genauso begeistern und inspierien wie mich. Ich bin immer wieder überrascht was für ein abgefahrenes Zeug von noch abgefahreren Leuten produziert wird. Schade das man im normalen Arbeitsalltag davon kaum etwas erfährt. Die absoluten Klassiker wie z.B. MS Surface sind davon mal ausgenommen. Wer sich jetzt noch ein paar Videos von kreativen Hobbybastlern und Studenten anschauen möchte, der kann gerne Stunden auf der Seite hackedgadgets.com verbringen.

-- UPDATE 1.12.2007 --
Auf slashcam.de ist ein schöner Übersichtsartikel zum Thema Ausblick in der Bildtechnik erschienen. Sehr krass was da alles auf der Siggraph 2007 vorgestellt wurde. Eine noch umfangreichere Auflistung gibt es auf trowley.org.

Related posts:

1. Interessantes Neues für Medieninformatiker
2. My most important Twitter Messages #5
3. My most important Twitter Messages #10

Seit einiger Zeit spiele ich schon mit bildbasierter Interaktion rum (wie man es im meinen Experimenten Bereich gut sehen kann:-). Leider liesen sich die bisherigen Klassen nicht so einfach ohne Änderung für andere Experimente verwenden. Aus diesem Grund habe ich mich jetzt nochmal hingesetzt und die Klassen richtig aufgeräumt bzw. auch zum Teil verbessert.

Das Lichter Tracking arbeitet endlich auflösungsunabhängig (funzt somit auch in 640x480px) und wirft schön Events, die ihr mit einem einfachen Listener Objekt abrufen könnt.
Die CamButton Klasse wurde komplett überarbeitet. Es gibt jetzt eine CamButtonManager Klasse mit der man dann die Cam Buttons erzeugt, ganz nach dem Prinzip des Factory Pattern. Die CamButtonManager Klasse überprüft desweiteren ob der Button aktiv ist oder nicht und führt dementsprechend das Ereignis aus. Was mir aber am besten gefällt ist, dass jetzt in zwei verschiedenen Modi gearbeitet werden kann. Einmal der bisher bekannte Modus mit dem Differenzkey (wo man vorher ein Snapshotbild ohne User erstellen musste) und jetzt gibt es neuerdings noch dazu den Modus Motion Detection, der ganz nach dem Prinzip von Guy Watson arbeitet. Nur dass man bei meiner Version die Menge der Frameüberlagerungen zur Laufzeit einstellen kann. ;-p

Das wars auch schon im Groben an Neuerungen. Ich hoffe mit den Klassen kann jetzt jeder ein bissl schneller mit bildbasierter Interaktion herumspielen. Die Klassen könnt ihr euch mit Codebeispielen und einer ausführlichen Dokumentation hier runterladen:

Download: Interactive Webcam Package mit Klassendoku und Beispiel Codes

Ich würde mich sehr über euer Feedback freuen!

-- UPDATE 22.12.2007 --
Es gibt ein neues Update des Interactive Webcam Packages für ActionScript 3. Mehr Infos hier.

Related posts:

1. AS3: Interactive Webcam Package 1.2
2. Webcam User Interface
3. Webcam – Lightwriter Version 1.0

Eigentlich ist ja jedes 0/8/15 Jump and Run Game mit seinen Spielesounds, Musik und der visuellen Darstellung audiovisuell. In meinem Spiele Experiment habe ich dagegen versucht die audiovisuellen Kanäle mit in die Interaktion einzubinden. Die Interaktion des Spiels basiert auf 3 Ebenen:

• Die tradionelle haptische Eingabe über die die Tastatur (Linke und Rechte Preiltasten) - für das Vor- und Zurücklaufen der Hauptfigur.
• Mithilfe der audiobasierten Interaktion (lautes Rufen in das Mikro) kann man die Hauptfigur springen lassen.
• Die visuelle Interaktion wird mit Hilfe der Webcam und einer Lichtquelle umgesetzt. Die Position der Lichtquelle wird getrackt und steuert einen visuellen Schläger im Spiel an. Mithilfe des Schlägers kann man einen Ball so ablenken, dass der Ball einen Gegner treffen kann und diesen dann zerstört.

Hauptziel in meinem Spiel war es zu schauen wie das Game Play bzw. das Gefühl beim Spielen ist. Ob man vielleicht mit den gleichzeitigen Einsatz der verschiedenen Interaktionsebenen überfordert ist. Ich selber habe ein bissl gebraucht bis ich mich an die Steuerung gewöhnt hatte. Ich muss aber auch zugeben, dass ich überhaupt kein aktiver PC-Gamer bin und mich daher sowieso in solchen Sachen ein bissl schwer tue. Damit Ihr einen besseren Eindruck von dem Spiel bekommen könnt, habe ich ein Beispielvideo mit in das Experiment eingebunden. Dort gibts auch eine genauere Erklärung zur Bedienung des Games, sowie eine spielbare Version. Schaut mal rein und habt Spass. Ich freu mich über jedes Feedback!

Nun aber zur technischen Umsetzung:
Der Aufbau und die Logik des Jump and Run Games basiert zum grössten Teil auf das Tile Based Game Tutorial von Tonypa. (Vielen Dank an dieser Stelle f&umlr dieses geniale Tutorial).
Da ich in Sachen Pixelgrafik nicht gerade gut bewandert bin, habe ich mich den Sprite Grafiken des Spielklassikers Super Mario bedient.
Für die Lautstärkenmessung benutzte ich die Standard Mikrofon-Klasse von Flash. Diese Klasse lieferte mir immer einen Lautstärkenwert zwischen 0 und 100 zurück. Ab einer Lautstärke von 30 fängt der Charakter an zu springen.
Die Steuerung des Schläger erfolgt mittels eines Lichttrackings, das aus meinen Webcam Lightwriter Version 2 Experiment stammt. Das Verfahren habe ich in einem älteren Blogeintrag schon näher erläutert, deswegen gibt es hierzu keine näheren Infos.
Perfomancemässig läuft das Spiel auf meinem 4 Jahren alten Laptop (2,4 GHZ Athlon, 512 MB Arbeitsspeicher) gerade so flüssig. Daher gehe ich davon aus, dass das Spiel leider für ältere bzw. schwächere PCs nicht zu empfehlen ist. Ideen zur Programmiercode Optimierung fallen mir momentan leider keine Guten ein.

Technische Anforderung:

• - Flash Player 8 (ActionScript 2)
• - Headset oder Mikrofon
• - Webcam
• - Lichtquelle (Taschenlampe oder Feuerzeug)
• - PC mit ca. 2,4 GHz und 512 MB Arbeitsspeicher oder höher

Stärker Interessierte können sich gern den Sourcecode des Spieles runterladen. Aber seit vorab gewahnt. Der Code ist nicht gerade gut zulesen, da er kaum objektorieniert ist (Zum Teil auf Flash 5 besteht) und ich einige Bugs ein bissl dreckig korrigiert habe...

Download Sourcecode zum Game

-- UPDATE 22.05.2007 --
Stefan Gerbeth (ein Studienkollege) hat ein einen interessanten Link zu meinen Game gepostet. Das Interactive Cinema Game! Lustiges Spiel!

Related posts:

1. AS2: Interactive Webcam Package
2. Flash Game Programmierung
3. Flash Game Frameworks, Classes and Libraries

Nachdem mein Webcam Lightwriter Version 1.0 leider nicht bei allen Webcams so gut funktioniert hat (wegen Helligkeitsproblem), habe ich ein komplettes neue Trackingverfahren geschrieben. Ich arbeite jetzt nicht mehr mit der Funktion Bitmap.getColorBoundsRect(), sondern analysiere fast jedes Pixel des Webcambildes. Bei der ersten Version hatte ich massive Perfomance-Probleme bei der Helligkeitsüberprüfung. Die konnte ich dank eines Tipps meines WG-Kollegen Matze ziemlich einfach lösen. Ich sollte einfach das Webcam Bild in ein Schwarz/Weiss Bild umwandeln. Mit Hilfe des colorMatrixFilter von Matthias Kannengiesser wandelte ich das Webcambild um und hatte somit eine Art Graustufenbild (Helligkeitsbild). Dieses Graustufenbild wandelte ich wiederum mit Hilfe der Bitmap.threshold() Methode und einen variablen Schwellenwert in ein Binärbild um. So waren die hellen Punkte (Lichter) weiss und der Rest schwarz. Damit die Perfomance noch im Rahmen bleibt, skalierte ich das Bitmap auf 80x60 Pixel herunter. Diese Auflösung reichte in meinen Tests für ein erfolgreiches Tracking aus.

Nachdem ich das Bild jetzt endlich fertig bearbeitet hatte, ging es an das eigentlich Tracking. Ich suchte im Bild nach einem weissen Pixel, der noch zusätzliche weisse Pixel als Nachbarn hat (mind. 3 bis 4). Ist diese Bedingung erfüllt, ging ich davon aus, dass es sich an dieser Stelle um ein Licht handeln müsse. Um die Grösse des Lichtes zu ermitteln, überprüfte ich die immer aufeinander folgenden horizontalen Nachbarn nach der obigen (weissen Nachbar) Bedingung. Wenn diese Bedingung nicht mehr erfüllt ist, ging ich davon aus, dass ich die Breite des Lichtes grob ermittelt hatte. Nun musste ich die Höhe des Lichtes ermitteln. Die Höhe ermittelte ich genauso wie die Breite des Lichtes nur das ich die vertikal aufeinander folgenden Pixel überprüfte. Dieses gesamte Verfahren lieferte mir schon eine zufriedenstellende Information über die Position des Lichtes, aber nicht über die ungefähre Grösse. Denn bei der Breite war dieses Verfahren noch nicht stabil genug. Dieses Problem konnte ich aber mit einem einfachen Trick lösen. Ich halbierte die ermittelte Höhe des Lichtes und überprüfte dort (y= yWertLinksOben + lichtHöhe/2) nochmals alle horizontalen aufeinander folgenden Pixel nach weissen Nachbarn. Wenn diese ermittelte Breite grösser war (das ist sie in der Regel auch), übernahm ich diese als aktuelle Breite für das Licht. Am Ende dieses Verfahren gebe ich ein Rechteck-Objekt zurück, das genug Informationen zu der EINEN getrackten Lichtquelle beinhaltet.

Froh darüber, das ich das Tracking erfolgreich geschafft hatte (in Furtwangen), wollte ich es zu Hause bei meinen Eltern (in Ober-Mörlen) weiter verbessern. Und siehe da es funktioniert nicht mehr. Und warum?! Weil eine zweite Lichtquelle im Webcam Bild war. Mein Algortihmus wusste nie welches Licht jetzt getrackt werden sollte. Ein Differenzverfahren wollte ich nicht benutzen, da dadurch die Bildinformation meines Lichtes erheblich verändert werden kann und wegstellen konnte ich das Licht auch nicht, Grr. Da meiner Meinung nach, so etwas aber ein absoluter Standardfall sein könnte, kam mir die Idee mehrere Lichter zu tracken. Also hab ich mich wieder dran gesetzt um das Verfahren auch noch für mehrere Lichter fit zu machen. Lichter zu finden war ja zu diesem Zeitpunkt kein Problem mehr, nur mehrere Lichter zu finden ohne das dabei die Perfomance in die Knie geht, war da schon schwerer umzusetzen. Ich durfte einfach die schon überprüften Pixel nicht nochmals überprüfen - Wer sich den Algortihmus genau anschaut, wie ich die Grösse des Lichtes ermittle wird verstehen was ich meine - Als erstes wollte ich dann die überprüften Pixel mit einer anderen Farbe kennzeichnen, was mir aber das Webcambild im nach hinein verfälscht hätte. Und das fand ich gar nicht gut. Nächster Gedanke war es ein extra 2dim. Array (80x60) anzulegen und dies mit den Stadien 0=noch nicht überprüft und 1=schon überprüft zu belegen. Aber das war mir viel zu umständlich, bis auch hier mir wieder jemand den ultimativen Tipp gab, den nicht genutzten Alpha Kanal für dieses Problem zu nutzen (Dank hier an Helge - Stefan Eckert). Denn wenn der Alpha Kanal den Wert 255 hat, muss ich die Pixel überprüfen, wenn er den Wert 0 hat ist eine Überprüfung nicht mehr nötig. Mit Hilfe dieses Verfahren bekam ich alle Lichtquellen heraus gefiltert. Jetzt musste ich sie nur noch passend sotieren, so dass z.B. Lichtquelle 1 auch immer als Lichtquelle 1 erkannt wird. Das machte ich mit einem Distanzvergleich alter Trackingergbnisse mit den neuen Trackingergebnissen. Dort wo die Distanz zwischen den alten und neuen TrackingRechtecken am Geringsten ist, ist ein Paar gefunden und es musste sich um die gleiche Lichtquelle handeln. Ja und in meinen Tests mit 2-3 Lichtquellen funktioniert das auch ganz gut. Schaut mal rein.

Sourcecode Webcam Lightwriter Version 2.0

Webcam Lightwriter Version 1.0 wens dann doch noch interessiert. Die Vorschau der ersten Version gibts noch auf der Flashhilfe.de Seite anzuschauen

-- UPDATE 18.05.2007 --
Eine nette passende Interaktion für den Lightwriter. Danke Jonas für den Tipp!

-- UPDATE 17.06.2007 --
Die LightTracking Klasse wurde in Sachen Anwenderfreundlichkeit überarbeitet, so dass ihr diese Klasse super einfach für eure eigenen Experimente benutzen könnt. Den Download gibt es unter Interactive Webcam Package mit ausführlicher Doku und Beispielcode zum leichteren Einstieg.

Related posts:

1. Webcam – Lightwriter Version 1.0
2. AS3: Interactive Webcam Package 1.2
3. Webcam User Interface