Giter Club home page Giter Club logo

abstract-clocks's Introduction

Abstract Clocks

These gradiental clocks are the result of the experimentation of representing time in abstract yet distict ways. Each clock has a different way of representing time, and are explained below. They'll make a lot more sense if you're looking at the clock though!

Clocks!

1 - Daily Rotation

This clock displays the time in 24 hour format. With the inner circle's dark edge, and the outer circles light edge pointing to the current time.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circles dark edge would be pointing perfectly to the top.
  • If the time were 6AM the inner circles dark edge would be pointing to the right (3 oclock on a regular clock)
  • If the time were midday, the inner circles dark edge would be pointing directly down.

2 - Hourly Rotation

This clock behaves similarly to a regular wall clock, with the inner circle's dark edge pointing where the minute hand would, and the other pointing to where the hour hand would be.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circles and outer dark edge would be pointing perfectly to the top.
  • If the time were 9.30AM the inner circles dark edge would be pointing to the bottom (30 minutes), and the outer edge pointing to the right (the 9 on a regular clock)
  • If the time were midday, again, both darker edges would be facing the top.

3 - Rise and Fall

This clocks gradients rise and fall throughout the day. With the outer gradient mirroring the inner.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circle will be mostly filled with the darker orange, as though the sun was down.
  • If the time were 6AM the inner circles gradient would be about centered, equal parts the ligher and darker colors.
  • If the time were midday, the inner circle would be mostly light. From this point onwards, the gradients will receed with time, returning to the darker colors at midnight.

4 - Hourly Rise and Fall

This clocks inner gradient rises and then quickly falls once each hour, the outer gradient rises and falls gradually throughout the day.

For Example:

  • If the time were 12 O'Clock (midnight) the inner circle will be mostly filled with the lighter white, as well as the outer gradient with the darker color.
  • If the time were 6.30AM the inner circles gradient would be about centered, equal parts the ligher and darker colors. The outer, a little over 1/4 of the way up.
  • If the time were 12.45, the inner circle would be mostly dark (75%). The outer gradient, will be mostly light, but will be falling back to dark again, as we've passed the middle of the day.

5 - Rainbow

This clock is a color circle, rotating through time on a 12 hour schedule. The best way to understand it, is to know which colors match each time.

For Example:

  • If the time were 12 O'Clock, the clock would be split between yellows and greens.
  • If the time were 6AM or PM, the clock would be spit between purples and reds.
  • If the time were 9AM or PM, the clock would be split between reds and oranges.

abstract-clocks's People

Contributors

stefanvanburen avatar tholman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.