LateNightHacking Louis Projects 2005 | Auth |
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!
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
~ Michael
Louis K. Thomas <loui sth@hotm ail.co m> | Auth | 2007-06-11 (3724 days ago) |