GIF made with the NYPL Labs Stereogranimator

Publico esta foto hecha con el Stereogranimator como abrebocas para un post que publicaré más adelante sobre mi trabajo en la Biblioteca Pública de New York.

Presentando Stereogranimator originalmente escrito en mga/blog en January 26, 2012.

Notarán el video que se insinúa arriba. No es un error. Ese detalle motiva a “buscar” el video, ya sea haciendo scroll vertical (que no funciona, pero sería elegante que sí) o dando clic en play. Al dar clic aparece el video:

Me pareció una curiosa forma de “mostrar el video sin mostrarlo” sacando provecho de la tendecia que tenemos a completar las formas.

detalles coquetos originalmente escrito en mga/blog en January 22, 2012.

2D <3 3D is a Kinect-based online multiuser interactive environment. The project is still under development and currently allows multiple web-based users to interact with and augment the physical space of the Kinect participants with virtual objects.

Background

3D is the talk of the hour. From cinema to the living room, 3D is becoming simultaneously a selling and a divisive point. The point of this project is to mesh both points of view and make a commentary about the banality of this “issue”. The project is inspired by many previous works including:

The Bauhaus school of art, architecture and design also explored theatre. I was mostly interested in its highly geometric and formal qualities.

Peter Gabriel’s Sledgehammer video demonstrated an interesting optical phenomenon: human shapes may be inferred by the sole movement of points.

UYUYUY is a short film by Santiago Caicedo which, while designed to be watched with 3D glasses, is mostly composed of 2D elements.

The web has always been a medium of my interest. I try to include web-related functionality in my projects. The Red Agency website has an interesting chat functionality mixed with navigation and 2D parallax scrolling interface.

Technical exploration

I wanted to have a multiuser conversation between the physical and the virtual; 3D and 2D. This was my first C++ project so the learning curve was quite steep and full of obstacles. I started exploring the networking possibilities in openFrameworks including ofxOsc and ofxNetwork deciding upon the latter communicating with the web via a Java-based XMLSocket server (I know “basic” web sockets perform better but not enough time to explore that).

The project also uses ofxOpenNI for skeleton detection and ofxBox2d for physics/collision detection. An initial attempt was made to use ofxMSAPhysics but for some reason I could not make it work well with ofxOpenNI. The web interface uses Flash.

One challenge was how to visualize and represent the activity in either end (Flash being the 2D environment and openFrameworks the 3D). Further exploration must be made in order to have a more interesting visual representation in both ends.

Interdependence

The two main components of this project are mutually dependent: the 3D-interacting users require that web users are present and creating objects they can interact with. 2D web users require the “presence” of 3D skeletons for them to observe and affect. This “conversation” between 2D and 3D is the main element of the project.

Download the code (ZIP 20 MB) which is completely unsupported. Contains:

• Flash CS5 .FLA file (for the web-based interface)
• Eclipse Java project folder (for the socket server)
• openFrameworks project folder

Presentation (PDF 471 KB)

This project was done as part of the requirements to complete the Spring 2011 Interactive Art and Computational Design course with Professor Golan Levin in Carnegie Mellon University.

2D <3 3D originalmente escrito en mga/blog en March 19, 2011.

Description
Social network services[1] enable people to communicate with each other in ways that would be considered science fiction only a few years ago. This enablement has been welcome by people at large, with some criticisms concerning personal privacy and how well (or not) the networks they model reflect real life (offline) relationships. socially nervous is a commentary on how these services have affected our way we perceive these relationships.

The object

An electronic “pet” with movement and audiovisual actuation capabilities. The pet will communicate wirelessly with a host computer which in turn will receive information from the owner’s personal “identities” in two social network services: Facebook and Twitter. Only incoming information to these profiles will be taken into account (information generated by the user’s “friends”).

This information will be manifested physically by the pet’s behavior (movement, sound, light). As information is accumulated by the pet manifestations become more intense and erratic. As soon as someone touches the pet, it “forgets” any information stored and “sleeps”. The process begins again as soon as physical contact is lost.

Awkwardness
The pet’s shape is informed by the awkwardness inherent in the process of virtual socialization. The object could easily be a teddy bear or some other more familiar shape which would make the observer want to interact with it. Instead, I decided to create a non-familiar, even agressive, shape with sharp edges and non-symmetrical. An observer would notice an erratically-behaving object wandering about in response to virtual interactions. By touching it, the user “calms” the pet; physical interaction “defeats” virtual interaction.

Behavior states
Any information received by the pet will provoke behaviors in any of these types: physical, visual, auditive.
The stimulus is always represented in the 5×7 matrix as an icon followed by the username/alias of the person who provoked it. Below is a table of the different stimuli the pet receives along with the type of behavior it provokes:

A video of the behaviors working (indirect stimulus received via Bluetooth from a computer not in video). Initial/passive message was later changed to “please hug me”:

Part list

• 1 x Wiring Mini
• 1 x Generic PCB Protoboard
• Several Break away headers (straight)
• 1 x Capacitive sensor board
• 1 x 3.3V regulator
• Lots of F/F jumper wires
• 2 x snap action switch
• 3 x super bright red LED
• 1 x 100 microF capacitor
• 2 x standard LED
• 7 x 100 ohm resistor
• 2 x 10 Kohm resistor
• 1 x BlueSmirf antenna
• 2 x DC motor
• 1 x Lite-on LTP 747 5×7 LED matrix
• 1 x vibration motor
• 1 x buzzer
• 9V battery (although I later learned this battery should be avoided for this type of project)

I used 3mm laser-cut acrylic for the box (Sketchup 3D file).

A Processing-based visual interface will be developed to manage Facebook and Twitter profile settings.

Code
The Processing code uses random stimuli to show all possible behavior states. Modifications must be made in order to accomodate a particular social network service user. The Wiring code is quite elaborate (~2k lines of code) but you are welcome to look into it.

This project was done as part of the requirements to complete the Fall 2010 Making Things Interact course with Professor Mark Gross in Carnegie Mellon University.

socially nervous originalmente escrito en mga/blog en March 18, 2011.

¿Le gustan las caras?

No. No se trata de la banda de Rod Stewart y Ron Wood. Es un nuevo proyecto que hice y del cual escribí un breve post en este otro blog. Si quiere saber qué tienen en común Python, Processing, OpenCV y Flash, debería darle una leída y jugar con la interfaz.

New Faces originalmente escrito en mga/blog en January 28, 2011.

El equipo de Google Chrome acaba de publicar 20 Things I Learned About Browsers and the Web, un recuento de la historia de la web y tecnologías relacionadas en formato de cuento para niños. Además de ser interesante y bonito, hace uso de los más recientes avances (siendo “reciente” los últimos cinco años en algunos casos) en técnicas y tecnologías web.

Lo que más me gusta es la comparación que hace con un juego de ping-pong (por obvias razones).

Vale la pena darle una leída.

(vía tputh)

20 cosas que aprendí sobre la web (según Google) originalmente escrito en mga/blog en November 19, 2010.

Si algún empleado de Bancolombia con capacidad (y ganas) puede arreglar este “problemilla” le agradecería enormemente (no solo porque estoy pagando por ese servicio). Este problema se puede reproducir en MacOS en cualquier navegador (probé en Firefox 3.6.12, Safari 5.0.2 y Chrome 7.0.517.44):

Si quiero transferir a otra cuenta, en este caso a un proveedor, debo usar esta interfaz (primeros campos completados ya):

Necesito asignar una fecha para la transferencia así que hago clic en el botón ese que parece un calendario. Aparece el diálogo de selección de fecha:

Selecciono hoy 7 de Noviembre de 2010. El diálogo de fecha se cierra y llena el campo “Fecha aplicación (dd/mm/aaaa)”:

Todo parece estar bien así que hago clic en “Continuar” y sucede esto:

¿Cómo así que “La fecha no puede estar antes de la presente“? Pues si se fija, el campo de fecha ahora tiene un cero menos y dice “07/11/201″. ¡Quien hizo el Javascript de alguna forma está modificando/validando la fecha y en el proceso elimina el último caracter del campo! Adivine: esta interfaz solo funciona bien en Internet Explorer para Windows. Obviamente para quien lo hizo el 55% de los navegadores no son importantes. Y no, si cambio manualmente la fecha tampoco funciona.

Aventuras con Bancolombia: Episodio II La Guerra de los Navegadores originalmente escrito en mga/blog en November 7, 2010.

With this in mind, the Thought Factory was created and its main purpose was to save and classify the thoughts of festival visitors. Thoughts are abstract and intangible notions (we can’t read minds… yet). The Factory was made to make those thoughts somewhat tangible, “saving” them in bottles that can later be opened and their contents made visible as the genius in the lamp.

Each bottle represents an inquiry made by festival organizers. Every hour and a half a new bottle is placed in the filling station:

A bottle being filled

From that moment, and during the next ninety minutes, that bottle will be filled with thoughts from people who type them in the input stations:

Thought input machine

Thoughts can also be sent as an SMS message via mobile phone.

Since the Festival as for all ages it was necessary to curate these thoughts (basically removing obscene ones… let’s be honest, there’s plenty of obscenities in our thoughts :P).

Curating machine

Once approved, the message enters the bottle in the filling station:

When removed from the filling station, the bottle is labelled and placed with the rest of the full bottles so its thoughts can be read in the viewing station.

At the end of the Festival (in april 4, 2010) there will be sixty bottles full of thoughts that can be read in the project website.

My main tasks were developing the visual interfaces (thought input, thought curating, filling station, bottle visualization), the database that manages thoughts and inquiries and all communication happening between these and the bottles. SMS message service was kindly provided by Contacto SMS.

If you are curious about the tech side of the project: interfaces are made with Adobe Flash which communicate with a MySQL database via PHP and AMFPHP. Filling and viewing stations communicate with the bottles via Wiring using sockets and an RFID tag. ActionScript programming was made in FDT.

The Thought Factory originalmente escrito en mga/blog en March 28, 2010.

A partir de esa premisa, se realizó la Fábrica de Pensamientos cuya idea principal es guardar y clasificar los pensamientos de los visitantes al festival. Los pensamientos son nociones abstractas e intangibles (aún no podemos leer la mente). Con la Fábrica se busca hacer esos pensamientos tangibles de alguna forma, “guardándolos” en botellas que luego pueden ser abiertas y su contenido se hace visible como el genio de la lámpara.

Cada botella representa una inquietud planteada por el festival. Cada hora y media se pone una nueva botella en la base de llenado:

Una botella en proceso de ser llenada

A partir de ese momento, y durante los siguientes noventa minutos, se llenará esa botella con los pensamientos que la gente escribe en las máquinas de entrada:

Máquina de entrada de pensamiento

Pensamientos también pueden entrar en la botella vía mensaje de texto de teléfono celular.

Dado que el Festival es un evento para toda la familia es necesario hacer una curaduría de los pensamientos (básicamente prevenir el ingreso de obscenidades… seamos honestos, hay mucho pensamiento obsceno sucediendo en nuestras cabezas :P ).

Máquina de curaduría

Una vez aprobado, el mensaje entra a la botella que se encuentra en la base de llenado:

Cuando se retira la botella de la base, se etiqueta y se guarda para luego ser consultada por los visitantes en cualquier momento en la estación de visualización.

Al finalizar el Festival en abril 4 de 2010 habrá sesenta botellas llenas de pensamientos que podrán ser visualizadas en el sitio web del proyecto.

Mi labor principal fue desarrollar la parte visual (interfaz de entrada de pensamientos, interfaz de moderación, interfaz de llenado, interfaz de visualización, sitio web), la base de datos que soporta el sistema de pensamientos e inquietudes y toda la comunicación que sucede entre estas y las botellas. El sistema de mensajes de texto fue amablemente provisto por Contacto SMS.

Si tiene curiosidad de saber qué tecnologías están involucradas: las interfases están hechas en Adobe Flash y se comunican con la base de datos MySQL usando PHP y AMFPHP. Las interfases de llenado y visualización de botellas se comunican vía sockets con Wiring usando un tag RFID.

La Fábrica de Pensamientos originalmente escrito en mga/blog en March 28, 2010.

For a long time I have wanted to do a videogame history timeline. It would combine several of my interests: information visualization, history, time and, of course, videogames. Currently I have a class on videogame history (class blog in spanish) as a lecturer in the Design Department at the Universidad de los Andes and such a timeline would be useful (and neat).

I had the opportunity of creating a history timeline for a client and decided to use that code as the starting point for my timeline. This is why I can now present (drumroll):

The videogame history timeline

The URL is: http://www.mauriciogiraldo.com/vgline/beta/

clic para ver imagen completa

The timeline showcases eight types of events:

1. people (birthdates) of relevance: game designers and developers, scientists, artists, entrepreneurs.
2. business: companies or important business events.
3. consoles (or hardware such as PCs) where videogames are executed.
4. games
5. accessories and controls: peripherals that are connected to consoles.
6. technologies of importance.
7. cultural: events that have somehow influenced the world of videogames (books, movies, ideas or theories, etc.).
8. other events that contextualize what was happening worldwide when the other types of events happened.

Every event can be related to other events in three ways:

• creation (event A created event B): mostly used to relate a person with the games he/she created
• inspiration (event A was inspired or is “plainly” related to event B)
• series (event A precedes event B): for “sequences” of events (eg.: the “Mario” series by Nintendo are assumed to be sequential editions even though they were developed for different consoles)

Presenting this information clearly to the user is rather complicated. Not to say that I am finished with the interface. It still needs work and I want to explore more possibilities.

You need to press SPACEBAR in order to see the relationships between events:

relations between events

Given that you see a lot of relations between events in the default display mode (and even more events are missing from the timeline) I decided to allow the user to turn on/off event types and relation types. This way, if I turn off all events except people and games, I can see the screen with less “noise”:

people and games

It’s difficult (maybe even impossible) to plot all events and relations while completely avoiding superposed lines (or maybe I need to investigate a little more). However, I believe that the current solution is easy to understand once you have played with it for a few minutes (I didn’t set out to create a conventional interface; I wanted to experiment a little).

This is what I see if I turn on series and games:

game series

You can see that Doom II goes after Doom and that there is another later game in the series. Riven goes after Myst, etc.

Search

Users are lazy (okay, all but you) and if they don’t find what they are looking for in a few seconds they will go somewhere else. Also, in large sets of information (even though the timeline currently has only a few hundred events) it is difficult to predict how a user expects to find some particular data point. This is why the timeline has a search box:

search results for "nintendo"

Viva la open source!

In my web developing years I have benefitted from a large amount of open source libraries/programs/content and, every time I can, I try to give something back. In this case I have created a Google Code project so, whoever knows ActionScript 3 and Flash, can take a look and see what benefits he/she can find there (I don’t plan on supporting this code, use under your own risk).

Things to do

The timeline is far from finished. Among the things I want to do:

• content in spanish: I am using this timeline in my Videogame history class and I want the content to be fully translated
• complete content: a lot of information is missing or incomplete
• experiment: this basic information setup can be explored in many different ways
• share: there is an RSS feed with the whole content so anyone can use it to visualize it (an API would be more elegant) although my current server is a little unsteady at the moment

Technical stuff (and other)

Several people have collaborated, inputting data or with their opinion. Among them: Nicolás Arteaga, Vanessa Gómez, Andrea D’Macedo, Manuel Piñeros, Sebastián Ramírez, Rafael Tudela y Cárlos López. If you want to collaborate or if you find any innaccuracies, please contact me.

If you want to know what powers the timeline: content is fed via Drupal (which works on top of PHP, MySQL and Apache) to which I connect from Flash using AMFPHP (Drupal has a module for AMFPHP which I had to modify a bit). This has the benefit of automagically generating a plain text version of the content. The server is a little bit slow (the whole database is loaded in the first request… that’s why you see the quiz). Any performance ideas are welcome. Keep in mind it is a shared hosting environment.

This project has been supported by Powerflasher, the people behind FDT (the cool software I use to write all the ActionScript you see in Google Code).

The videogame history timeline originalmente escrito en mga/blog en January 30, 2010.