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.

A typeface is an environment for someone’s expression: using typefaces we write documents, create posters and subtitle movies. We follow the type creator’s restrictions and design decisions (kerning, spacing, proportion) when using her fonts. Good typefaces are created by highly-skilled people and can take several years to create. Body Type aims to allow anyone to create a highly expressive and personal typeface using only their body and hand gestures.

Body Type is an excercise on freestyle computing and was built using OpenFrameworks, the Microsoft Kinect sensor, OpenNI, FontForge, Potrace, ImageMagick, PHP, TouchOSC and the Apple iPhone.

Background

This project builds on a previous exercise on generative art that made use of the Kinect OpenNI skeleton system to create letterforms. I decided to take the idea further and create a self-contained application that would allow anyone to create a TrueType font using their body and gestures. The software should allow people to create type using their body in a way evocative of light painting photography:

Technical information

Body Type was created using the Microsoft Kinect sensor which was controlled by a C++ application created using openFrameworks and its OpenNI extension. This allowed for the 3D input received from the sensor to be converted into variable-width outlines and skeletons. The next issue was creating a TrueType font (.TTF file) from these silhouettes. The font-generation process goes through several stages in order to achieve this:

1. Using openFrameworks to generate a black and white bitmap representation of each letter.
2. ImageMagick is used to convert the image to a format compatible with FontForge.
3. FontForge makes use of Potrace to vectorize the bitmap and then generates the final letterform and font.
4. Since Body Type was displayed in the STUDIO for Creative Inquiry as part of an exhibition, web functionality was added so that font-creators could send themselves the resulting files. PHP was used to create a compressed ZIP file of all image and TTF files and send it to the specified email address.

The created font has six different possible parameters to determine a letterform’s visual attributes: skeleton lines, skeleton dots, line width, upper body, lower body and hand trails. Since controlling these parameters would be quite complicated to do by using gestures or on-screen menus, a TouchOSC iOS overlay was created to allow remote control via Open Sound Control:

Results

During the STUDIO exhibition dozens of fonts were created. Below are samples of some of them.

By Terry Irwin

By Shawn Sims

By Heather Knight (dingbats)

By Cong Ma (chinese characters)

By Haakon Faste

Creating the font is just part of the process. A font is made to be used. This project acknowledges the limitations of the fonts created both technically (since they lack proper letter spacing) and alphabetically (since they contain only representations for letters A to Z and numbers 0 to 9). However, these fonts allow for “freestyle” graphic experimentation:

By Paulo Pinto

By Juan Carlos Cammaert

By Mauricio Giraldo Arteaga

Further work can be explored creating complete characters sets.

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.

Body Type originalmente escrito en mga/blog en June 29, 2011.

–

Body Type is a body-based font generator using OpenFrameworks, OpenNI and the Kinect sensor.

Project for the Spring 2011 Interactive Art & Computational Design course in Carnegie Mellon University
golancourses.net/2011spring/

–

Body Type es un generador de tipografías basadas en el cuerpo que usa OpenFrameworks, OpenNI y el Kinect.

Proyecto para el curso Interactive Art & Computational Design en Carnegie Mellon University
golancourses.net/?2011spring/

mga bold

mga outline

Body Type originalmente escrito en mga/blog en March 26, 2011.

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.

New Faces is a project that began in 2009 after I got fed up with Colombia’s online newspapers’ (one site, another site) high emphasis in sports and celebtrity-related news. I decided to take a screenshot of the offending website and remove this information (along with advertising) in order to see what was left.

Clearly sports, advertising and celebrity news have a relatively high importance for this colombian newspaper (at least in its online incarnation). This led me to wonder if this was the same across different countries. I decided to create a Python script that makes use of webkit2png-0.5 to take a screenshot of eleven news websites every night at 8pm. This script has been ran almost every night since November 8, 2009.

New faces

After seeing Rutherford Chang’s work with the New York Times where he blacks-out every element in the page except faces (no link available, sorry) I thought it would be an interesting idea to execute this same process in my dataset of more than 3,000 files and 10 GB.

I tested various technical solution for this process and decided upon using the OpenCV library for Processing.

After that it was a matter of applying it to my dataset and see if it worked. I tried several parameters for the detect() method since there were many false positives (text selected as face) and false negatives (face undetected when there should be) but could not get 100% accuracy. These errors provide an interesting outcome anyway.

The faces are extracted from the screenshots and saved as separate files along with their original location in x,y and number of total faces in the screenshot. There were 28,000+ faces deteced (less than 10 faces per screenshot).

With this new subset I then created a Flash interface to view the faces in their original x,y coordinates with buttons to toggle the visibility of individual news sites. Next to the buttons a blue line indicates average face area, a green line indicates how many screenshots (individual days captured) and a red line indicates total amount of faces in that site.

View the Flash interface online in your browser. F for fullscreen (click the interface to give it focus). CAUTION: ~30,000 images files loaded might clog up your browser (although they’re about 2kb each only). Interface is not optimized for low-end computers.

Future work

From this initial work some superficial conclusions could be made (see photo captions). Further analysis could provide some interesting information such as:

• dominant race or skin color
• gender distribution
• dominant face expression (sad, happy, angry, etc.)
• average face area
• preferred location in the page
• how the above change over time

The interface makes use of Bit-101?s Minimal Comps.

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.

New Faces originalmente escrito en mga/blog en March 18, 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.

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.

Inventando el agua que moja

Para hacer funcionar el código, cree un nuevo documento de Flash ActionScript 3 y meta tres textfields con nombre de instancia status_txt, link_txt, y weasel_txt. Puede cambiar el texto objetivo (variable target) por cualquier otro que tenga letras de la A a la Z (mayúsculas), espacio, punto y signo de exclamación. Si quiere más letras tiene que modificar la funcion randomLetter().

El máximo número de generaciones que me ha generado para este texto es de 1452.

El código (AS3):

var target:String = "O TRUE APOTHECARY! THY DRUGS ARE QUICK. THUS WITH A KISS I DIE.";
var current:String = "";
var numSiblings:Number = 100;
var variation:Number = 5;
var stepsNeeded:Number = 0;
var generation:Array = [];
var timer:Timer = new Timer(10);
 
function newGeneration():Array {
	var i:Number;
	var thisGeneration:Array = [];
	for (i=0;i < numSiblings;++i) {
		thisGeneration.push(createSibling(current));
	}
	return thisGeneration;
}
 
function newParent():String {
	var i:Number, r:String = "";
	for (i=0;i < target.length;++i) {
		r += randomLetter();
	}
	return r;
}
 
function createSibling(dad:String):String {
	var i:Number;
	var sibling:String = "";
	for (i=0;i < dad.length;++i) {
		if (Math.random()*100<variation) {
			sibling += randomLetter();
		} else {
			sibling += dad.charAt(i);
		}
	}
	return sibling;
}
 
function randomLetter():String {
	var r:String;
	var n:Number = Math.floor(Math.random()*28)+62;
	if (n==62) {
		r = " ";
	} else if (n==63) {
		r = ".";
	} else if (n==64) {
		r = "!";
	} else {
		r = String.fromCharCode(n);
	}
	return r;
}
 
function qualifyGeneration():Number {
	var i:Number, j:Number;
	var qualification:Array = [];
	var tempQ:Number = 0;
	for (i=0;i < generation.length;++i) {
		tempQ = 0;
		for (j=0;j<generation[i].length;++j) {
			if (generation[i].charAt(j)==target.charAt(j)) {
				tempQ += 1;
			}
		}
		qualification.push(tempQ);
	}
	var maxQIndex = 0;
	var maxQ = 0;
	for (i=0;i < qualification.length;++i) {
		if (qualification[i]>maxQ) {
			maxQ = qualification[i];
			maxQIndex = i;
		}
	}
	return maxQIndex;
}
 
function parseGeneration(event:TimerEvent) {
	status_txt.htmlText = "GENERACIONES: " + stepsNeeded;
	generation = newGeneration();
	current = generation[qualifyGeneration()];
	weasel_txt.text = current;
	if (current == target) {
		timer.stop();
		status_txt.htmlText = "COMPLETADO LUEGO DE " + stepsNeeded + " GENERACIONES";
		link_txt.htmlText = "<a href=\"event:restart\">OTRA VEZ</a>";
	} else {
		stepsNeeded++;
	}
}
 
function doClick (e:TextEvent) {
	if (e.text=="stop") {
		link_txt.htmlText = "<a href=\"event:continue\">CONTINUAR</a>";
		timer.stop();
	} else if (e.text=="continue") {
		link_txt.htmlText = "<a href=\"event:stop\">DETENER</a>";
		timer.start();
	} else if (e.text=="restart") {
		init();
	}
}
 
function init () {
	stepsNeeded = 0;
	current = newParent();
	timer.start();
 
	var style:StyleSheet = new StyleSheet();
	var link:Object = new Object();
	link.textDecoration = "underline";
	style.setStyle("a:hover", link);
	link_txt.styleSheet = style;
	link_txt.htmlText = "<a href=\"event:stop\">DETENER</a>";
}
 
link_txt.addEventListener(TextEvent.LINK, doClick);
timer.addEventListener("timer",parseGeneration);
 
init();

pop goes the weasel originalmente escrito en mga/blog en October 20, 2009.

(English version at the bottom of this post)

Recientemente he estado trabajando en XCode y Cocoa Touch para un proyecto que estoy haciendo para el iPhone. Objective-C (el lenguaje de programación usado) tiene sus mañas (como todo lenguaje), pero he encontrado bastante ayuda en la web, gracias especialmente a Stanford, Google y a Stackoverflow.

Creo que es pertinente devolver algo a la comunidad, en particular a los hispanoparlantes, en este caso en forma de un mini framework para desarrollo de aplicaciones con múltiples pantallas no-jerárquicas ni lineales (simplemente que uno pueda saltar de una pantalla a otra sin ningún orden en particular, cuando el UITabBarController no es una opción). En realidad es basado en este otro de Jeffrey Berthiaume, pero con la adición de NIBs (Berthiaume hace las pantallas a punta de código).

Algo importante a tener en cuenta al usar NIBs es que para que el iPhone efectivamente libere la memoria usada por NIBs con imágenes, lo mejor es cargarlas con código (pero ese es otro post). De pronto luego pongo un tip acá pero por ahora mejor visite mi pregunta al respecto de esto en Stackoverflow.

Si lo que acabo de escribir suena un poco a chino avanzado (para aquellos no familiarizados con Obj-C), en parte es porque lo es (para mi Obj-C ha sido como un camino zen… el camino del ninja o algo así). Inauguro, entonces, el tag “iphone” en mi blog con este ZIP que pueden bajar y usar libremente (y si se le tira el proyecto que está haciendo no me eche la culpa):

Descargar InfiniteViews

Para que los angloparlantes puedan llegar a este post, a continuación la versión en inglés:

English version

This is a a framework based on the work of Jeffrey Berthiaume for developing NIB-based iPhone applications with non-linear, non-hierarchichal UIViewControllers, when the UITabBarController is not an option (games with multiple NIBs come to mind). Keep in mind that, in order for Obj-C to free NIBs with UIImageViews from memory, you need to load the images via code without using imageNamed. More info regarding this can be seen in this question in Stackoverflow:

Download InfiniteViews

Múltiples views no-jerárquicas en iPhone originalmente escrito en mga/blog en October 9, 2009.