IXD Lab Final

Olivia Shoucair
IXD Lab Process Blog
4 min readMay 1, 2017

Part I: Animation

The first step for this project was to create the animations. The method used was very similar to that used to create my ‘Sketch Goldfish’ animations. I first had painted several key frames of each plant’s yearly lifecycle.

I imported each scan into Photoshop and then used the quick select tool to isolate each frame as its own psd file. These images were then cleaned up and given a transparent background. The ‘quick export as png’ feature was then used to produce individual png files.

I dragged each file into After Effects, and staggered each frame so that then appeared in a gradual sequence. I also used the opacity to have each frame fade in and out and the same time to create a more soft effect. I did this for the letters ‘d’ ‘i’ and ’n’ to create three individual mp4 files.

Part II: Processing

Once I had the animations, I had to create a processing sketch that put them all together and mapped each animation to a specific key on the keyboard to make it interactive. The first step was setting up my animation files in the ‘data’ folder of my processing sketch.

Next, I set up the size and color of my background. As my goal was to have this eventually appear on a projector, I chose fullscreen and a white background. I then defined the movies within the sketch, so that I could later define when and where each was played.

I then set up how each movie would appear on the screen, including the location in pixels, and the boolean condition upon which it would be played. In this case, if a certain key was pressed, the animation would be displayed.

Next, I finished the code required to play each movie file with the ‘movieEvent’ function.

Finally, I mapped each animation to specific keys with the ‘keyPressed’ function, and one letter to a click with the ‘mousePressed’ function. I made sure to specify that the animation play when the keys were pressed, as well as that they restart.

Part III: Tangible Input

To further the meaningfulness and deepen the interaction for this project, I chose to use the Makey-Makey to connect live plant specimens of the species featured to the key commands specified in my code.

The installation of the Makey-Makey was actually quite simple, as it immediately maps its own input to the following keys on the keyboard: UP, DOWN, LEFT, RIGHT, CLICK, SPACE.

All that was left to do was to connect the plants to the Makey-Makey with alligator clips.

If a user holds the metal clip that connects to the grounding input of the Makey-Makey, and then touch the plant, this closes the circuit and triggers the coded animation. I chose to insert the alligator clips into the soil rather than the plant for aesthetic reasons, and found that as long as the soil was thoroughly soaked, it was conductive enough to connect to the plant and therefore to a person’s hand to complete the circuit.

--

--