For my clock assignment I decided to create images based on the sun and moon throughout the day. I started by determining how I would split up the hours to create the images. I decided to have four main different timeframes visualized – sunrise, daytime, sunset, nighttime. I split these up between the 24 hours of a day to show how time passes in the sky.
Link – https://editor.p5js.org/katrinamorgan/full/xlZu5N78u
Link: The Human Clock
The concept of time has always fascinated me since I was a child. I always wondered who decided when to start counting time, what made them worthy enough to do so, how we came to know seconds, minutes, weeks, and months. Days and years were concepts that made slightly more sense to me since we base those off of planetary systems, but time itself seemed to be something so intangible and fluid that it would be silly for humans to try and categorize it. Yet for centuries we’ve followed the same arbitrary standards. There are time zones and leap years and daylight savings periods. There are historical records of a point when the sun never moved in the sky for hours. After all these years I’m still not fully confident in standard time. Time and its measurement varies in different cultures and it seems backward for everyone to follow the same time tracking methods. To me time is something personal and individual, it’s reflected in our minds, our gaining of wisdom, our physical features, and our memories. Time is kept naturally by the body and the spirit. The rhythmic beating of a heart that changes tempo. The graying and loss of hair. Deterioration in eyesight. Growth and loss and growth again of teeth. The emergence of lines and wrinkles. The rise and fall of our heights. As babies we know nothing, then we gain knowledge and experience with age, which manifest in our features as we get toward the latter stages of life. We humans are clocks with the ability to adapt to change. This is why I chose the body to represent The Clock. Aging is something beautiful, which I also fear, thus this project had a lot of emotional meaning to me. It allowed me to ponder this inescapable fate and see it in a new light.
For the clock project, I wanted to focus on the passage of time. I decided to recreate a Twister board but all the circles are tracking time. I was interested in this idea because Twister is a game I played a lot as a child. As I get older, I think more and more about my childhood memories and how I can best hold onto them. This is why I included the year as a clock in this project as well as the hour, minutes, and seconds. Intentionally, all the clocks are never full at the same time because I wanted to create a sense of disconnect between the past and present.
My code: https://editor.p5js.org/ri0la/sketches/l8WDG-WQr
For this project, the inspiration for my original idea was some sort of time keeping throughout the day as I always tend to lose track of time. I had several ideas of execution that used some sort of numbering system but then I realized that I’d prefer to avoid the use of any numbering system. Since sunflowers follow the sun, I decided to integrate them in my project. I used the base flower piece from my previous generative art project and decided to stick to the idea of a time keeper/ organizer for a work day.
The following are some sketches throughout the thought process:
When executed, there are 7 display modes in which the flower face can be in and they show depending on the time of the day:
1. Mode 1: Sleep. This happens between 11pm and 7am. The timings were rough estimates from my own personal experience. The center of the flower displays “Sleep time!” during this time. Since time is not really perceived during sleep and it passes very fast, the flower leaf second ticker is just constantly moving.
2. Mode 2: Pre-work. 7am-9am. This mode displays “Good morning! Get ready!”. Time moves normally here. Flower leaves tick every second.
3. Modes 3, 4, 5 and 6: Work hours. 9am-5pm. There are two parts to this, work time and lunch break (12pm-1pm). For lunch break, the flower reads “1 hour lunch break”. For the hours 9am-12pm and 1pm-5pm, the flower goes through the 50/10 work method which displays “50 minute work mode!” for 50 mins of the hour and “10 minute break! Stay hydrated!” for the remaining 10 mins in the hour. To add onto that, the flower second ticker occurs every 2 seconds during work hours as time is perceived to move much slower. You also get a reminder every hour for 2 minutes to fix your posture!
4. Mode 7: Non work hours. These are the remaining hours of the day 5pm-11pm. The flower ticker ticks normally every second. The flower displays “Work day is over! Enjoy the rest of the day!”.
On top of that, the background color is dependent on the time. The r, g and b values are mapped from the hour, minute and second values.
The link to my code is here.
For my clock project, I wanted to represented time by using a flower scene. The flower and stem grows per second and restarts at the bottom when the minute starts again. As the minute progress, the flower moves to the right. I wanted the amount of minutes to be reflected with how many flowers there are, but unfortunately, I was not able to figure it out, but I do hope I will. Additionally, hours are represented with the sun and moon. Between the hours of 7 am to 7 pm, the sun is out and the sky is a yellow blue. At night, the moon is out and the sky is a dark blue and black. The sun and moon both move to the right as the hours progress as well.
Process sketch:
Final outcome:
The clock at 12:21AM
The clock at 4:22AM
The clock at 9:25AM
The clock at 12:27PM
The clock at 2:30PM
The clock at 10:31PM
The clock at the current time
My clock concept is the life cycle of a flower. This idea stemmed from my Generative Thing assignment, where I made a flower generator.
The clock starts with the stem rising from the ground, the leaves growing, and the petals growing. Then, the petals fall off, and the leaves fall off as the stem curves downward towards the ground. Finally, all the pieces of the flower dissolve into the ground and the life cycle starts all over again. The entire life cycle takes 24 hours, and each scene takes 2 hours. In addition, one small creative aspect I added was I made the petals change to a random color each time the sketch is run.
Overall, I am happy with my clock. The only thing I might change is adding more detail to the background. However, I decided to keep the background simple in order to focus on the flower itself and ensure that it worked properly. In previous programming classes, I had never worked with time before in this way, so it was a bit tricky to figure out. However, I found out that I was able to incorporate it using the map() function, so I utilized this to make my clock work as I had envisioned.
The inspiration for my project is based on Astrology. In astrology, there is something called your big three, sun, rising, and moon sign. Your rising sign is based on the time you were born. Your potential rising sign changes every 2 hours. So I chose to demonstrate the passing of a day based on which sign is in the sky at a given time in the day. 
I got my inspiration from this photo.
I originally was going to create a class for each installation and hand draw each one. After speaking with Professor, about my idea, I was given the suggestion that instead, it’ll be easier to simply use transparent png of each constellation and then adjust the position of those images. The hardest part of this assignment was loading the images and positioning them.
In the future: I would fix the labeling of the zodiac signs to make them more legible. I would also make my implementation last the full two hours.
Update: Since I presented this project, I removed the original text and used p5js text method to make it legible. Whenever I edit the HTML to change the dimension to 850×800 it doesn’t stay.
The Clock Project: Newton’s Clock
My project indicates time based on a set of 6 different pendulums. The speed of each pendulum is dependent on time but they vary from each other. As seen in the picture attached below, the pendulums are dependent on milli seconds / seconds / minutes / hours / days / months. The point of the pendulums is to indicate when the next minute/hour/day/month/year will come. This can be observed by the speed of the pendulum: the faster the pendulum, the closer it is to the next minute/hour/day/month/year.
code: https://editor.p5js.org/zme209/sketches/y2_KWKQTM
For this project, my main objective was to create a ‘community’ of people/faces all around the screen. The faces would be showing different expressions depending on the time. Overall I was happy with the outcome I got, however, I wanted to implement a few more things that I was unable to figure out. Firstly, I wanted the eyes to blink and when I implemented that they were blinking way too fast to the point that it was somewhat unnoticeable and looked like a glitch. One solution I found was to reduce the frame rate, however, that would not work since it would also affect the movement of the faces around the screen, and it would be way slower and less smooth. Another thing I wanted to implement was making the faces talk during the day, however, I faced the same issue I mentioned earlier. I also wanted to make the background look like a proper gradient, but after some testing, I found that it would be weird. Different face expressions have different colors which can reflect their moods. When the time() is zero, all the faces are in deep sleep. From 0 to 6, more ghosts show up (the number is directly proportional to the time) and a few faces wake up, and towards the end, the sun starts shining. The ghosts represent the late nights that keep those people up. From 6 to 12, the background slowly changes to a nice sky blue and more faces start to wake up. All ghosts disappear during the day. From 12 to 18, the background slowly starts to change to sunset and most faces are awake even though there are a few that are oversleeping or napping. From 18 to 22, the sun finally sets and the sky becomes dark (navy) and some faces start sleeping. From 22 to 23, a few more faces go to sleep and the sun sets more, the sky gets a bit darker. Finally, from 23 to 24, most faces are asleep (whether it’s deep sleep or not which can be seen based on their color) and the sky becomes even darker. The cycle will then repeat again with 0, showing every face in a deep sleep and the start of a new day. I enjoyed working on this and it was interesting to see how my thought process was being tested the more I worked on this code. I look forward to working on the next assignments. My initial sketch and first thought process can be seen below.
Some Outputs:
Live Output:
The link to my code! ☺
When researching about the many different ways time has been represented visually throughout history, Linnaeus’s flower clock stood out to me the most. Carl Linnaeus was a Swedish botanist who observed that several plants open or close their flowers at particular times of the day and can thus accurately indicate the time. His research and his data are specific to his geographical location (Uppsala) and weather conditions that were present; therefore, these same flowers will not open and close at the same times in different countries and seasons.
Using a graph of his research results found online, I picked out 6 flowers and created a class for each flower in order to visually represent it.
After coding the separate flower classes that produced the images above, I combined them in a sketch and chose their positions for aesthetic reasons and their order in respect to when the flowers open.
I then further developed the classes and created functions in which the flowers “open” and “close”. I achieved this by respectively increasing and decreasing their sizes. When the time for each flower to open comes, the flower’s size increases, enveloping the screen. When the flower closes, its size decreases until it completely closes. The pattern then repeats every 24 hours and the actual computer’s time can be seen on the bottom left on the screen.
Screenshot of the sketch at 11:28 A.M.
Screenshot of the sketch at 08:22 A.M.
Screenshot of the sketch at 02:59 P.M.