Monthly Archives: December 2015


Project 2

The goal of my project is to create a sense of otherness using familiar objects that we associate with social divisions. Making use of red velvet rope and a red runner carpet, the idea is to divide a hallway in Heimbold in a meaningless fashion that gives an air of legitimacy. Then all that’s left is to see what people do with it.



I am gathering materials (trying to work with the theatre department to keep my budget low) and will install next semester.



Project 2:: Alien Solar System:: Post Mortem


For my second project I chose to create an alien solar system. My solar system has eight planets rotating around the sun. I also integrated my sunspots code from earlier in the semester and used it to create both sunspots on the sun and twinkling stars in the background.

I ran into several difficulties with my code while creating this project. Originally I had a flawed understanding of multiple transforms and made the mistake of having each planet translate to a different place. Once I fixed that I ran into another issue; all of my planets were rotating around the sun in straight line. The solution for this was to have all of the planets rotate at different speeds. The code I used to create the sunspots and the stars uses multiple transforms and randomness to determine the size and location of the sunspots and stars as well as the color of the sunspots.



By far the biggest problem that I ran into was the interaction that I wanted. My ambition was to use code to create a new planet of a random size and color every time the user clicked down. However, the mousePressed() and keyPressed() codes only work while the user holds down the key or mouse and would create a planet whose size and color fluctuated. I was unfortunately unable to fix this problem.

However, even without the interaction that I wanted to create, this code is extremely interesting to watch. Ever changing, it transfixes the audience and creates a magic circle.



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

Post Mortem: Project 2:: Magic Ball


For my second project, I created a magic ball that is a spin off of a “magic 8 ball.” Instead of shaking the ball and getting an answer to their yes/no question, the user will click the ball and it will generate a random answer to their question. Some of the phrases I used range from “signs pointing to yes” to “definitely not” to “cannot predict.” I chose several simple answers because they are applicable to any yes/no question.


I wanted to design something that people of all ages could interact with. I feel like this project did a good job of achieving that because it creates a low barrier of entry for the user. They don’t have to say their question out loud, but can keep it to themselves. Even though this interactive is very easy to use, it still generates a fun outcome for the user. They won’t always get the same answer to their question, so it creates the element of surprise. I think that this enhances the playfulness of the project because its’ outcome is unexpected.

Something that went right was the rough build. I had originally developed a rough prototype very fast. The random text selector was the main function of the project, so coding this aspect was simple. After I had developed the foundation of my project, I had trouble finding the right ways to capture the user into mystifying mood.


Along the way, I made many improvements to the design of the project. First, I started with a ball that generated colors randomly. I changed the palette of the colors to be more concentrated towards blues and purples. I think that this improved the overall look because all of the different colors changing at a high frame rate were overwhelming to the user. This makes the overall feel seem more relaxed. In addition, I played a lot with different fonts. It took me a while before I found the right one that would capture and transport the user to a mystifying mood. The font I chose resembles an old fashioned, traditional type face, that kind of reminds me of the time period of the Salem Witch Trials. I thought that this was perfect for the design of the project because it definitely helped create a magical atmosphere. Furthermore, I made the stationary stars move across the ball. I think that this improved the bewitching effect I was going for because it made the interaction more interesting. Finally, another change I made was that I added a border around the magic ball. I wanted to stick to the blue and purple color palette that I had created, but enhance it even more. So, I decided to create this border in photoshop. I drew ying yang signs, stars, and moons to add to the mystifying, cosmic theme. I think that this makes the project look more unique and interesting because it creates a lot of detail for the user to look at, without feeling overwhelmed. In addition, it helps clarify the interaction. It implies that there will be a “magical” interaction, like a crystal ball predicting the future, without explicitly saying what is going to happen.

I think that this project creates a magic circle because people can chose to use it in groups or individually. If used in a group, the users can ask questions together and see if it was what they had expected. If used individually, users can compare their answers with their friends or even people they don’t know. This forms more interactions between people and therefore, creates a magic circle.

I think that my project fits into de Waal’s ideology because it falls under the category of a “sensible city.” The design of this project is to provide people with answers to their yes/no questions. While it can be seen as something very straightforward, it can also be thought in a different way. I see this project also being able to fit into de Waal’s ideology of a “flaneur city.” This project has an element of mystery in it because the whole idea is based on the unknown. This aspect allows the users to see it as a fun experience that can be new every time.


I’m happy with the way that it turned out because I think that it looks playful and interesting to the user. I’m really glad that I was able to achieve a design that accurately portrays the interaction because it makes it more enjoyable to use.


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.

Conference Project:: Post Mortem:: Aura Mirror

conference_image2_fixedMy conference project has changed dramatically since its inception. Originally a Heads-Up Display with a motion-activated target my conference project has turned into an aura inspired by the artist Hilma af Klint. Hilma af Klint was a mystic whose paintings often represented complex spiritual ideas. She specialized in abstract art, and she belonged to a group of women who performed séances to contact the “high masters”. Hilma af Klint created a series of paintings known as “the Swans” which included split canvases with high color contrast representing invisible forces in the inner and outer worlds.


The Swan (No. 16) by Hilma af Klint     The Swan (No. 17) by Hilma af Klint

Continuing this spiritual theme I started to use the idea of an aura, which is a distinctive atmosphere found in our world. Like in various paintings from Hilma af Klint, I started with a half black and half white background, using at first one and then eventually two motion activated circles to represent the auras of the people around the computer’s camera. To create these circles I used the motion activation studio code provided for our class. I also used the circle shape changing code that we learned while making mouse toys.

I ultimately realized that the circles did not represent the aura of a person satisfactorily. Instead I started focusing on the background to show the active aura, continuing to use af Klint’s classic idea of contrasting colors pushing against each other, but altering it so that the background has a different shape and colors that keep changing. These colors show the ever-changing environment around us and how different energies in the world push against each other. I kept the motion-activated circles but changed them dramatically. The circles, which were originally color changing were set to two different shades of blue. They were also duplicated so that each of the two circles had two shadows of the same color surrounding it. They now represent the outside forces that disturb our world in different ways.


The final code falls into the category of a play ground/ magic circle. My creation generates a magic circle because it hypnotizes users and draws them in. They seem to be especially interested at the times when the colors change and the screen almost seems to glow. The code creates a playground by creating its own goal and imprinting spiritual culture. I had a great deal of fun creating this project and experimenting with many different color-changing codes.

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.




Post Mortem: Conference Project:: Black and White Euphoria

Screen Shot 2015-11-30 at 2.44.50 PM

For my final conference project, I designed a web cam that picks up motion detection. When the user moves, the black and white pattern on the screen will move too. This makes the design evolve further because the user keeps on changing it with their movement. Every minute, the pattern changes into a new one with different sized shapes with different levels of transparencies. This keeps the user more engaged because there are more surprises in how the pattern will change.

I was inspired by the artists Bridget Riley and Ryoji Ikeda because they both primarily work in black and white to create complex patterns and designs. I really admired their styles and I wanted to create a project that resembled their artwork. I think that I was able to accomplish that because I created ten different black and white patterns that are similar to their style.

Creating this project took a lot of planning and time because I had to create ten different patterns. I also got to play with it a lot and test it out. I found it really fun to play around with because it always surprised me. It doesn’t always have the same outcome because the user’s motions will be different every time. This shows that my conference project is abstract and will always be evolving into something new as each person uses it. I decided to have each shape move at different speeds. This added to the abstract element of the project because the pattern doesn’t move in uniform. This means that the user can’t anticipate when the pattern will shift or how it will shift.

Screen Shot 2015-11-30 at 6.53.13 PM

The code of my project involved a lot. First, I imported video into processing, so I could use motion detection through the webcam. Then, I created different variables for each shape within each different pattern. I had 90 variables in total. After that, I made a list of all ten patterns. Within each pattern, I had a section that specified the speed of each shape and how fast it moved, based on the motion detection. For example, I could say that a certain ellipse would move every three seconds, while a different ellipse would move every second. Following this code, was the list of shapes within the pattern. Under void draw(), I wrote the motion count and specified the order and duration of each pattern.


After looking back at Martijn de Waal’s ideology, it is clear that my project falls into the category of a “playground/magic circle.” This interaction that I’ve created offers a site of play, is a voluntary activity, isn’t rational, and forms community. This means that it is more open ended to how people will use the interaction. The user can move in front of the webcam by themselves or with other people. This displays the potential to create a magic circle. If multiple users are in front of the camera at the same time, they can create a different pattern together. This could increase interaction between people because they may choose to work together. For example, they could try to move the shapes to one side of the screen or to hold still to see the pattern freeze. Since the project is very open ended, there are so many things people could try to do with it.

Overall, I had a lot of fun making this project because I really like the idea that it can evolve into something so different and abstract every time. I also really enjoyed deigning black and white patterns because I love the way that they look.

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).