the ux of time, the ui of p5.js! (hooptime)

Over the past few years I've realized that I use an idiosyncratic visualization for certain kinds of time; I see the cyclic nature of the twelve months of a year and the seven days of a week in the form of a circle, both going counter-clockwise. I spent some time today generating images reflecting this view. Here's a reflection of what a week is like for me:

I guess the specific rotation and counter-clockwise direction reflects a dash of synesthesia, and also how important physical layout is to my sense of recall -- if I'm trying to do a week-based day calculation, I'll often use my hand to as an arrow to mark my place in the week, in the same way I'll still unconsciously shape an "L" with my left hand to recall which direction is which. 

I'm less certain why I place the weekend down. My best guess is see that as the start and stop of a week, and is either "heavier" or "where the week meets the road" (to stretch the physical metaphor, since I view myself as moving in the fixed week-wheel rather than it moving to accommodate me.) The counter-clockwise motion then springs from that - I read left-to-right, so the Saturday-Sunday "start" to the week is in that "forward" direction, and thus drives the rest of the loop. 

Years are even more strongly laid out in my mind's eye: 

Here the calendar starts at the top, as one might expect, but I think that's because I view a year as progressing from school year to school year, with the loveliness of summer vacation anchoring as the base (though a separate desire to have the numeric transition be straight up tilts the thing a bit.) 

Neither visual is strongly color-coded for me, but week vs weekend and the various seasons have a different ephemeral feel, here color-coded for grins. 

As a side note, I used a new technology for this, p5.js -- the same processing.js I've used for years, but now as pure javascript, rather than going through some weird java-to-js convertor. Highly recommended! You can check out the working page and source code if so inclined.

(Incidentally, I looked into doing this with CSS trickery, but man, the CSS shapes page uses such crazy, inflexible hacks... relying on how if the div is tiny and the border is REALLY wide, then one side of the border looks like a triangle, and messing with border radius makes circles, and then you can get :before and :after going for extra stuff... bleh, it's a mess that breaks quickly when you try to adjust it.)