code

For this assignment, I thought about a swinging motion to represent the seconds. This led me to choose the lucky cat as the base for my clock. Every second the arm moves back and forth, every minute a coin drops, every hour all the coins combine into a spot on the calico lucky cat. I created a constructor function for the coins to make it more efficient. I had plans for more complex movement/transitions, but spent most of my time debugging the coin constructor. Some movements I wished I could of done: natural coin drop/coin flips when dropped, every hour the spots fade in (rather than just appear).

google drawings sketch

(more time photos to come later)

12:28 am

I got the basic blob working being satisfying pretty quickly. Fine tuning it took a long time.

I had this whole plan. I was gonna make the background transparent and that would allow me to put an image behind it, and make it look like a piece of mold on a window. Then I would be able to play with colors more since all the logic would be stored in the alpha channel. But alas, I could not get the transparency working after hours of tinkering, leaving me with the slightly lackluster product you see here.

I think the entire thing would have been easier to pull off with shaders, but I thought I could get it to work with regular p5.js, so I didn't bother to teach myself shaders. I should have bothered.

https://editor.p5js.org/ilovit/sketches/gUr4fvIFk

Clox-Clock

https://editor.p5js.org/clox/present/pgYLxyTTD

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Initially I wanted to make a clock disguised as flies, it would have worked like this: the screen would be filled with flies buzzing about, the moment the mouse interacts with that group of flies, they begin to die (stop moving), until they shape the number to tell the time. I then realized this was much to complicated for me to do at my skill level (well, maybe there is actually a simple way to do it, but I can't conceive of it). So, I simplified the idea by changing how they present the current hour (24-hour cycle) and minute: upon being interacted with (with a fly-swatter mouse-click), all the living flies disappear at once with a few dead (still) ones remaining. Each column of dead flies represents one digit of either the hour or the minute (separated by red circles)-think of the flies as tally marks.

This clock is definitely not representing a different time-scale (which I would have liked), nor is it really providing much interaction for the user (you aren't actually swatting down a fly (not animated), you are simply clicking with a cursor that has a fly-swatter image attached to it). Despite this, I think it is kind of a humorous piece: I went with the fly theme because I associate them with the sense of time I feel when I am bored (i.e. just staring at a fly bumping up against a window in the summertime). I kind of like to imagine this clock in my studio: it is a clock to kill time between rushing around to do "important things."

I will add some images of my sketches ASAP, I don't have them on my as I write this post.

 

 

 

 

Link to p5js: https://editor.p5js.org/meij_who/sketches/TKb92Uyl7

The dandelion clock is an expressive clock that serves more as a decorative purpose than functional purpose. The number of dandelion represents the current hour, the length of the stem grows as minutes go by until the next hour comes, and every second a seed falls off and refresh as the next minute starts.

Inspired by Dan Shiffman's coding challenge on flocking I created this expressive clock, I am glad that I was able to pick up the use of object-oriented programming after this practice and learn a bit more about using vector in js. However, there are still several places that I am not very satisfied with the result. When refreshing the seeds every second, the floating seeds also get erased too. If I have more time I can fix it by putting seeds into two arrays (isFloating[] and stationary[]). I would also love to have all the dandelion grow from the bottom to imitate the actual growth. Also the code can definitely be optimized for better frame rate.

(every second one seed falls off)

(when a minute finishes, the stem grows longer and seeds restart)

(every hour the stem goes back to its original length and one more dandelion appears on the screen)

(the clock is not going to be used as an actual clock but can be an large art piece hanging in the room as decoration)

This is a clock that counts down to your expected death according to data from the Social Security Administration. The statistics are highly generalized, taking into account gender and birthdate but not other important factors like health, substance usage, and country of origin. Nonetheless, the project is intended to reflect both anxiety about mortality and the persistence of the passage of time.

As a self-improvement exercise, this clock might help the viewer think more zen-like thoughts. As you stare longer and longer, the status bar creeps upwards. If you stare long enough, you may even be able to watch another fraction of your cohort die. As long as you're still alive, you're not losing the game.

I set out to learn a great deal of things with this project. I did not successfully implement an API, load a custom font, or fill in a complex bezier shape, but I definitely tried. I didn't manage to convey much about digital immortality, only regular mortality. I did some semi-successful math, as long as you don't think too hard about leap years. Everything else I did do can be seen in the p5 code.

Here is one analog sketch, and one digital sketch which never made it to the main code :'(

   

The concept for this piece was using a clock as the foundation of a fractal. I chose the Kali's simple fractal algorithm because its symmetry works well with rotating parts such as the clock face. Early in the project, my methods were far more elaborate than necessary, involving a Kinect, and an early prototype of the shader using openFrameworks.

In the end I moved to P5 partially to make the work easily sharable. This piece involved much trial and error in trying to use shaders in P5.JS. I had originally hoped to make the clock in P5.JS and use it as a uniform texture, but settled for defining the clock with distance functions. Overall I would say the piece is interesting, but I'm not sure if the clock motif reads as well on its own with how varies the fractal becomes with time as a rotation input.

Link to P5JS Sketch

Update 09/25/2019:

I had some thoughts after this project was finished about how to make this work more elegant and fixed some of the readability problems. Gif of progress below.

Link to v2 sketch