Interactivity and Computation • 60-212
CMU School of Art / IDeATe, Spring 2022 • Prof. Golan Levin
At around 22:16.
At around 11:00.
I didn’t have much time to create this piece, so it is just a simple clock that presents the time we are familiar with.
The shape in the center represents the hour, the position of the circle around represents the minute, and the number of smaller circles represents seconds. The color of the background changes throughout the day to match the color of the sky.
Link to the sketch: https://openprocessing.org/sketch/1476237
My project is a clock that measures time through the petal-like formation of a cosine polar equation. The highest petals count the hours, the medium count the injures, and the small ones are the seconds. Additionally, the background changes overtime, from a right blue during the day to a deep purple at night. I had somewhat been introduced to the concept of polar equations back during the assignment to make a spiral in p5.js, and it really opened my eyes to how useful and interesting they could be. I had learned about them in my calculus class in high school, but seeing them used in this creative coding environment led me to see them in a new light.
I found using these polar equations to be surprisingly difficult, as I for all three shapes I had to modify the start and end angles in order to make the radius of petals start at zero and end at zero. I couldn’t really find a consistent pattern so I had to eyeball it, but I think it works pretty well and is pretty accurate and legible. One thing that I definitely think can be improved about this piece is its presentation. I did spend a lot of time on it, but right now it’s pretty plain. I did had ideas to implement different “themes” depending on the time of day, like it would look neon at night and more like a regular flower strong the day, but I didn’t get to chance to really flesh this out. I definitely do want to go back and implement those ideas.
This is what the clock looks like during the day:
and this is it at night:
Here are my sketches:
While I definitely learned a lot from these resources, like the fact ancient peoples didn’t just use sundials and devices like water clocks were a thing, I think the most surprising piece of info, which was stated in the history of time measurement video, was that Stonehenge was used to plan the planting and harvesting of crops. This was interesting to me because for some reason I thought that Stonehenge’s purpose was a mystery, and I never would have guessed that it was used as a time measurement device.
I feel like I definitely spent way too much time on this, but I think it came out well. Originally, I had this stipple effect on each rent shape that looked pretty interesting, but it just turned out to be too taxing and the gif would come out super stutters and have a huge file size. I think in the future I would like to experiment with stipple/ dithering shading, but I would probably need to use shaders instead of regular p5.js shapes.
https://openprocessing.org/sketch/1476045
Time Universe on Openprocessing
Time Universe was inspired by Superlocal made by cw&t and the new concepts of time that I encountered during time research. As I learned that time is a concept that was created by humans, I wanted to create a timepiece that presents time in an abstract way. Thus, I created my final piece which consists of big circles, medium circles, and small circles with the number of each type of circle being reflective of the current hour, minute, and second. When a user clicks on the canvas, the user is able to add a single circle of a random size; when a user drags the mouse on the canvas, the user is able to add multiple circles of random sizes. The user is able to return to the current time by pressing ENTER and change the colors of the circles by pressing any other keys. By allowing the user to change the number of circles and their colors, I intended to convey a sense that the users themselves have control over the current time. Further, I intentionally created a clock that is hard to read in order to sway the users away from being constrained to the exact measurement of time. By using this clock, I hope for the users to be more relieved from any pressure that may have arisen from time and take more initiative on the pace of their own lifestyles.
I believe my work was successful in conveying my general concept that we do not need to be pressurized or anxious about time. I enjoy how the colors change depending on the position of each circle and that my work includes several elements of interactivity, which I would like to continue to bring into my future works. Yet, I see many aspects of my work that could be altered or changed, which I wasn’t able to implement mainly due to the time constraint. A major feature that I would like to add is allowing the users to remove a circle by clicking on it, which would work with my current element of adding the circles. I believe this would further strengthen my current concept by allowing the user to not only lengthen time but also shrink time. Moreover, when the user returns to the current time by pressing ENTER, the transition could be smoothed out by adding a fading out effect to the circles. I also wanted to add a shadow to each circle and add a background image to enhance the visual depth. Nonetheless, I enjoyed working on this prompt and getting to deeply think about the meaning of time; I would like to also try out my other project ideas later on.
https://openprocessing.org/sketch/1476019
https://openprocessing.org/sketch/1476019
link: https://openprocessing.org/sketch/1476010
This is a relatively simple loop animation. While it is a seamless loop, it wasn’t as visually interesting/illusionistic as I had hoped for. A another problem is that after running for a while it becomes really laggy. I think’s it has to do with how I wrote my for loops, and I’m still working on improving this.
Rectangular Trap on Openprocessing
The process of creating this work came more naturally; it was different from my initial ideas. I initially intended to create a flower that blossoms infinitely by rotating rectangles around its corners. Yet, as I created this piece, I wanted to play around with the straight edges of the rectangles, which is how I came to create my final piece. I believe I have succeeded in creating multiple shapes with a simple repetition (and creating an infinite loop!) by allowing the objects to layer on top of each other. The use of simple colors has added to this effect with some objects having the same color as the background. Although I personally enjoy the simplicity of this piece, I wonder if this piece is too simple in that it lacks detailed motion: all the objects included in this piece move around the origin. I think it would also have been an interesting experience if I proceeded with my first two ideas shown in the sketch.
screenshot:
Animated GIF:
Link to OpenProcessing: https://openprocessing.org/sketch/1475909
I initially wanted to make a geometric clock that uses polygon to represent second/minute/hour. But I didn’t continue with this idea because it’s too simple and doesn’t have much meaning to it.
I then continued to brain storm and settled on the idea of creating a clock that triggers the feeling of anxiety/frustration with the passing of time. The inspiration of the design comes mainly from this picture: 
This clock is meant to make people feel anxious. I tried to make it so that it captures the feeling of me running out of time and feeling frustrated(eg. when the deadline of a project I barley started is hours away).
The most challenging part for me was to figure out how to make the lines seem random enough, while still maintain some type of order. They needs to still have some level of legibility so a person can still tell time from this clock. I initially wanted all the points to be at a random location, but that ended up being too chaotic. As a result, I chose to map the points into a circle instead.