Color Shape Clockは、色と形で時刻を表す

<Javascript>

Q: さて、これは何時何分何秒を示しているでしょうか？

A: 午前0時27分31秒

なぜそうなるのかは一旦置いておきましょう。まず、授業でこんな感じの課題が出ました。

　読むのめんどくさいだろうから簡単に説明すると、「web用の時計を作るわけですが、数字を使わず正確な時刻が判別できる、いい感じの時計を作りましょう」っていうことである。

つまり、条件として...

1: 数字を使わない

2: 正確な時刻が見てわかる

3: いい感じに仕上げる

　ちなみに、作る技術はがんばって自分らでなんとかしてね。という、この学部お得意のいつも通りのパターンである。また、基本的に課題に普通のものを求められない。なにかしら工夫して、目新しいものを作ってね。という、これもいつも通りのパターン。

　時計の機能はもつが、それとは分からないものを作ることが求められる。と解釈。時計っぽくない時計を作ればいいのだ。いつも通りノートに適当にアイデア出しをする。期日的にそんな時間も取れないので、いい感じのアイデアを今の自分の能力でできる形に落とし込んでいく。

　上図のページ左下のように、パーツを個別にするのではなく右上のようにパーツを内包するアイデアを取ることにした。一見特に意味が分からない全体があって、個別に見ていくと「あー、なるほどね。」という感じよくないですか？

　形状で、時、分、秒を分けて、数字を色で表す。色以外でできたらおもしろそうだが、凝っていたら時間がないので、パッとできそうな色で数字を表すことに。形は明らかにハリーポッターの死の秘宝のマークである。実際パクリである。いや、なんか描いてたらそれっぽくなってしまったのである。丸と三角と四角という基本的な図形を使うという幾度学構成を意識した結果である。

　色は配色の基本である色相環という便利なツールがあるので、それを元に色に数字を割り振っていく。

赤：０　橙：１　黄：２...ってな風に時計回りに 0~9を割り振る。

　ここまできたら後は実装するだけである。ちなみに、AMかPMかは明度の違いでわかるようになっている。AMの方がPMより明度が高くなっている。

　ぜひ、下の動画を見て何時何分何秒か当ててみてください。ちなみに自分は、色相環を参考にしないとパッとわかんないです...。ま、現在時刻見たらワカルンデスケドネ。

以下がお手軽ソースコードである。