Final Project – Proposal

gabriel_presentation_00This project is the third in a sequence of experiments with generative narrative that I have been doing for my Major Studio class.

The first one is called Telephone.

gabriel_presentation_02It is an html page in which you search for a term. The server connects to the Google Images API, gives you back an image, automatically search for the title of that image, gives you back the new image, search for its title and so on.

gabriel_presentation_03It might sound complex, but it’s a very simple way of mimicking the miscommunication created by the children’s game telephone — using computers instead of people.

gabriel_presentation_04The results generate unexpected connections. Sometimes they are completely nonsense.

gabriel_presentation_05Sometimes they seem to make sense.

gabriel_presentation_06When I first presented it, I didn’t explain the technicalities involved. Then I asked people how comfortable they felt about not really understanding what was going on behind the scenes.

gabriel_presentation_07The response I got was that the connections were very clear, so no further explanations were needed.

gabriel_presentation_08That seemed to connect with these 2 principles that I was learning in the Narrative Strategies class. The second principle might be interpreted as a consequence of the first.

gabriel_presentation_09In a broader sense, the idea of a message being formed by the person who receives it can also relate to the psychological phenomena known as apophenia, the human tendency to see patterns. The principle has its variants, such as pareidolia, a type of apophenia associated with images or sounds. This is a very common phenomena in our lives. We experience it by seeing faces in geometric forms like the one above.

gabriel_presentation_11We also experience it when we see Jesus’ faces on toasts.

gabriel_presentation_12An interesting manifestation of apophenia in literature is the short story “The Library of Babel,” by Jorge Luiz Borges. In the story, people inhabit a library full of books made out of 25 characters sorted in every possible order. Most books are unreadable and completely nonsense. Even so, people believe that there might be books containing useful information and even predictions of the future, because all possible permutations are contained in the books.

gabriel_presentation_13These ideas led me to a second experiment called Her Weird Science.

gabriel_presentation_14It is a mashup of Her and Weird Science — a teenage movie from the 80’s directed by John Hughes.

gabriel_presentation_15I chose the two inspired by the ideas of archetypal stories, that is, basic plots that repeat over different narrative pieces. Both Her and Weird Science tell the story of men playing God, recreating human intelligence. The same plot is also found in Frankenstein, Pinocchio, and in more recent pieces of science fiction.

gabriel_presentation_16This is very explicit in one of the initial scenes from Weird Science, in which the characters are watching Frankenstein.

gabriel_presentation_17That explains the content. The narrative strategy, though, is based on letting users construct their own stories in their minds. Technically, I mashed up the subtitles from the 2 different movies and sorted them based on the time index of each subtitle.

gabriel_presentation_18Then I printed a book with the result.

gabriel_presentation_19There is no visual differentiation telling users about which sentence belong to which movie. Like in the  Telephone project, sometimes the result is pure nonsense and sometimes it seem to construct a cohesive narrative.

gabriel_presentation_20There are fortunate cases in characters from both movies talk about the same subject.

gabriel_presentation_21At last, my project for Narrative Strategies is a sequence of these two previous experiments. It will once again be a mashup of 2 movies.

gabriel_presentation_23Instead of translating that to a book form, though, I’ll keep them as videos.

gabriel_presentation_24Besides having similar stories, I’ll try to find movies with the same character names. By doing so, I’ll try to use the character names on the the subtitles to jump from one scene to another, instead of having the time-based sorting as before. This is a way of reducing the randomness in the connections.

gabriel_presentation_25I intend to do that with code once more. That is not a narrative strategy, but it’s not an idiosyncratic choice either. As said in the beginning of this presentation, I’m interested in generative art. The purpose is to create an apparently cohesive narrative by playing with algorithms.


Dynamic Interfaces Midterm – Final

In collaboration with Apon Palanuwech.

Screen Shot 2014-04-14 at 1.12.26 PM

We changed the game mechanics to act like a sort of soccer. The first prototypes still used  the old controls, which were not very responsive. Also, allowing users to drag and rotate the bars in their phones overloaded the websockets communication.

We playtested with some friends and got to a simpler solution: use a simple swipe to move the objects. That way, the data would be sent to the server only when the users released their fingers.

To play the game, go to on your computer. Then, access the same address in your phone.

Dynamic Interfaces Midterm – Prototype

In collaboration with Apon Palanuwech.

We spent weeks wondering about our proposals for this project and taking a look at different technologies that could help us — timbre.js, d3.js and SVG paths.
Then , we decided to go for the Lemmings idea and build it in one day, in a sort of hackathon.

We split the team in server and client-side. Apon built the whole websockets communication and I started to build the game engine and visuals using a physics engine called matter.js.
Screen Shot 2014-04-07 at 8.43.57 PM
It was hard to mix a physics game with Lemmings, though. The bars were terribly hard to control in a gravity-based simulation. We experimented with lots of different game mechanics — get the balls with the bars, hit the balls etc — and ended up removing the gravity from the game. Even so, the controls were not responsive enough:

Dynamic Interfaces Midterm – Proposals

In collaboration with Apon Palanuwech.

a) Worm Tunes
A visual music synthesizer, inspired by the amazing Patatap. Users can draw their musical “worms” on their phones. Shapes and curves would be translated into sound and then plugged to the last segment of the collective worm. The final result would be a collective piece of music and drawing.

b) Help the Tribe
A Lemmings-like game. Users control virtual bars from their phones and should help the “tribe” — a bunch of rolling balls or polygons — overcome the obstacles and reach the final goal.

Final Project – Proposals

Proposal #1
a) Precedent
Visiona 2 is an exhibition created by Danish interior and furniture designer Verner Panton in 1970. It was comissioned by Bayer and took place in a boat rented by the company. Bayer  wanted to create a showcase for its artificial fibers, inviting artists and designers to show its possible applications. Panton designed a hypothetical future with organic forms and vibrant colours. The rooms are also filled with smells and sounds, remaining as a still impressive example of experience design.  3156 2555 304K All images: Verner Panton

b) Idea
Translate some of Panton’s installations to virtual reality. A brainwave sensor could be used to trigger unexpected interactions with the environment — change colours and lightning, move shapes, etc. Kinect sensing could be added to make walls and objects even more responsive.

Proposal #2
a) Precedent
In the Woods is an interactive installation by swiss designer Camille Scherrer. It combines computer vision and projection mapping to recreate users’ shadows as silhouettes of animals. The half-imaginary creatures are also programmed with simple animations to interact with people.

a) Idea
A In-the-Woods-like world, with multiple shadows of the user. A Kinect can be used to track his/her movements. Animals choice can vary according to the mood, read through a brainwave sensor.



Mini project: focus on design/narrative make a “self-portrait”, 15 secs long communicate something about you…due on APRIL 4th.

A 15-second narrative with organic elements, code lines, numbers, and basic shapes, following this order.
The scene might be interpreted both as a representation of things I’m working on/interested at and as subjects/aesthetics that I feel trapped in.

04 03 02 01