codingtrain/12oclocks

p5.js port of John Maeda's 12 o'clocks

12 o'clocks

This repository hosts a collaborative p5.js port of John Maeda's 12 o'clocks, originally written for Mac OS 9 and released in 1997. Due to the Power PC hardware that Mac OS 9 ran on, it is very hard to emulate the original artwork and without access to a Mac of the era it is difficult to view. Therefore, we are collaborating to bring John Maeda's 12 o'clocks to the web in p5.js. The current version is available to be viewed at this repository's GitHub Pages

Resources

Possibly the most useful resource for this is a post from Golan Levin on the 12 o'clocks. Golan Levin has created some very useful GIFs of all 12 of the clocks in action.

There is also a useful video on vimeo from John Maeda including each of the 12'oclocks in acton (From around 4:00 through to 6:20).

If you can emulate Mac OS 9 or have a working Mac of the era, the software is still available from John Maeda's website

Contributing

It would be great if you want to help out and recreate the 12 o'clocks, or if you have any more useful resources for the project. If you are new to git, you can check out Git and GitHub for Poets, otherwise feel free to fork this repository and create a Pull Request with your changes. Need help? Feel free to raise an issue if there's anything we can help you with!

Each clock has its own sketch file in the clocks folder, numbered 01 to 12 based on the position of the clock in the grid.

12oclocks's Issues

Clock 9 Is 24-hours

credits?

While this is ultimately a collaborative, community open source project, I'd like to be thoughtful and generous in crediting coders who contributed. Maybe a list of github usernames for each clock in the README? Or should we rely on the fact that github the tool itself ultimately tracks this?

12 contributors?

Should we do 1 clock per person so in the end we have 12 contributors?

Clock 5 has some weird rotation

I have noticed that the rotation of clock 5 is sometime a little bit weird.

performance

Hello,

I noticed that the 12 clocks playing simultaneously are very resource intensive. This really takes away from enjoying the clocks. The function animate() takes 50ms (chrome perfmon) and because of that the frame rate drops dramatically. I haven't checked if anything could be optimized. Maybe it's an idea to let a mouseover trigger the drawing of a clock? As seen on the following page (that i think inspired the page?). http://cmuems.com/2016/60212/lectures/lecture-09-09b-clocks/maedas-clocks/ ?

I could look into that if needed.

Cheers,

Arjen

Some clocks display 0 o'clock

The clocks 2, 3, 4, 5, 7 and 8 display 12 AM/PM as 0 o'clock.
Clock 9 displays only 12 AM as 0 o'clock.

We need to work out the font

It looks like all the sketches use the same pixelized font - we either need to work out what it is or convert all the needed characters.

Clock 3 has some... interesting... artefacts on firefox under Ubuntu

Anyone else seeing similar?

Visible spaces between squares

Example:

Issue:

This affects all clocks whose numbers are drawn using squares (rect).

We're getting visible spaces between squares which are drawn side by side. The source examples have clean flat rectangles, so it would be nice to try and fix this.

Reference:

Aside:

There may be a trick in javascript/p5 to resolve this, maybe to do with anti-aliasing?
I've tried adding a stroke to the shapes, but then we loose the clean corners between shapes.

Centralise getting the time

Will fix the difference between clocks (Some say 0 instead of 12).

These time functions should probably return a number so individual clocks can pad with zeros if necessary.

Clock 10 should stack like in the original

Clock 10 is currently a grid where the numbers are all drawn in the same loop. This causes some overlapping issues. In the original the background grid appears to be drawn, then the hours minutes and seconds on top of it. They are also in 3D.

Clock 8 sizing and positioning

Clock 8 seems to have a lot of incorrect measurements. First of all the scaling center point of a two digit number, for instance the minutes, seem to be in the second digit. This makes that it is scaling to the left, which the original doesn't do.

It can be clearly seen in these two screenshots

Measurements on the remake of clock 8

As you can see the number 7 is the number staying on the red line.

Also the positioning currently is 1/4 of the width from the left and the right (again here a two digit numbers' center is incorrect). I tried measuring the locations of the original clock but could not come to precise fractions so I'm not sure how the positions were originally determined. However we can at least take an estimate to more accurately represent it.

Here is the original.

Measurements on the original clock 8

Notice how the single digit is positioned more to the right, and the right number is scaling from it's center.

Lastly the size it increases and decreases to also currently is not relative to the screen size. You can clearly see this when enlarging the clock by clicking on it (it will show very tiny numbers). The measurements I took of the two heights again seems non-logical, but I guess it is the only way we can most accurately reproduce the original.

Measurement on the original clock 8's height

If anyone wants to implement these numbers or have a (maybe better) look themselves? I just wanted to point these things out and hope if I ever do make these changes myself people won't think I'm crazy for the these weird numbers.

Clock #9

I don't know if the contributors on clock number 9 realize the dots of the digits are made up of small analog clocks, as can be seen here: http://cmuems.com/2016/60212/wp-content/uploads/2016/09/maeda-10.gif.

Just wanted to point this out, since I would have made the same mistake had I not zoomed in on the picture.