Long time ago I posted my last summary of my Twitter messages, however for me it is always a nice way to reexperience the developments of a time period. For this reason my most important Twitter messages from July 2013 until October 2014. Read more...
For the Programming II Workshop at our Interface Culture department I decided to do an small experiment with Box 2D. For a long time I wanted to play around with Box 2D. Especially merging real world objects with virtual object fascinates me very much. I don't like so much the common Augmented Reality stuff. However, some stuff is really cool and inspires me. Here are some projects I got my inspiration from: EdgeBomber, Laser Sound test, Phun, Crayon Physics, 2d Sketches becomes 3d Reality, ILoveSketch, MotionBeam, Tangible Fire Controlls.
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!
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.
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:
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¨r 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:
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...
-- UPDATE 22.05.2007 --
Stefan Gerbeth (ein Studienkollege) hat ein einen interessanten Link zu meinen Game gepostet. Das Interactive Cinema Game! 🙂 Lustiges Spiel!
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.
Bei meinem Lightwriter Experiment kann man mit Hilfe einer Taschenlampe in Echtzeit im Webcambild malen. Inspiration fand ich in der Lightgraffiti Szene, besonders der Clip The past of pikapika und der TV-Beitrag zum Thema Lichtgraffiti von Tracks haben mir es sehr angetan. Während der Entwicklung meines Lightwriters schockte mich die neue Apple I-Pod NanoWerbung sehr, denn sie deckt sich fast komplett mit meiner Grundidee. SHIT! Aber ich hab trotzdem weiter gemacht und erzähl euch jetzt was zur Umsetzung in Flash.
Als erstes versuchte ich die hellen Pixel (es gibt einen frei wählbaren Helligkeits Grenzwert) im Videobild herauszufiltern und diese dann in einer übergelagerten Bitmap Instanz genau an der gleichen Stelle zu kopieren. Für das Herausrechnen der Farbinformationen (splitten in den RGB Kanal) aus den jeweiligen Pixel half mir das Tutorial Bitweise Operatoren von Grant Skinner sehr, jedoch waren die 76800 Helligkeitsberechnungen pro Frame (Auflösung von 320x240 px) für jeden Pixel zu viel für Flash. Ich versuchte nun die Helligkeitsfläche der Taschenlampe zu tracken. Um das zu erreichen, versuchte ich das Bild mit Hilfe von Transformation Matrizen so zu verändern, dass es nur noch die hellen Bereiche anzeigt. Ich erreichte nach längeren Probieren ein ausreichendes Ergebnis, jedoch funktionierte dies nur bei mir zuhause, denn bei anderen Webcams mit anderen Lichtverhältnissen und Hintergründen muss der Filter wieder neu justiert werden. Eine dynamische Justierung wäre aber viel zu aufwendig gewesen. Gefrustet von den bisherigen Ergebnissen durchstöberte ich nochmal die ActionScript Doku und stiess auf die Hilfreiche Funktion Bitmap.getColorBoundsRect(). Diese Funktion sucht im Bild nach einem von mir angegebenen Farbwert und liefert mir ein Rechteck mit Positionsangabe zurück. Diese Funktion liess ich nach weissen Pixeln im Bild suchen. Und siehe da, das zurückgelieferte Ergebnis stimmte mit der Position der Taschenlampe im Webcambild überein. Mit diesen Ergebnis konnte ich sehr gut leben. Nun musste ich nur noch dem Rechteck einen Offset zugeben um die runden Ecken der Taschenlampe zu erhalten. Da sich das Licht am Rand der Taschenlampe abschwächt und einen anderen Farbwert bekommt, überprüfte ich wieder die Pixel nach ihrer Helligkeit. Denn der Farbwert am Rand der Taschenlampe macht die Lichtspielerei erst wirklich interessant. Dieses Verfahren funktioniert einwandfrei, wenn man nicht direkt in die Webcam rein leuchtet. Falls das doch passiert, fängt der Flash Player an tierisch zu rechnen, weil das TrackingRechteck massiv grösser wird und dadurch die Anzahl der Pixel im Offsetbereich massiv zunehmen. Da die Helligkeitsberechnungen im Offset Bereich auch noch sehr rechenintensiv sind, habe ich eine weitere Funktion eingebaut. Ich berechne die Mitte des erhaltenen Rechteck und fange an Linien mit der Funktionlineto() zu malen. Die daraus entstandene Ergebnisse brachten mich wieder auf weitere Ideen, wie z.B. das man bestimmte Symbole malt und diese vom Flash Player erkannt werden und dieser führt dann bestimmte Aktionen durch (zum Beispiel Video starten, nächsten Clip laden usw.). Ich finde die Idee sehr praktisch in Hinsicht auf einfache Interaktionen im Wohnzimmer mit dem Fernseher. Beim dynamischen Malen könnte man ein 2 Player PingPong Webcamspiel (spielbar über Internet) entwickeln...
Aber leider muss ich noch gestehen, dass mein Lightwriter bei mehr als zwei Lichtquellen nicht mehr unbedingt stablil läuft. Denn durch die zwei hellen Bereiche im Bild wird das Trackingergebnis stark verfälscht. Bei manchen Webcams findet die Funktion Bitmap.getColorBoundsRect() sogar keine wirklich weissen Bereiche der Taschenlampe und liefert somit kein Trackingergebnis. Um diese Schwächen zu beseitigen, muss ich mir wohl doch noch ein eigenes Trackingverfahren in Flash schreiben. Einen ersten Ansatz hab ich auch schon, aber ich muss ihn erstmal auf seine Tauglichkeit überprüfen.
Aber jetzt genug und testet selbst meine erste Version des Lightwriters
-- UPDATE 11.03.2007 --
Eine ähnliche Anwendung, wie mein Lightwriter entwickelten die Jungs vom Graffiti Research Lab. Bei ihrem sogenannten L.A.S.E.R. Tag kann man mit Hilfe eines Laserpointers und einem mega starken Beamer ein Haus mit Licht betaggen. Geile Umsetzung, einfach eine geile Sache! Es lebe der Digital Media Punk!
-- UPDATE 16.04.2007 --
Es gibt eine neue Version des Webcam Lightwriters
Jetzt ist es mal wieder soweit für einen Blogeintrag, mein Studium beansprucht mich mal wieder sehr, so dass ich mich im Moment nicht so sehr um neue Blogeinträge kümmern kann.
Nichtsdestotrotz habe ich meine noch verbleibende Zeit für die Contentpflege meiner Site genutzt. Herausgekommen sind einige neue Fotos im Bereich Natur,Mensch und Urban. Sowie einige neue Videos aus älteren Skatezeiten gibt es im Fun und ernsten Videobereich zusehen.
Im Rahmen der Studium Veranstaltung Ambient Intelligence habe ich mich mit dem Thema Interaction Techniques for Instrumented Environments beschäftigt. Das daraus entstandene Paper liefert einen Überblick über die Thematik und wie es in Zukunft evtl. in diesem Bereich weiter gehen kann. Kleine Anmerkung von mir: das Thema ist auch besonders interessant für den Bereich interaktive Medieninstallationen.
Aber das war bis jetzt noch nicht alles in Sachen Studium, ich hab jetzt endlich mein Thesisthema (Abschlussarbeit) gefunden. Ich werde mich mit der Analyse zur Preisgestaltung online-basierter Produkte beschäftigen. Hier die genauere Beschreibung von meinem betreuenden Professor Wolfgang Maass:
Preise für Informationsgüter können nicht mit herkömmlichen Grenzkostenmethoden bestimmt werden, da diese gegen Null tendieren. In dieser Arbeit soll über eine Umfrage bestimmt werden, nach welchen Methoden KMUs und Grossunternehmen die Preise ihrer Online-basierten Produkte bestimmen. Aus den Ergebnissen sollen Handlungsempfehlungen abgeleitet werden. Diese Arbeit ist für Studenten geeignet, die sehr gute analytische Fähigkeiten besitzen, in der Lage sind konzeptionell zu arbeiten, um ein Analysemodell zu entwickeln und selbständig Information zu suchen.
Zu guter Letzt habe ich schonmal mein neues Webcam Experiment hochgeladen, den Lightwriter. Bei diesem Experiment kann mit Hilfe einer Taschenlampe oder ähnliches auf dem vom Flashplayer erzeugten Webcambild malen. In den nächsten Tagen werde ich noch ein Beispielvideo uploaden und noch bissl später werde ich dazu einen ausführlichen Blogeintrag verfassen, damit man sich besser vorstellen kann wofür das Ding überhaupt gut ist.
Jetzt muss ich mal wieder an einem Java3D spiel fürs Studium weiterprogrammieren...
Viel Literatur zum interaktiven Video im Web gibt es nicht. Im deutschprachigen Raum ist mir nur ein nennenswertes Buch aufgefallen Interaktives Video im Internet mit Flash
Im englischsprachigen Raum kann ich das Buch Foundation Flash 8 Video
Da interaktives Video mehr ist als nur die typische Clientanwendung zum Abspielen von Videos beim User, ist auch das Können des Flash Video Developer im Bereich Servertechnologien und Streaming gefragt. Gerade bei den Themen Videochat, Videostreaming usw. hat sich das Buch Programming Flash Communication Server
Ich denke mit dem Wissen dieser 3 Bücher ist man für fast alle zukünftigen Flash Video Anwendungen gut vorbereitet und braucht keine Angst mehr vor der Video Revolution im Web zu haben 😉
-- UPDATE 13.04.2007 --
Ein nettes Interview mit Bjoern Kowalski zum Thema interaktive Video Flash Site gibt es auf Flashstreamworks.com. Auf jeden Fall super interessant wieviel Technik und Arbeit in sowas drinne steckt!
-- UPDATE 16.05.2007 --
Stefan Richter von FlashComGuru.com bringt ein neues Buch mit dem Titel Hands-On Guide to Flash Video