Category: 4. The Clock

https://preview.p5js.org/aatlove/present/7Q2wlbJPF

For the Clock Project Assignment, my concept was the hourglass. I made two hourglasses to represent the hour and the minute. Initially, the shape was meant to be a triangle, but the representation of time going on did not say within the bounds of the shape. Finding the x-value was difficult to find. The x-values I found made increased the width rather than shorten the width. 

As a result, I changed the design of the hourglass to a square, and using the map function had the “sand” or in this case, the color moves down the glass to the bottom to show how much time has passed. The shape of the hour was also beneficial because with a triangle the point would always be ahead of what the actual time would be. With the square, the flat edge would show the exact time. Having two separate hourglasses to show the representation of time was straightforward. 

Another design I would have done was instead of two separate ones, have one hourglass and have dots appear to either represent the other part of the given time. For instance, if the hourglass represents the hour, then the dots would represent the minutes and vice versa. 

Sketches 

 

Final Outcomes 

The Clock

 

For the background I used the loadPixels method we discussed last week. I made the background change with 2 variables at the green and blue channel to create a gradient, so it looks like the night. One problem I came across was that I want to turn the background 90 degrees, so it’s dark blue on the top and lighter blue on the bottom, but because the clock was written with the radius mode, when I change it to degree mode it stopped working, and when I tried to use 90 degrees = PI, it didn’t rotate. I use an orange circle to represent the moon at night, I made it to go around the background every second. I put clouds at 12, 6, and 9 o’clock mark, and I put a fish at 6 o’clock mark. The orange circle is the second hand, the five angle star is the minute hand and the eight angle star is the hour hand. To add some interesting element to the clock, I mad a sea wave. 

 

Initial sketch:

The clock that I generated was a clock that uses bouncing balls as its second, minute, and hour hand.  Here is the code to it:

https://editor.p5js.org/ys4136/sketches/Xm0MTYrKc

 

The smallest ball represents the second hand, and the medium size ball represents the minute hand, and the biggest ball represent the hour hand. I got my inspiration from pendulum clocks, so that when the ball finishing bouncing an entire loop, a unit time is past. The color of the ball will also change every time it bounces off from the screen, so that people will have a sense of how much time has past. 

For this project, I really like the use of the class function, because it saved a lot of my time and made the code looked more organized. While doing this project, I kept encountering a problem saying that color array is not a valid color representation, and this problem was solved by making a list of color and then use a if loop to make the color change based on the order in the list for each time it bounces. 

 

 

The Visual Clock 1: Answer Sheet

Code: https://editor.p5js.org/yl7799/sketches/OywV5W8iz

This visual clock is very much like the answer card we use in the exam. It is painted with colors one square after another. Here, a square represents 1 minute. The program will color the unfilled square or erase the color of the filled square in seconds. A large grid has 10 small squares in a row and 6 small squares in a column. A large grid represents 1 hour. The canvas has 3 columns of large grids and 4 rows of large grids, representing 12 hours. From 0 to 12 hours, the program will color the unfilled square in seconds; From 12:00 to 24:00, the program will erase the color of the filled square in seconds. Using the background color of the canvas distinguishes between 0:00-12:00 and 12:00-24:00.

The Visual Clock 2: Wreath

Code: https://editor.p5js.org/yl7799/sketches/hiekrFxZ3

This visual clock is a bit like a wreath, which is composed of many circles. A big circle represents 1 hour. The whole canvas has 4 rows and 3 columns, representing 12 hours. There are 12 small circles on the circumference of a large circle, and each small circle represents 5 minutes. The small circle is filled with color from inside to outside. Draw a circle every second, divided into five colors, and one color is filled 60 times. Using the background color of the canvas distinguishes between 0:00-12:00 and 12:00-24:00.

The Visual Clock 3: Hanging Letters

Code: https://editor.p5js.org/yl7799/sketches/jlEN3Z-2f

This visual clock consists of 3 lines of hanging letters, 12 letters in each line, and minutes are represented by hours, minutes, and seconds. There are two-hour lines. When the letter rises, it means an hour; There are 6-minute lines and second lines. Every time a letter rises, the height of a line indicates a minute or a second. Using the background color of the canvas distinguishes between 0:00-12:00 and 12:00-24:00.

 

Reflection

In the final analysis, it is a limited ability. Self-reflection here, why can’t you do it? Sometimes I think about a function. Later I found out about the processing website. In fact, I should have a lot of it. A good example, the most interesting is actually the clock generated by the particle system, trying three hours to find that you can’t achieve it, helplessly give up.

These three cases also reverse repeatedly have been revised for a long time, such as global variables, and use, the class name, and use, what code should be released in the setup and draw function, go to another scene without resetting the background … A series of problems, simple or complex, has been solved at all, and finally.

For the font, it remembers it. Plus, I did not have this in the previous experiment. After searching the font, I found it very simple. After adding, I think, why not do a picture in the PS, only It is necessary to have two lines. After running, I have been discovered, forgot to add color to the font and then synchronized it with the system. It is a small dark flower.

This experiment has got bigger, not only about learning code, but more importantly, it is a bit solving process. Sometimes it is a weak problem, but it is also written. According to your idea, there is also a process of searching for the implementation, a step that is very tired but very accomplished.