Author Archives: Garrett

Conference Post Mortem:: Wave Clocks

The final collection of wave clocks I finished with for my conference work were a much more polished portfolio than I had started out with. In the beginning, I had five sketches, each representing five different themes. In the end I had cut down my collection to four sketches, each still with a separate theme. The finished sketches were also better versions of themselves given that they were more visually coherent. The idea behind this conference project was to create several themed wave clocks that successfully articulated the emotion behind their respective names through color and presentation. As finished pieces, I feel confident that each sketch does exhibit the nature of its real world counterpart. Pineapple
A still from Pineapple.

A still from Pineapple.

The first sketch I worked on was Pineapple. Given an interesting swatch of browns, greens, and yellows found on Adobe Kuler, I felt inspired to create a wave clock around the tropical fruit. From the start I knew I wanted to use an array to create a background pattern. To me this would reflect the pineapples patterned outer skin. With no other animated components other than the three wave clocks in center, the sketch was very simple, and there wasn’t much to tweak.

A photo of pineapple skin courtesy of Angelina Hills.


A still from Pineapple.

Saltwater was also somewhat straightforward. Already the wave clock motion was fluid so I wanted something else to compliment that motion in the background. I chose to have four different semicircles ebb inwards from the four corners towards the waveclock, simulating waves. With a great combination of rich blues, the sketch in the end was very smooth and peaceful, reflecting a current-like motion. Sarah

A still from Sarah.

The color palette for Sarah came from the fact that I had originally searched for Sarah Lawrence in Adobe Kuler, hoping that some art student had uploaded a color combination in light of their school spirit. However, nothing for Sarah Lawrence came up. Instead a vibrant palette for Sarah showed, with some beautiful reds and so I opted for that instead. Like Pineapple, nothing changed much since the first iterations over the course of me tweaking these sketches. The randomly generated lines from the four corners of the sketch mirror the components of Saltwater, but give a different feel. Rather than a pushing motion towards the center, the layered lines illuminates the borders drawing out the center of the piece which is a medley of red variants. Spider
A still from Spider.

A still from Spider.

Spider was initially a sketch called Greyscale, and I feel as if I’ve cut a corner by renaming the whole sketch to reflect its visual components. Upon finding that static polygons did not fit with the whole composition of a wave clock, I used a circle class to create a number of different animated circles that bounced within the borders of the sketch frame. The title ‘Spider’ seemed much more appropriate given the arachnid like motion at the center of the frail white lines that cover the sketch. The most extreme of all my sketches, Spider’s background components actually challenge the fluidity of the center piece by criss crossing the screen with layers of white. There is an actual interaction with both the background and the centerpiece when the rest of my sketches treat both as entirely separate entities. The grey wave clocks in the center actually look entangled in the white web created by the roving spheres. In the end, I chose to remove the sketch Moth from my compilation. What I wanted to achieve with moth did not fit the central theme of my project and so I left it out. Other than that, there were no other big upsets with the whole project. Every sketch successfully presented a combination of three wave clocks as the centerpiece with background components that complimented the wave clock motion and aesthetic. There was not really any particular final image I had in mind for any of these sketches. Despite the process of going through Adobe Kuler and finding themes for the sketches based on intriguing color palettes, the rest of my method was made up on the spot. I went with my intuition about what I wanted each sketch to have and worked with trial and error. An array for Pineapple, classes for Spider, the random function for Sarah, etc… Each sketch incorporated a different coding lesson we learned this semester. I don’t think it’s fair to say anything went wrong, because in the spirit of generative art, any outcome was accepted. In comparison to analogue installations, working with Processing allows a lot of room for error, and so with no specific end goal in mind, there was no positive or negative way to critically think about mistakes.  

Conference Project Proposal: Wave Clocks

My conference work derives from the wave clock code. For my project I am working on putting together a collection of wave clock sketches that vary in color scheme and presentation. My ambition is for each sketch to capture the elements of its name in color and feel. Currently I have five different sketches titled Pineapple, Saltwater, Greyscale, Moth, and Sarah. For the color pallette of each sketch I used Adobe Kuler, an online library of color schemes of five, to find color combinations that suited the aforementioned keywords. Choosing the correct color combination was an essential part of the sketch since color helps control the emotion and life of the presentation. In order to get a real feeling of pineapples or saltwater, the best color combination needed to be coherent, relevant, and telling.







Each sketch, with the exception of Moth, is essentially presented in the same format. Several wave clocks are in the center of the screen while the background has different elements that add to the name of the piece, either as animated or stationary shapes. The background is one of the few variables in these pieces that changes from each sketch, and so it relevance to the overarching theme of the piece is crucial. For example, in its early stages, Saltwater’s background consists of ebbing arcs which are reminiscent of waves. For Sarah, dynamic red lines reach for the waveclock in the center of the screen, complementing the vibrant red color scheme of the sketch.






What is important to also keep in mind is that the background parts must also complement the wave clock, which is the dynamic centerpiece and so naturally is the center of attention. If the background components and the wave clock do not mix well, then the piece will feel contradictory or imbalanced, contrary to the ambition of coherent themed wave clocks. With Greyscale one can already note that the background elements, which are blocky and static, do not go well with the fluid diaphanous qualities of the waveclock in the center. These will be tweaked to create a better overall feel. As with most generative art projects I have worked on this semester I am always open for the unexpected and expect some interesting qualities to occur randomly.  

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 3/2/2016  

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.

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  

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 Proposal: Stagnation

For my second project I want to create worthless interaction. There is a machine which has gained popularity over the internet for creating a truly useless function. The user flips a switch which activates a mechanism that pushes the switch back into place. useless_machine_1useless_machine_2   What I really like about this specific interaction is the competitivity of the back and forth between man and machine. Even though nothing comes from the interaction, it is not the same as a non-interactive project. The user does take a step forward, it just happens to be that the machine pushes back. As the user you know the function of the machine, therefore completely aware of the fact that nothing will change no matter how hard you try and change the circumstances. Yet, there is something which still keeps the user interested enough to keep trying to out play the machine. Clearly I won’t be able to translate the physical aspect of this interaction into my program, but I would like to create a code which captures the same action and reaction interaction. For the actual program, I think it is crucial that the interface have some type of hand that repositions the switch, or button, or whatever binary option that can be activated. It draws out the machine and human competition by likening the means of interaction.
Hand Drawing FYS

An example of the type of hand image that may be used when re-flipping the switch.

Garrett Hsuan    

Conference Project Update: Please Disturb

Previously in my conference post I stated that the animals I am trying to produce would be a collection of animated actions. However, upon reconsidering the process of actually animating the animal sketches I would be making, it seems more appropriate to first keep these animals as static images instead. Hopefully not too much of the animal mannerisms will be lost with this simplification. The rest of the project is proceeding as planned. Users will still have the option to interact with several different animals.
A sketch of two ants and a cockroach.

A sketch of two ants and a cockroach. Either bug can be used for the project since they exhibit similar mannerisms. 

A sketch of three fishes, another possible animal that can be used.

A sketch of three different fishes. Another potential species that can be used for this project. 

I am currently working on sketches of the animals. When completed they will be transcribed into digital images and have their backgrounds removed so that only the sketch remains. One thing which I expect will take some time is properly capturing the types of different behavior the animals will exhibit. A fish and an ant can both retreat, but a fish quickly darts once or twice before becoming at peace once more, while an ant scatters wildly for several seconds before calming down. Knowing this, I do not believe each section of code for each animal will be the same (with me just switching out images to change animals). Each animal will need to have their own script that effectively captures their behaviors. Garrett Hsuan  

Project #1: Fishes

Fishes project_fishes For this project, what I wanted to create was something that gave the user the option to create a negative action and a positive action. Building off my moving text project, what I ended up creating was a school of fish which would either turn away from the mouse or swim towards the mouse if you presented food. The negative action being the default setting which causes the fish to swim away from the mouse cursor, and the positive action being the clicked mouse setting which projects a worm for the fishes to eat. The user and the fish perform very binary act. Either the fish run away from the mouse, or they move towards it. Knowing that I needed to simulate the movements of retreat, I figured I could split the screen into two vertical halves, controlling lateral movement. In this way, if the fish continuously moved from the left or the right, it would seem as if they were backing away from something, and it gave the user the option to force the fish one of two ways. Controlling the fish with the presence of the mouse rather than pressing a key creates a more realistic setting. The user is invading their space and they are disturbed with the new invasive presence. Involving the option to press the mouse as a means to add food for the fishes to call them only added another layer to the space related control, which means in total there are four actions which the user can implicate, just on the positioning of the mouse and whether or not it is clicked. There were several things which went wrong when creating this project. Initially I had intended to use only one fish that would randomly appear at a different level of the ocean after exiting off screen when scared, but since I could not successfully incorporate the random function and its variables into the script without errors I settled for creating a fish on every level of the ocean. In defense of the school of fish I ended up using instead of the singular fish, it is easier to feel the effect of one’s actions upon a group rather than an individual. Another problem which I still do not understand is that with the addition of more “fish” into the script, the faster they moved when the program was running. I would assume the addition of more fish into the script would delay the speed of the code since there would be more to run through, but that was not the case. To accommodate for the speeding fish, I added a delay to the draw function. In relation to the creation of the project these were the two most notable problems. In response to how people interacted with this project, the greatest problem was how quickly people got tired of it. The project is a simple interaction that does not really allow for any creativity beyond where you get to place the worm, so it was not a huge surprise that it did not hold the attention of users for long. However, in the end everything else went right. I was able to keep the fishes as images created from keyboard symbols. Even the worm follows this style since it is an orange “s”. The means by which users interact also worked as I had hoped it to, and I believe it is appropriate that the default setting is the one that repels the fish since it is easier in real life to disturb than to nurture. I would also say this project relates to LAX’s Urbanimals in that it invites you to interact with these simple animals, but would stress how the intention is different. I have seen from the people I have shown this to that it creates an emphasis on the difference between welcome and unwelcome actions, whereas Urbanimals focuses on welcoming actions only. In other words, the project here allows the user to control the relationship between them and the rudimentary fishes, while the LAX interaction presents a more mutual relationship. Garrett Hsuan    

Conference Project Proposal: Please Disturb

Conference Proposal Abstract: For this interactive, users will have the option to play with three or two types of animals. As of now, I am considering using fish, ants, and penguins. Fish are not social animals that do not respond positively to human interaction. Interacting with fish would create an interaction that is disruptive to the fish. Ants are social creatures, but do not respond positively to outside interaction either. Though ants respond well to other ants, any interference from people would also be disruptive. Penguins on the other hand are both social creatures among their own species and respond positively to human interaction. With the option to interact with these three, or two if I later choose to omit either fish or ants, species I hope to highlight the type of reaction users will have to playing with these other beings. ants conferenec sketch fish conference sketch Norman’s 7 Steps: Forming the goal – A person sees the animal and is curious to see what it does. Forming the intention – They will figure out that the animal responds to certain actions and gain experience as they continue to explore the setting. Specifying the action – The person will realize that specific actions will cause the animal to respond in a certain way. Executing the action – The person will interact with the animal and the animal will respond in a realistic way. Perceiving the state of the world – The person will find that the different species of animals will behave differently. Interpreting the state of the world – The person will realize they can disrupt the animal’s state, or improve it.   Evaluating the outcome – The person recognizes that some animals are more prone to sociable behavior while others are not and will become aware of how common interactions vary depending on the type of being they are interacting with.   Design: I would like to keep the coloring of the design simple and not overly excessive with the amount of coloring thrown at the user. I believe in minimalism and keeping things simple so as to reduce the possible overload of information introduced to the user. In terms of how this project operates, the behavior of the animals will be captured in a continuous movie. Therefore, depending on what the user does, a certain portion of the movie will be played that depicts the animal’s reaction. If I were to use a term made popular by millennials, I would describe the animals as a collection of GIFs. These series of GIFs respond to certain actions the users administer. To precisely capture the actions of the user, it seems best to have the user interact through a mouse rather than motion capture. With the input of action being by mouse, there is more reliability and accuracy. Code: draw() – Will contain the conditionals so that the project is always willing to accept new interaction. setup() – Will lay out the basic settings that are permanent throughout the project, such as the background. Variables – There will be variables for actions, colors, locations, and images. Color – The animals and background will be colored. Interactivity – The user will use a mouse to input certain types of actions. A relationship between user input and the programmed environment – The user will have a call and response relationship with the animal. Garrett Hsuan  


FootPrinted Sketch FootPrinted is a tracking interactive that projects the paths that students take depending on what they are studying. This interactive can serve as a guide, showing what traffic is most frequented by which students. With this, students can easily find rooms associated with their studies, as well as discover new areas often populated by students with similar academic interests. There would be several color coded paths based on the different areas of studies that can be found in Heimbold. For example, if a student is interested in fine arts, such as painting or drawing, they would follow the red footprints that are projected onto the ground. This would lead them to all of the fine arts classroom and the fine arts teachers’ offices. This could be very helpful during registration week because it could help students find their way to sign up for interviews, meet teachers, and connect to people that have similar academic interests.  Manuel Castells would like this idea because it develops a social structure. As pointed out in the article, “social network analysis, uses the idea of network as a representational form to help plot emergent forms of connectivity between humans at various scales (both individual and collective)” (Gane + Beer, 31). This shows that Castells supported the idea of technology that created social interactions. By creating paths for people to follow, it forces people to go to the same way as other students that they might not otherwise talk to. This increases social interactions between students, peers, and professors. In addition, Castells would like this network because it displays topologies. In the article, it says that “Castells hints that networks may assume multiple topologies, in practice he tends to use the concept of network to symbolize a society that is increasingly de-centred, flexible and individualized” (Gane + Beer, 20). This project would definitely create individualism because there are so many different paths that are based off various areas of student interest. It is also flexible because there is not only one destination per individual. Each student will be guided to all of the classrooms and offices that pertain to their area of study. Furthermore, Castells would like this network because it displays a transaction between time and space. Within this transaction, there are “[…] nodes in the network; that is, the location of strategically important functions that build a series of locality-based activities and organizations around a key function in a network” (Gane + Beer, 21). This network’s function is to guide people towards their interests and to meet people in the process. Therefore, there built in locality activities and organizations are the classes themselves and other clubs that evolve around that area of study. Footprinted disrupts existing networks because it reveals an invisible network. The paths that students take are not shown in real life. This idea displays where each student will walk based on their interests. Therefore, it changes how other networks work. Based on individual interests, one will face different social interactions because they are directly guided towards an area of study that encompasses their interests.   Alexa Di Luca, Garrett Hsuan