Me, as a clock.

clock2.gif

I wondered: what If if instead of a clock telling me the time, I could tell me the time? So Me, As A Clock, was born. You can make your own version with You, As A Clock, using the code in this repo. This also might be art— I'm not totally sure! Check out a demo of it here, and follow along after the break to make your own. Click for live clock.

Make Your Own

It's pretty simple. This is a lightweight and easy to embed javascript based image clock. In this repo you'll find clock.js, clock.html and a folder called img. clock.html is an example of styling and embedding the clock into HTML, clock.js contains the actual code for the clock, and img contains the images for each digit. You'll want to keep those files and folders in the same directory, or change the paths in clock.js and clock.html.

Download This Repo

You heard me— Clone or download this repo.

Adding Your Images

By default, it's images of me. You'll probably want images of you! You'll need to create images of you for each digit and colon. You'll ideally want uniform sized images with a plain white background, which will likely require some editing. Once you have them, name them as follows, and replace the default images in the img folder with your own:

  • 0.jpg
  • 1.jpg
  • 2.jpg
  • 3.jpg
  • 4.jpg
  • 5.jpg
  • 6.jpg
  • 7.jpg
  • 8.jpg
  • 9.jpg
  • colon.jpg

Finishing Up

Great job! You did it! Open clock.html in your preferred browser*. You should see yourself as a clock! Check out clock.html in your favorite text editor and see how styling works– you can make it your own and optimize it for embedding in your own website by changing parameters in the #clock style.

And of course, there's a world of possibility here- you could make a clock with each digit as a different friend, family member, coworker, animal, or anything else you can think of. If you make something awesome, hit me up!

Notes

  • Clock code based on this stackoverflow question.