Logarithmic Clock

2005-06-05 : Back near the beginning of May, I saw the sliding time-line clock and thought it was really neat.

After watching it for a while, I noticed some things I didn't like about it. Specifically, the boxes didn't get wider as you went down the page. It was weird that the day of the week was larger than the day of the month and the month itself. Plus it seemed like there should be something showing that the seconds fit inside the minutes, which fit inside the hours, which fit inside the days, etc.

I spent some time trying to figure out how to do it better. I first toyed with the idea of using a marked circle or disc. Besides the fact that putting the years in the center was odd (there are an infinite number of years, while the closer you get to the smaller the circumference), the whole idea didn't scale well. Circumference grows proportionally to radius (c=2πr), so to make years and seconds both be one unit high, you need a huge radius. A clock that's 1 unit high by 31,536,000 units wide doesn't really look like much on the screen.

The next obvious step is to throw some logrithms in there. I fiddled with it on paper, but wasn't sure whether it would look good or not. Last night I decided to take the next step, and set up an Excel spreadsheet to see if a log clock would actually be interesting. I thought I might have to fudge the scaling or something, but I came up with a result that looked promising.

Today I decided to take the plunge and actually code it up as a Java applet. I think it turned out looking very neat!

It still needs some work. The drawing routing is quick and dirty and could be optimized quite a bit. I put labels on the clock so you could read the time, but right now they are basically random numbers except for the minute and second labels. (For example, the month label is how many 30-day "months" there have been since 1960 or something.) Once I get that fixed, it'll be a pretty neat clock!

2005-06-17 : OK, got a chance to do some fixes. The labels are now right, and the current time is highlighted in yellow. I made some optimizations, but there are still some that could be made. One obvious one is to not calculate the exponential multipliers for every point for every line every pass, since there's small fixed number of multipliers. Another is to see if it's possible to reuse one shape object instead of creating new object for every line every pass. Another is to figure out how to manage the painting area so only the modified portion of the client area is repainted.

I also fixed the problem where not all of the year lines would appear. I think the problem was due to the fact that that a Shape calculates its bounding box and checks it against the clipping region before drawing itself. It would be easy to have a rounding error when you consider what the coordinates of the points of the year line would be by the time it reached the second column. :) I solved this by doing my own "clipping": I stop generating line segments when I know that further line segments won't be visible. That way I don't generate line segments that are astronomically far away from the visible region.

See the applet in a pop-up browser window or using Java Web Start.

Yukino wanted an antialised one going in the opposite direction. Sure. :) See the applet in a pop-up browser window or using Java Web Start.

You can get the source via anonymous CVS at

  • cvs -d :pserver:anon@www.latenighthacking.com:/code-cvsroot co 2005/LogClock

    ˜ ™

    2007-06-11 : Mike Purvis created an interesting variation: the conch clock. (Needs Firefox.) Really neat, Mike!

    C o m m e n t s :     updated: 2008-06-17 (3204 days ago)
    2005-12-03 8:38p : I am both impressed and confused. I do not understand where "now" is on the log clock. I know how to read traditional clock and calendars, but how do I read this one?
    Mark Gridley
    2005-12-04 : "Now" is the horizontal line running right across the middle of the clock (0). The horizontal gray lines at 1/4 and 3/4 represent +1 and -1. The top and bottom of the window represent +2 and -2. Thus, the window is always 4 units high. The gray verical lines represent the familiar time units, as labeled near the top or bottom (depending on which link you click).

    Look at the far right edge. You will notice numbers sliding along this edge. Each number labels a black line. The space between two successive black lines is one second wide. So, you could say that each black line identifies the start of a second, and the number says which second (in the current minute). The "current" second has a label that is highlighted in yellow. You will notice that the label turns yellow as it passes the 0 line, and stays yellow until it reaches the 1 unit line. That takes a full second. Then it's the next label's turn and it becomes yellow.

    As you look left, the space between two black lines gets smaller and smaller, but still always represents one second. Pretty soon, it's just a solid mass of black lines as the distance between them gets too small to draw. The whole left side would be black, except I only draw 60 black lines (the 30 second lines before now, and the 30 second lines after now).

    Continuing to look left, eventually you reach the vertical line representing minutes. At this vertical line, one vertical unit is one minute. That's the space between two red lines. You'll notice that the red lines are moving too. The current minute is highlighted in yellow. Once it travels to the 1 unit (horizontal) line, the highlight moves to the new current minute at the 0 line. You'll notice that when a minute turns yellow, a second labeled "00" will also turn yellow a the same time. The red line will extend all the way to the right edge (hiding the black line underneath it). You can see that the red line is moving the same speed as the rest of the black lines, one unit per second at the seconds (vertical) line, and one unit per minute at the minutes (vertical) line.

    Remember I said I only draw 60 black lines? Notice that at second "30", there are red minute lines running right along the top and bottom edges of the bundle of black lines. 60 second (black) lines between succesive minute (red) lines. Perfect!

    If you continue to look left, you'll notice those red minute lines getting closer and closer together until we reach the hours (vertical) line. At this point, each unit is one hour high and I only show 60 minute lines. If you wait long enough, you'll see a green hour line sweep past the zero line, and the minute and second labels with both be "00". You'll also notice that the green line sweeps along at the same speed as the black seconds lines. Yes, all the lines move at the same speed!

    The pattern continues as you go left. There are 24 green hour lines, 30 blue day lines (though the labeled month lines are accurate so there are variable number of day lines between pink month lines), 12 pink month lines, and 10 (a decade) orange year lines. I could extend the clock to the left indefinitely, but I figured that was plenty. :)

    In short, to read the current time, just read the highlighted labels from left to right: Year - Month - Day - Hour - Minute - Second.

    Does that clear things up?

    -- Louis


    2006-08-17 : The idea of the clock is a very great idea. However, I think that it is hard to read what the date and time is because it is continuously moving. I understand the fact that it would be hard to keep it stationary, since its always ticking. I understand how to read it, but the other dates that are visible may confuse others browsing by. They could be toned down somewhat or an option to hide them would make it easier to read. I really like the idea of using logs to form a clock. Its a great idea and you should work with it. Take care

    ~ Michael


    2006-08-19 : Thanks for the comments. If this were supposed to be a purely functional clock, I agree with your suggested improvements. However, since this is just a toy (I can't conceive of anyone leaving this running on their desktop just so they could tell what time it was :), and since watching time "move" is what makes it interesting, I don't think I'll make those changes.
    -- Louis
    2008-03-72 : I love this clock! Would be nice if it checked the local time zone, for me it's one hour off.

    2008-06-17 : I don't know how you came up with the idea for a clock like this, but it's great. I would totally put it on my background though. Although in contrast to the fact that it moves being a bad thing, I don't think it moves quite enough. The only parts you ever really see move are the hour "hand" and below. I think it would be interesting to isolate those three units and perhaps eliminate the grid to make for a nice aesthetic background clock :)
    -- Vic
    Edit