# Timesheet (2019)

Time Visualization – Points, Lines, Fill and Movement

Algorithmic Art (Written in p5.js. time-keeper.js is used to add the function of speed and direction controlling of time. The control appears when you mouse over the top left of the screen.)

View live.

View video documentation:

We are given the same amount of time every single day (Here, I’m not accounting for the daylight savings practice). Every day has the same time limit and thus it is equally precious. To reflect on our daily time span and the boundary it gives us, I decided to draw the entire day as a single page. This page resembles a piece of grid paper.

– Each day is represented by 60 (minutes, columns) * 24 (hours, rows) cells.
– A day has 60 x 24 = 1440 cells (minutes) (POSITION)
– If a cell has a check mark (x), it means that the minute had already passed. You lived that much today! (TEXTURE)
– The current minute’s cell gets filled up by the current minute’s progress. You can see the cell growing as each second ticks. (SIZE)
– A different color is used per hour. (HUE)
– Different gradiation (alpha level) is used per minute. Later in the hour, a little more prominent. (VALUE)

– If a cell has a check mark (x), it means that the minute had already passed. You lived that much today! (TEXTURE)
– The current minute’s cell gets filled up by the current minute’s progress. You can see the cell growing as each second ticks (SIZE)
– A different color is used per hour. (HUE)
– Different gradiation (alpha level) is used per minute. Later in the hour, a little more prominent. (VALUE)

Then, over this grid-paper background (where daily time is passing), you see a drawing. This drawing is based on the larger time unit information.

– Each month is represented by a series of cells on a line. The number of cells refers to available days (28-31) of each month (SIZE).
– Each cell has a bar on top, which indicates the fullness of a day. If a day has passed, you’ll see a full bar on top of the day cell.
– The alpha level (VALUE) for each bar changes, depending on which day of the month you are looking at. If you are in earlier days of the month, the passed days’ bar will have less prominent color (lower alpha value). Towards later days of the month, the bar will show more prominent color. The bar has the same width as the bottom grid. So, what you see for the entire passed days is a rectangle that has a color gradient. (single color’s alpha level variation)
– However, “today” will always be shown with a fully saturated color. Also, if today, the bottom cell gets filled up by same color as the bar, whereas other day cells have only white filling. (HUE) As today is getting built up, you see the bar growing (SIZE).
– Lines get drawn on top of each day bar, responsive to the fullness of the moon. If the moon is full, the lines are longer. If the moon gets smaller, the lines get shorter (POSITION, SIZE).
– When you enter into a new month, the day bar’s color changes (HUE).
– The month bar (cells on a line) rotates, centered around a point (ORIENTATION). This movement is corresponding to the fullness of each month. A starting angle of each month is apart from the next month’s by TWO_PI/12 (30 degress). So, even though the full circle indicates a whole year, the speed of this angular movement differs by each monthly section.
– In other words, this angular movement is faster in February than in January, because the month bar has to rotate the same 30 degrees angle during a fewer number of days. We just have less time in February. Time flies.

Project @Parsons, Data Viz, DVIA (Workshop offered by Samizdat)