Tag Archives: interactive city

Project 1 Post Mortem :: Your Choice

We installed the project in various spots across the 2nd floor of Heimbold. Printed the photos and price tags, we stuck them onto the wall with double-sided tape. We installed five different groups of juxtapositions:

Milk OR Organic Milk?

Milk OR Organic Milk?

Eggs OR Organic Eggs?

Eggs OR Organic Eggs?

Coke OR Juice?

Coke OR Juice?

Canned Tomatoes OR Fresh Tomatoes?

Canned Tomatoes OR Fresh Tomatoes?

Frozen Blackberries OR Fresh Blackberries?

Frozen Blackberries OR Fresh Blackberries?

We took photos of different commodities in Stop & Shop near our campus. Afterwards, we put them into Adobe Illustrator to posterize them, in order to make it look less like actual photos. When printing these images out, we faced the problem of finding appropriate printing paper that works with the school’s printer, but that was easily solved, just a matter of time. The photos were then framed with photo mattes to signify the integrity of the projects.

Our idea did go through many transitions and changed a lot over time. We are glad our project turned out the way it did.


Kadie Roberts and Yuci Zhou

Project #2 Update :: Raining Wall

The sound level of the surrounding environment controls how heavy the rain is.

The sound level of the surrounding environment controls how heavy the rain is. Note: this is only a GIF demonstration of the interface. 

Currently, I have worked out the interface for this project. I used a dark background color and a light color for the rain. The rain is generated by a particle system in Unity. The physics system allows me to simulate more realistic rain by creating splash effects using the die out animation for each particle, as well as bypassing any object in the interface.

The other feature of the interaction is the ability to respond to the sound of the surrounding environment. The microphone could capture the sound level of the environment and pass on the parameter to the particle system. The rain would be heavier when the surrounding environment is noisy, and vise versa.

I still need the technical solution to connect Microsoft Kinect to my interaction in order to make it interactive when people standing in front of it.

Post Mortem: Project 1:: SLC in You

This is the final installation of project one.

This is the final installation of project one.

Installation Process

Our installation was very simple. We attached each mosaic print to to the wall with tape. For the wall text, we printed out the question “Do you see yourself in SLC? Do you see SLC in yourself?” This was then attached to a long piece of styrofoam and taped to the wall. It was placed in the middle of the two prints. Our installation space was near the elevator and staircase on the middle floor of Heimbold. We chose this space instead of the original space we were assigned to because it allowed the viewer to step back farther. This enhanced the user experience because it allowed the viewer to see the illusion of the mosaic better. It also had a lot of natural lighting in the space, which made the details in the project easier to see.

This is final mosaic of the SLC sign, using various photos of the SLC campus and students.

This is final mosaic of the SLC sign, using various photos of the SLC campus and students.

This is the final mosaic of a student, using various photos of the SLC campus and students.

This is the final mosaic of a student, using various photos of the SLC campus and students.

What went right?

For this project, one of the main ambitions was for us to create something visually artistic. Though we juggled with various possibilities of what we could create artistically, it remained a staple in how we wanted to present our juxtaposition. The fact that we were able to maintain an artistically clever presentation was a success for this project. It was a greater success that our photographic mosaic turned out as well as it did. The final posters were detailed enough to be able to distinguish the smaller pictures that formed the greater. A fear we had while creating the posters was that the resolution would not be generous enough for people to identify the smaller photos, rendering our posters giant pixelated images.


What went wrong?

The major shortcoming of this project was the amount of pictures we took. We took enough to satisfy a minimal color palette, but our goal was to incorporate many student profiles in order to create a better representation of the student body and produce something more people could identify with visually. It took more effort and time than we had expected to ask the individuals we did represent, proving we had underestimated our ability to create a portfolio with many profiles. In the end it did not matter as much since the posters still came out clearly with all the people we had included somewhere. However, it would have created a better impact if more of the student body, and maybe even the facility, were portrayed among the smaller images. Another issue with the project was that we had problems printing. The first campus mosaic we had printed was on a shiny paper and the color came out very dark. We reprinted the mosaic of the campus to match the paper and texture of the student mosaic.



Project #2 Proposal: Stress Catcher

A drawing of how the bubbles would look.

A drawing of how the bubbles would look.

For project two, we are planning to make a stress catcher. The design of the project will be to have an electronic representation of bubbles.  Within each bubble, there will be an image or word that conveys something stressful. For example, common stressful elements that are relatable to students include tests, homework, alarm clocks, parents, tuition bills etc. This will help display specific stressful aspects in a clear way to the user.

This acts as a catcher because it is transferring the user’s stress away from their body to the program. When the user clicks on the bubble, it will pop and disappear, providing a simple reaction to their input. We decided to choose bubbles since bubble wrap is commonly associated with relieving stress. Many find popping bubble wrap to be a therapeutic act, and so we wanted to recreate this interaction to catch the stress of others. In addition, we chose to use bubbles to act as the catcher because when people feel stressed, they often describe they way they are feeling as being physically trapped. A bubble is the perfect representation because it acts as a confinement.

This project connects to Anthony Dunne’s project descriptions in his book. In Hertzian Tales, Dunne points out that ‘Informance’ aims to persuade an audience that a product fits and has a place. But here the aim was not to convince an audience of need, but to draw them into a ‘what if…’ scenario, a ‘value fiction’ to stimulate desire for change” (Dunne, 128-129). This relates to the idea of a catcher because the purpose of this project is to create an object that can figuratively catch something that isn’t necessarily valued. Our design involves bubbles that capture a person’s stress. This project isn’t based on need, but is a “what if” scenario because stress is an emotion and therefore isn’t tangible. This increases the desire for change because people will want to change the levels of stress they feel by popping the bubbles. The idea of capturing people’s stress in an electronic representation follows Dunne’s guidelines in this chapter.

Popping bubble wrap is  common stress reliever.

Popping bubble wrap is common a stress reliever.

The project is interactive for the user because they will be able to visually make the “stress” go away. The program will provide a continuous supply of bubbles for any amount of users and any amount of stress.


Project 1:: Proposal Update

After the in-class critique, we decided to make a few changes to our project. Originally, we had planned on creating two photographic mosaics that formed one large photo of a student and one large photo of the SLC campus. We planned on bringing attention to the student-college relationship by this juxtaposition. After the feedback we received, we changed the direction of our project.

A test image we ran to see how well our collection of SLC photos could recreate an image.

A test image we ran to see how well our collection of SLC photos could recreate an image.

Close up of the same image.

Close-up of the same image.

The biggest change was the text. Previously, we were going to put the question “Who benefits more? The student or the institution?” in between the two photographic mosaics. This question was intended to make the viewer think about what students were receiving by going to college and what the college was receiving from the student. We intended to raise conversation around the idea, but not to pit each party against each other. During the critique, our peers noted that the question did not positively reflect itself through the project. It also didn’t relate to the photographic mosaic style that we had chosen to use. The visual did not correlate with the conceptual. Each aspect pulled the viewer in a different direction.

The new text we are going to use is, “How much of SLC do you see in yourself? How much of yourself do you see in SLC?” This moves the focus of the project to the actual images that make up the photographic mosaic. The visual aspect and the conceptual aspect now have a correlation that compliment each other. This new question strengthens our social object because it will increase the interaction present. The question influences the observer to look more closely at the smaller images in the mosaic because they want to see if they recognize any familiar faces. This will enhance the social experience because people will want to find faces they know and they will talk about it with their friends.

An example a student photo that will be used. Notice how the image is primarily green.

An example of a student photo that will be used. Notice how the image is primarily green.

In addition, another change that we are planning to make to our project is adding more faces to the photographic mosaic. This will increase the viewer’s interactions because there will be more of an opportunity to find someone familiar.

Garrett and Alexa



Project 1: Update 1:Can you see the real me?


Display of the wall

Over the last two weeks, we have been working together and as a class to revise and enhance the final outcome of our analog project entitled “Can You see the real me?”. When we presented it for the class we had a lot of positive reactions.

The class liked the idea of using Polaroid film instead of regular pictures on a digital camera since Polaroid pictures do a good job of capturing real moments without being able to go back and revise or re-do them. They also like the idea of creating a social object our of pictures of their peers because it is nice seeing familiar faces on the wall.

Format of the question

Format of the question

Along with the positive comments on the project, there were many revisions we came up with as a group in order to create a successful analog project. These kinds of analog projects require a lot of thought and effort to execute successfully. Some of the revisions we have done to the project are as followed:



The wall we will install on

1) Remove the title from the wall in which the Polaroid pictures will be displayed on. It was too much of a distraction and took away too much of the projects meaning. The question between the sets of Polaroid pictures is meant to create enough though that we don’t need to add another question( Can you see the real me?) on top of all of the juxtapositions.

2) We decided that the best way to attract people to participate in our project is to create a Facebook event that invites our friends and classmates to Heimbold to take pictures. This way, it is easier and quicker to spread the word, and we have found that people respond positively to those sort of Facebook events.

3) Before we presented our idea to the class we were very vague on how many Polaroid pictures we will be using. We then decided that 100 Polaroids would be a good about, that means there will be 50 people participating in the project. This amount will make for a display that is pleasing to the eye and has enough diversity within the pictures that people will be able to recognize more people, and as a result create a better social object.

These changes will lead to a better and more precise project.  Our goal is to create a social object through juxtaposition that will lead the community to ponder with the ideas of labeling and judgments.



Polaroid film we will use

Post Mortem: What’s Your Love Story


“What’s your love story?” was uninstalled today.

It had a wonderful run!  We installed the Friday before Valentine’s Day, painting a broken heart across from a full heart in a small hallway in Heimbold.  The hearts were both pink.  The full heart said ‘What’s your love story?’ in the middle, and the broken heart was left empty.



We had a square of wall text and a small container taped to the wall filled with chalk for people to use to write on the hearts.  


Wall Text

First we taped out, freehand, both hearts.  Painted the full one, then painted the broken one.  They were not perfectly identical, but I don’t think it detracted from the actual piece in any way.  


Once painted and dry, neither Kadie nor I contributed.  We left it completely blank.  Slowly but surly, people started to participate.  People were responding really well to the prompt and understood that the broken heart was for heartbreaks/sad things and the full heart was for happy things.  Sometimes there would be a random mismatch statement, but other than that, I think it was a clear project!  

IMG_1330 IMG_1333

Our interaction worked exactly how we thought it would.  It was more successful than expected, actually.  Both hearts were full by the time we uninstalled.  There was little to no crass or demeaning things written, and other than a few people, anonymity was kept.  Kadie and I erased any names that people wrote on the hearts because we wanted it to stay away from that.  

IMG_1351 IMG_0616 IMG_0565 IMG_0613 IMG_0612 IMG_0617 IMG_0620


Our interaction definitely created a magic circle.  We would see people stop in the hallway and talk about the heart, and then contribute.  It also created a sense of unity because of all the people that contributed to it, even if they weren’t contributing or interacting directly with each other.  It also was a social object, because people would stop and talk about it and also talk to Angela about it.  

What went right:

  • Perfect color.
  • Chalk worked, was cheap and easy.
  • People participated!!
  • Did not get stale!

What went wrong:

  • Took longer than expected to actually get from start to finish.
  • Development process took a while.
  • People that don’t come to heimbold did not interact with it.

We learned that analog interactions take a lot of time and resources, and there tend to be more steps involved.  Regardless, our first analog interaction at Sarah Lawrence was a success, so that is good!!

Thanks to everyone who participated, especially to those in our class who participated! Yay!

Project 2:: Stagnation:: Post Mortem

A picture of the first of the three codes.

A picture of default stage of the first of the three codes.

A picture of the second of the three codes.

A picture of the default stage of the second of the three codes.

A picture of the third of three codes.

A picture of the default stage of the third of the three codes.

For my second project I really wanted to explore the possibility and result of creating an entirely useless interaction. I was inspired by the popular GIFs of Useless Machines from the internet that portrayed a box which was programed to turn itself off once a switch was flipped. However, the code for my project does not explicitly recreate the material box and switch. What the several codes I created do is utilize a single button which triggers a reaction from the code that quickly returns the button to its original state.

All three iterations of the code create a futile interaction in some way or another. The first code relies on the position of the button. The button is centered in the center of the screen and moves slightly to the left when pressed. The code’s reaction is to send forth a small gray box which pushes the button back into its original location and then returns off screen. The second code relies on the color of the button. By pressing the button, the user causes it to change colors, but almost immediately the code repaints the button its original color. The third iteration of this theme relies on the size of the button. Pressing the button reduces the size of the button, causing two pieces to come from either side of the screen attaching themselves to the smaller button returning it to its original size. To create several futile actions that did not stray too far from each other, I worked with the location, color, and size of a single button.


My initial coloring of my Stagnation code was in black and white. This produced a very minimalist effect to the already minimal composition, but while experimenting with further drafts of the code I found that certain color pallets also proved effective.

The black and white copy of the first code.

The black and white copy of the first code.

The black and white copy of the second code.

The black and white copy of the second code.

The black and white copy of the third code.

The black and white copy of the third code.

The color pallet from which I sampled to create the colored copies.

The color pallet from which I sampled to create the colored copies.


The idea of a futile interaction is very reminiscent of the products and art installations described in Anthony Dunne’s Hertzian Tales. Specifically, I find a great resemblance to the chapter on psychosocial narratives, which talks about the experience of the user. In this chapter Dunne describes the relationship between humans and machines with the quote “The machine does what the human wants it to do, but by the same token the human puts into execution only what the machine has been programmed to do” (71). This describes a complementary relationship between machine and user, which leads to the question of what to expect when the machine has been programmed to antithesize the human’s input. By the logic of the quote we must expect nothing from both the human and the machine, which is the stagnant quality of the interaction.

What went right with this project was how I captured the essence of a useless interaction. In the beginning of the planning for this project, I was not sure if was going to try and recreate the box setting or attempt to create my own useless interaction that brought the user nowhere. In the end, I had a combination of the two in creating a button that was represented in an artistic way. While researching the invention and history of Marvin Minsky’s Useless Machine, I came across an app for the iPhone which was allowed users to play with a virtual Useless Machine. However, after installing this app I found that while the creator had recreated the Useless Machine, they had not successfully recreated the futile interaction. The creator had implicated a counter which counted the number of times one went through the cycle of pressing the switch and had it pushed back. This gave the interaction a form of progression, which I felt entirely destroyed the purpose of the Useless Machine, and only motivated me to fabricate a truly fruitless interaction.

Nothing really went wrong with this project. The only problem I had with this project and the codes was a technical one. Everything else went above and beyond the expectations I had when first starting. The small problem occurred during the third iteration in the series. I had assumed that both fixing pieces, which attach to the button to make it whole again, moved at the same speed and would arrive at their destinations at the same time. However, the left piece moved faster than the right causing a complication in the conditionals. This small glitch was easily fixed, and other than that there were no problems at all.


Works Cited:

Dunne, Anthony. Hertzian Tales: Electronic Products, Aesthetic Experience, and Critical Design. Cambridge, MA: MIT, 2005. Print.

Project #2 :: Post-Mortem :: Restroom Museum of Art

IMG_0610 IMG_0609

My second project is an analogue interactive display installed in Heimbold Bathroom. The project involves transformation of the bathroom into an art museum with famous minimalist paintings displayed in it. The users of the bathroom would look at the art as they use the facility and leave signature on visitor’s page, just like any other museums.
This project was created to communicate sense of irony in art. Public bathroom is a setting void of any beauty nor luxury. What would it be like to display famous art of high price and beauty in the bathroom? It seems very odd, weird, and out of place. I wanted to communicate the sense of irony in space through the installation.
My project was inspired when the class was discussing idea of irony in media in Herteizan Tale. When I came up with the idea of having fancy art in the bathroom to convey irony, I wanted to make it come alive.
I chose abstract art as my choice of display because the art form is very direct in its message and style, easy to be recognized by general viewer. The paintings I replicated were: Mondrian’s “Red Yellow Blue”, Rene Magritte’s “Son of Man”, Jackson Pollock’s drip painting, Kelly Ellsworth’s “Yellow over Black”, Kazmir Malevich’s “Airplane Flying”, and Keith Haring’s “Heart Raised”. I also replicated the style of each individual artist’s signature on the painting to make the painting seem more realistic.

IMG_0601 IMG_0602 IMG_0604 IMG_0605 IMG_0606 IMG_0608
The most difficult part of the project was defiantly painting replica of art. I had to be as precise as possible so that the art communicated the original creator’s messages clearly. In order to do so, I had to copy the art as exactly as possible. Even though the art was simple in design, I had to be careful with small details which made it really difficult.

What I found really surprising is that my first draft of the project has not changed much from my final form. The only difference is the number of art planned to be displayed and creation art. I was hoping to display at least 5 arts in each bathroom but that was too much. Also instead of purchasing a replica poster of art, I painted all art to give more realism.

One issue that brought up during the project was that the display could be limited in interaction. Sure, the usage of bathroom creates sense of irony and that is what it was planned to do. However, it is a very passive interaction between the environment and the user. In order to make the display more interactive, I added a guest log book. This was perfect because not only did it add more interaction to the display, it added realism and fulfilled the basic idea of interactive media: the give and take relationship between the media and the audience.

IMG_0611 IMG_0615
I believe that the project creates a magic circle because the display leaves a permanent connection between audience through visitor’s log. The guest log informs the audience who came and how they felt about the display. In addition, the display creates unified emotion among the audience, creating connection of thoughts, increasing interactive senses between strangers. The viewer can break into conversation in such a private space to talk about the art and their feeling, which effectively creates magic circle.

Overall, I am very happy with how the project turned out. Using new medium of art besides coding was very fun. I was able to explore different forms of art and go over some of the ideologies the class discussed about.

Project #2 :: Post-Mortem :: Ohio, Ohio.

Screen Shot 2015-12-14 at 8.23.59 PM

For Project #2, I chose to make a solar system of sorts with the cities/neighborhoods where I live.  This project probably had the most evolution from day one until the final product.  Originally, I wanted to do something that had to do with where I’m from, but I had little to know idea what I wanted it to be.  During a conference, Angela mentioned something about a solar system…so we decided on that.  Then, I was brainstorming ways I could work the names into the solar system, and remembered that I had really liked the way Garret was able to draw the fish by hand and put it into his conference project.

I really like playing around with hand lettering, so I thought that it would be fun to do my hand lettering and insert it into my code.

I worked to sketch out all the names, then I edited them in photoshop which ended up being the most tedious task on earth.


Screen Shot 2015-12-14 at 7.02.19 PM



I wrote my code in bits.  First, I got the background that I wanted (made in photoshop), and then I worked on getting shapes such as ellipses or rectangles to rotate on a circular path around the center of the screen.  Then I wanted to add rotation to each of the individual shapes.  In order to do so, it was necessary to use the pushMatrix and popMatrix.

Once I had that code down, I went to work in photoshop to perfect my ‘planets.’  Afterwards, I went and added image variables and changed the shapes in my code to the images.

shortnorth grandview germanvillage

Next, I had to work on adding interactivity.  This was the hardest part.  First the issue was that the only way you could see the object (rocket) moving across the screen was if you pressed and HELD the spacebar.  But I wanted it to just be pressed and done.  I had a lot of trouble figuring this out and it kept saying ‘error on ‘void mouseClicked’’ for some reason.

Screen Shot 2015-12-14 at 6.55.52 PM

I really enjoyed making the project because I was able to combine my interest of hand lettering with my code.  I think that this creates a magic circle because it draws people around to form a community of interactions with the code.


What went right:  the way that I created this project was really helpful.  To figure the code out first, and then insert the images really worked for me.  Also, it turned out how I expected.

What went wrong:  It took me a long time to figure out the interactivity aspect of it.

Project #2 :: Post-Mortem :: Draw Your Moves

Screen Shot 2015-12-14 at 6.57.43 PM    Screen Shot 2015-12-14 at 6.56.17 PM

My second project is basically digital finger painting, so I decided to title it “Finger Painting.” Using motion code, you can move your hand in front of the camera. By clicking with the mouse you can change colors and by clicking a key you can clear the screen to start over. The lines on the side also change color so it’s more clear what color you’re using and they add some extra fun and color to the project. When you move you draw with two circles. One smaller circle sits inside the bigger one. They are set to random transparency to make the drawing look a little more interesting.

My inspiration came from one of our in class assignments with motion track code. My project evolved from the class assignment, I changed a lot but some ideas stayed the same. I kept the same background color the same and the idea of the two circles.  

Screen Shot 2015-12-11 at 7.32.29 PM     Screen Shot 2015-12-11 at 7.32.51 PM

I think this project will create a magic circle because other people will want to gather around and see what someone paints. I also think people may want to try multiple movements and ee how they work together.

I used a lot of coding skills that I learned from my conference project. I used the random number code to pick whether the paint color would be in the red, green or blue family. I also used a lot of variables again to inspire more creativity.

Screen Shot 2015-12-14 at 6.53.04 PM

Overall, I am very happy with this project. I have a lot of fun using it and I hope other people will too.

Kadie Roberts

Conference Project:: Please Disturb:: Post Mortem

A screen shot of the project while running.

A screen shot of the project while running.

The goldfish drawing with a transparent background.

The drawing of the goldfish used for this project.

The castle decoration drawing with a transparent background.

The drawing of the castle fish tank decoration used in this project.

The end result of this project is very different from what I had imagined when I first started planning this out. Initially, I believed I could create multiple environments which housed different species of animals, allowing users to experience the different mannerisms of each and weigh the variations. As the project developed, I realized my limitations and settled for my capabilities, but this does not mean my end product is any less than it should be. What I have completed is creating a fishtank environment with a single goldfish that responds to certain interactions from the user. The user can use the mouse to beckon the fish to a certain area, or input using the keyboard to cause the fish to retreat in fear. I set out on this project to present an opportunity for users to participate in both positive and negative interactions. The fishtank environment allows the users to either play with the fish, or disturb the environment, fulfilling my initial interest. I think it is interesting to see how people react to having the choice to either participate negatively or to participate positively/neutrally. Which reminds of the Usman Haques’s project Natural Fuse. This installation presented people with a flower box that was equipped with a watering device as well as vinegar. The CO2 from the plants would power electrical appliances, and so depending on the interaction the people had with the flower, they would either participate in a negative interaction or a positive one. The negative interaction being overusing the CO2 and releasing vinegar into the soil, while the positive action obviously being watering the plant. But what differs between Hasque’s scenario and mine is that there is no gain from participating with the fish other than subtle entertainment, whereas with Haque’s installation you are powering an electrical device. Also, there is no living thing’s life on the line.

What went wrong was that I had to settle. I have already mentioned how I reduced the number of environments I wanted to build, but I also settled in other ways. In the beginning I thought I could achieve animated animals that moved their legs, tails, and the direction they were facing. However, as I was unable to figure out a way to achieve all this, I resorted to a still image of a fish that was applicable to any direction it was moving. I also reduced the number of interactions I had hoped to include within this project. Instead of feeding, scaring, beckoning, and nudging, the user can only beckon and scare.

What went right with this project were many things. Firstly, the drawings I made for the fish, castle, and plants all came out well and better than I had hoped, and the colors worked in agreement with each other. Secondly, I was able to learn and utilize arrays to create random movement for the fish. Thirdly, the interactions I was able to incorporate represent a negative and positive/neutral interaction.And so while it is not the ambitious project I had first imagined, the work I finished with is still a perfectly functioning iteration of the project I wanted to create.

Garrett Hsuan


Conference Project :: Post-Mortem :: Find Your Mood

Screen Shot 2015-12-02 at 9.09.30 PM Screen Shot 2015-12-02 at 9.08.40 PMScreenshot of just the background, no emotion displayed. 

My final project is a mood guesser, entitled Find Your Mood. When you click on the screen it will guess your mood by asking if you feel a certain way. It will also display a color that’s usually associated with the mood and a font that has a similar feeling to the mood. There are ten different moods programed into the interactive. For the background I used a sparkle picture that I found and edited in photoshop. It also has green and purple blobs floating around, which I created in photoshop. I wanted this to be similar to a lava lamp. The circle in the center also slowly fluctuates between blue and purple. I did these things to the background to give a sort of magical feeling to the project. 

FullSizeRender-1 FullSizeRenderScreenshot with an emotion displayed.

My inspiration for this project was pretty random, it just kind of popped into my head. I really enjoy playing with mood rings and seeing what it thinks my mood is, so that’s why I thought this project would be fun. I also wanted something that was playful and that excitement came from visiting the Sony Museum. Since the interactions that I liked the most there were simple and playful.

This will create a magic circle because people want to share their experience and what the program guesses as their mood. Usually because it’s super accurate or way off. If something is funny or surprising people usually look for someone to share that moment with and I think that will draw people in and make groups of people try it and watch together. In Homo Ludens by Huizinga it’s said that magic circles are, “all are temporary worlds within the ordinary world, dedicated to the performance of an act apart.” I wanted to create this magical and mysterious other world that exists for maybe, just a minute, in someone’s ordinary world.  

The code for my project was difficult at first but I eventually got the hang of it. I didn’t really understand the concept of variables but now I use them for everything! They’re so useful. I also found that by use variables I was more likely to experiment and be creative. Without variables it was such a hassle to go through and change every individual thing so I wouldn’t mess around as much. After just using variables for everything I found it so much easier to get exactly what I wanted from the code.

Screen Shot 2015-12-02 at 9.33.18 PM  Screen Shot 2015-12-02 at 9.33.41 PMScreenshot of some of the code and variables being used. 

I’m very happy with my project, it is pretty much what I had envisioned. I also feel that I learned a lot of code and really got to understand it. I know that I’ll be able to use what I learned from this project in the future. The main thing that went wrong was that I originally had wanted the whole screen to change and have a scene showing things that made you feel like the emotion it was displaying, like a sunset and dolphins jumping for happy, but that ended up being too complicated. 

By Kadie Roberts

Interactive City :: Conference Project Post-Mortem :: Rise and Fall

code while running

code while running

My final conference code for this class is a shadow-wall.  I created an interaction with the use of the webcam and the use of shadows.  The way it works is that leaves fall from the top of the screen, and the user can interact with them by moving around.  The shadow that is created by their movement is what controls the way the leaves fall.  This is a electronic version of a typical way people play in leaves during the fall.

I developed this project through observation of a few things.  I was inspired by the season, fall, when I started thinking of conference ideas.  I noticed how excited people of all ages were about the change of the season.  I was walking to the library and was keenly aware of how the children at the ECC were playing with the fallen leaves.  These observations of human behavior combined with our trip to the SONY museum inspired my project.

When we went to the SONY museum, I was drawn the the final interactive, the shadow wall.  I really enjoyed interacting with this work because my actions had a clear and direct affect on the beads falling from the top of the screen.  I also noticed how accessible this interaction was with people of all ages.  It seemed to keep a child’s attention span as well as captivating the adults in the room.

Originally, I had wanted to add more of a societal awareness aspect to my project but after rough sketches and brainstorming, I decided that it was going to take away from the intent of the interaction.  I had wanted to have a cityscape gradually appear, minimizing the ability to interact with the falling leaves to show the way that the growing city can take away free play.  In doing so, I realized that it would take away a sort of innocence that I had liked about the interaction at SONY.

Once I had figured out what I wanted my conference project to be, I got to work.  The code that I am using is an array.  An array is a way to sort and recall information in an organized manner.  Along with this, I opened another class in my code that was being reference continually by processing in order to run the code.  I also had to work with motion code to get the leaves to fall down the screen.  I had trouble getting rotation code into my project, because I was adding rotation after I had written the whole code and for some reason it was not making the individual leaves rotate the way I envisioned.  Once I could not get the rotation the way I wanted, I worked to find a color palette and instead alter the color of the leaves to match the color palette.  I found a palette generator on the internet that I used to find my palette.




different classes

different classes

color palette

color palette

changing the color of my leaves

changing the color of my leaves

changing the color of my leaves

changing the color of my leaves

Regarding Martijn deWaal’s ideology, this shadow wall falls into the playground and magic circle school of thought.  My interaction is accessible to a large demographic, it is a voluntary activity and is not rational; it’s just there to play and interact with.


  • Created a shadow wall
  • Was able to have the leaves falling down
  • Used photoshop to alter the colors of the leaves to fit into a color palette.


  • Adding rotation
  • Sensitivity of camera
  • Unless all the leaves were at exact same level, they won’t restart to top of screen and code will stop running
issue with code

issue with code

Overall, I enjoyed working on this project and learned what I enjoy as an artist.  I think that this particular project was challenging for me because it forced me to work in a medium that was not necessarily my first choice.  I do not feel as successful with coding as I would like, and I struggle to continue working in mediums that challenge me.  But I stuck with this and I am hoping to modify my shadow wall further to better my work.

Interactive City :: Conference Post-Mortem :: Color the Can

Finally, this is how it looks like…

Screenshot of my final conference build.

Screenshot of my final conference build.

Whenever the user next to the computer claps or make a detectable huge sound relative to the environment, the first can on the rack will be randomly colored on top of its original red.

Initially I only wanted to challenge the idea of having a interaction where the input is visible and touchable, whether its the traditional keyboard or mouse, or what we have experimented with, webcam. Sound, however, is linear and cannot go back once initiated. How can I visualize sound, make it touchable via another form of perception? In Hertzian Tales, we talked about radiogeneric objects, which visualize electromagnetic signals. So, how about having soundgeneric objects that visualize sound?

I decided to use microphone to detect its volume. I learned about sound libraries and how to get live sound input from the book Learning Processing by Daniel Shiffman.

 Technical mechanism of my conference project: a recorder using Minim sound library. Eventually I switched to Sonia.

Technical mechanism of my conference project: a recorder using Minim sound library. Eventually I switched to Sonia.

I wished to do an arcade game in the beginning, something like whack-a-mole. Then I realized that I only have one variable to manipulate the whole interaction: the volume. Thus, I cannot even get full control over the canvas, let alone precise coordinate to hit the mole.

Then the question becomes: what action, or interaction, only involves one kind of input?

I thought about an assembly line.

Modern Times (1936)

Modern Times (1936)

Then I had my rough build, an assembly line of “shapes” that could be colored by user clapping around the laptop microphone. I used shapes because I wanted it to be more abstract (and also partly due to me not having an idea of the element I wanted to incorporate.)

My rough build: geometric assembly line (not really)

My rough build: geometric assembly line (not really)

Afterwards, I wanted to put some aesthetic elements into this work. I started by making a shelf, and then I thought about the Andy Warhol exhibition held at MoMA and how the museum installed the Campbell Soup Cans (1962.) Instead of hanging every picture on the wall, the museum put those pictures on racks, which according to its introduction, best imitated the style of supermarket shelfs, where the cans would usually be in real life.

The shelf that I started with.

The shelf that I started with.

Left: ordinary way of installing Campbell Soup Cans. Right: MoMA way of doing it.

Left: ordinary way of installing Campbell Soup Cans.     Right: MoMA way of doing it.

The idea of coloring the can is a challenge to consumerism. While the age of mechanization makes people on both ends of the world able to get identical products, difference becomes strangely valuable and in another way essential to the characteristic of being interesting. What if we can color the can to make them slightly different? Would it make them not identical to each other? Would it do anything to add some playfulness to this assembly line? What about other assembly lines and the endless supermarket shelves?

Anyway, we are still living in a world where every(affordable)thing comes out of an assembly line.

Interactive City :: Conference Post-Mortem :: Chasing Chi Chi


Screen Shot of Code Running

Screen Shot of Code Running

My final form of the conference project is an interactive game entitled Chasing Chi Chi. The player will try to click on the moving character named Chi Chi through touch pad, and chase after it. Chi Chi will bounce around from one side of the screen to other, speeding up every time it is clicked successfully. The player is given with 5 lives and every time the player fails to click on Chi Chi, the life reduces and after 5 failed attempt, the game will be over. The background changes depending on how much life is left, adding on to the excitement of the game.

The studio coding that I have used mainly was loadImage() code and mousePressed(). coding. The most difficult part of my project was that I had to hand draw the background, effects, and the character. I had to create all the art through Photoshop painting tool and drawing tablet. I was fairly new and putting concept into actual form was very difficult. The code beside the studio coding that I used was the Dir coding. In order for Chi Chi to bounce off the wall and move back and forth the screen, I had to command the coding to change direction and limit the range of movement.

Screenshot (59) Screenshot (61) Screenshot (62)

The final form of the project is very different from originally proposed design.  At first I wanted to create a Mario game like interactive display that only moves forward in map. I first wanted to use webcam but the coding was impossible to create so I switched to keyboard. However, I realized that using keyboard lacks physical movement enough to call it a true interaction The Psychology of Everyday Actions talks about, which emphasize on movement with awareness.

Since I am not using a Web cam and creating display vey 2D in a sense, I needed to design an effect in my display that will result in increase of physical movement. This resulted in usage of touch pad as median of interaction. Additionally, moving forward in 2D map was just so boring in interaction with no rewards. So, I decided to make it an interactive game which the character moves back and forth, demonstrating strong relationship with the setting of the game. The player then will affect the main character which result in alternation in background and setting as the interaction progress.

The project started off with my life long wish: create a game. I have always wanted to somehow create my own game and gaming is a perfect way to demonstrate interactive media art. When I saw the “Long March: Restart” by Feng Mengbo at MOMA, I immediately knew I wanted to create conference project like it. The “Long March: Restart” was my inspiration and goal.

Feng Mengbo: Long March Restart. Currently Displayed at MOMA

Feng Mengbo: Long March Restart. Currently Displayed at MOMA

The interactive display explores modern design integrated with in cultures. For Chasing Chi Chi, the background, setting, character design, and character movement were designed to introduce Kawaii-ism. Kawaii-ism is a design concept from Japan that emphasize on cuteness and girlishness, with pink and pastel colors playing dominant part of the concept. Kawaii-ism represent the unique and diverse part of Japan’s culture.

HelloKitty is a character resulted from Kawaii-ism

HelloKitty is a character resulted from Kawaii-ism

In New Media Art, it talked about how an art can become a symbolism and representation of a certain culture. The reward of learning a new culture of a country is the ultimate goal and it follows New Media’s “informational Interaction and its benefit to establishment of personal and social connectivity”. The project also follows idealism by Martin de Waal of Public Sphere. The strange new cultural medium is communicated and presented through media and through it, integrate new cultures and unify the interactor through new idea.

Overall I am very happy and proud of what I have created. Even though the interactive style have altered a lot, the message I wanted to present and the goal of project was reached.




Conference Project:: Final:: Music In Me

Screen Shot 2015-11-30 at 9.50.59 PM

 Picture of Sophia using the interaction “Music In Me”

My final conference project is entitled Music In Me. It’s an interactive art project which allows the audience to take a unique approach to listening to music. In this interaction, the user listens to Sweet Sun by Milky Chance as they watch the lyrics fall from the top of the screen, creating a shadow wall effect. This experience engulfs the user and immerses their sense of sight and hearing into an extraordinary musical experience.

At first, my conference project was very simple. I wanted to create a shadow wall, which is a webcam that gives the user the ability to control and move objects that fall from the top of the screen. After I gave my project more thought, I realized that there was no depth or meaning to it. I then came up with the idea to change the beads to a set of words and have them fall from the screen. After, I decided to make song lyrics fall from the screen and have the song play in the background simultaneously.

My inspiration for this project came from different places, one being the fieldtrip to the SONY Museum. I found that the shadow wall interaction they had drew me in the most because it did not require much skill to interact with, however, it was still captivating and entertaining to use. I liked how it created a magic circle as more and more people gathered around to watch the users interact with the shadow wall. I wanted to create a magic circle of my own and was inspired to create Music In Me.

A second inspiration I had came from the reading we did entitled “NeMe: Trouble at the Interface 2.0” by Erikki Huhtamo. In this article Huhtamo discusses his first experience with “interactive art” at the Ars Electronica Festival in Linz, Austria. He describes the intoxicating feeling he had when interacting with a project called The Legible City” by Jeffrey Shaw. In it he was diving and crashing through words and letters on a screen. I found the idea of being surrounded by words surreal and abstract, so I wanted to create my own version of Shaw’s unique and intoxicating interaction.

o               Picture of little girl using the shadow wall  in the SONY museum. Photo by: Effie D.

My project used some studio code and  some code I learned on my own. I used the studio code for a webcam to create a live image of the user in the background. I then had to learn to make arrays, which became very helpful for the falling lyrics on the screen. The last code I had to learn was for Minim, which is an audio player code.

Screen Shot 2015-11-30 at 9.54.14 PM

Screenshot of part of the code used to create the interaction.

 The main thing that went wrong in my project was the smoothness (or lack there of) of the words falling from the top of the screen. Although my code does what it is told, the words have a hard time falling from the screen if there is any sort of darkness in the webcam. The words will only fall from the top of the screen if it is totally white.

What went right was that I was able to create exactly what I had in mind when I first started writing the code. The music plays very smoothly and the words fall randomly from the top of the screen just as I had planned for it to do originally.

Because this code requires various different steps in order to put the final project together, I had to cut out some of the ideas that I had when I first started putting together this project. I was going to give the user three song options but it was too complicated to pull that off, so I cut that idea out and made it so only one song would play (Sweet Sun by Milky Chance).

Project #2 Update: Stagnation

For this project, I have been working on a growing concern I first had when working on this project. The major difference between the machines I am drawing influence from and the code I am working on now is that they are physical and three dimensional objects while my code is a virtual simulator. In fewer words, I am trying to translate a very physical interaction into a virtual one. Technically, I can recreate the interaction, however there is a certain quality that is lost. It is not as special if a machine has the capability to turn itself off. Part of the appeal of the useless box is it performs a task that is not expected. On the other hand, machines are expected to have the type of power to control itself. To me, the solution for this problem is to exaggerate and really draw out the physical aspects of this code. I have been working on putting together an interface that appears to be more material than electronic.

Several options for the types of input that can have a binary toggle.

Several options for the types of input that can have a binary toggle.

On a side note, this project has also taught me that there is a difference between a worthless task, and an impossible one. An impossible task only installs and perpetuates a sense of failure with the user. However, a worthless task, such as this, opens up a whole existential curiosity that draws users in.

Project #2 Progress: Magic Ball


For my second project, I’m making a “magic 8 ball” that predicts answers to the users’ yes/no questions. So far, the code that I’ve used incorporates a text selector. This allows the ball to generate random text when the user clicks on it. So every time they clicks on it, they will get a different answer than the previous time. This creates the effect that the ball is actually answering them because the generated answers aren’t consistent.

I plan to work on this project further by adding more details to the overall project. For example, I want to play around with different fonts and the design of the magic ball. I want the design to look captivating to the user. So far, I decided to have random colors flash on the ball. I think that this creates a mystifying aspect to predicting the future. I’m planning on evolving this design further by developing the base to make it look more realistic and adding more stars on the ball. In addition, I want to add more answers for the ball to give the user. I think that that would add more depth to the interactive aspect.

example2            example1

I think that this project has the potential to create a magic circle because it can involve more than one person. People can ask questions in groups or compare answers to their similar questions. If in a group, people can think of questions they want to ask collectively. I think that this project’s function is a universal idea because it is based off of a magic 8 ball. Therefore, it will be able to bring people together because of its’ familiarity. Although this project has the potential to create a magic circle, this may not always be the case because it is primarily targeted towards individuals. For example, a person would ask the ball a question in their head and then click to find out the answer.

Wether used by individuals or groups of people, or even both, I hope that this project is fun for people to play with. People usually are intrigued by finding answers to the unknown, so I think that people would enjoy using this light hearted way to predict the future.

Project #2 Update :: Draw Your Moves

Screen Shot 2015-11-16 at 8.05.23 PM   Screen Shot 2015-11-16 at 8.00.21 PM

I decided to change my project to a digital interaction instead of an analog one, since my project #1 was an analog interaction. So my idea for project #2 is to use motion code to move colored shapes following the user’s movement but not clear the background, so it’s kind of like they’re drawing with their movements. I think this would be fun because it’s seeing your movements displayed and creating art. It’s kind of like the colored circles on the floor at the Sony museum, you and your movement was represented but you didn’t actually see yourself. This way I think it distances the user a little bit so they can feel free to have fun and enjoy the interaction.

I think this creates magic circle because multiple people can contribute at a time. People can interact together and others can watch or add to it. The audience can observe what happens when someone else tries it and then maybe try it themselves.

The photos are a rough prototype, I think I will change the colors, shapes and sizes to make it more appealing. I also want to make it more clear when you move a certain way there’s a specific outcome. 

Kadie Roberts