ハクソク

世界を動かす技術を、日本語で。

異なる時計

301日前原文(ianto-cannon.github.io)

概要

Ianto Cannonによる時計グラフィックは、JavaScriptで描画されるスケーラブルベクターグラフィックス。 複数の視覚的表現（バイナリ、ポリゴン、ブロブなど）を用いた時刻表示。 ソースコードの利用・改変が自由。 未来の2038年問題や天体運動も表現。 各時計の特徴と動作原理の解説。

Ianto Cannonの時計グラフィック概要

  • Ianto Cannon 作成の時計グラフィック集
    • JavaScript で描画される SVG形式
    • ソースコード の自由な利用・改変が可能

バイナリ時計

  • Unix時間 を二進数で表示
    • 1970年からの経過秒数で計算
    • 2038年問題 （32ビットオーバーフロー）に言及
    • 二十億秒突破時の象徴的な「時の塔」表現

ポリゴン時計

  • yy:M:w:d:h:mm:ss 形式で時刻を多角形で表示
    • 月 ：1月は空の多角形、12月は完全な多角形
    • 週 ：月内の週数で形状変化
    • 曜日 ：月曜は空、日曜は完全な多角形

ブロブ時計

  • blobmaker に着想を得た変形グラフィック
    • 最左のブロブは千年周期の波
    • 続くブロブは年、日、時、分、秒ごとに波が通過
    • 最後のブロブは全ての波を重ねた複合表現

太陽系時計

  • 地球と月の軌道 を北極星視点で描画
    • 黄道十二星座 を背景に固定
    • 地球の 自転軸傾斜 を10°刻みでシェーディング
    • 夏至・冬至 を軌道上で明示（±23.5°）

Peaks時計

  • 最も高いピーク が千年で右から左へ移動
    • 次に高いピークは年、日、時、分ごとに移動
    • 長周期から短周期までの時間表現

Waves時計

  • Peaks時計 に類似、ただし ベジエ曲線 を利用
    • 鋭いエッジの代わりに滑らかな波形を描写

利用条件・著作権

  • Ianto Cannon による2025年7月31日付著作
    • 自由な利用・改変 が許可されたオープンなプロジェクト

Hackerたちの意見

千年に一度のマークは魅力的だね。なんか理解できそうで、でもちょっと届かない感じ。

└

ロングナウの時計だね！

└

YouTubeのあの狂ったギア比の動画みたいだね…最後のギアが回ってるのは分かるけど、ギアが一回転する前に太陽が地球を飲み込むって考えると、なんか変な視点になるよね。

└

思い出したのはこれ: https://en.wikipedia.org/wiki/Pitch_drop_experiment 「各滴は約10年の間に形成されて落ちる。」 「少なくともあと100年は続くのに十分なピッチが漏斗にあると予想されている。」 たくさんのピッチがあれば、千年スケールの「水」（液体）時計を作れるんじゃない？

AIのコーディングツールで色んな時計のコンセプトを作るのが楽しいよ！「Against the Run」の一発再現を作ってみたよ。こちらから見てね：https://g.co/gemini/share/c1dcfbd9cf9a

結合したブロブ時計、めっちゃ好き！時間、分、秒だけのコードペンを作るつもりなんだ。それがどんな感じになるか見てみたいな。

└

終わったら、ぜひ見せてほしいな。他の人も見たいと思うよ。あの部分に来たとき、まさに同じことを考えてたから！

└

これが私が考えたものなんだけど、元のアイデアを踏まえて、みんなが好きなようにアレンジしてほしいな。今は時間の形、時間と分の形、時間と分と秒の形があるよ。 https://codepen.io/rezmason/pen/empBWgY?editors=1111 基本的なスタイルのバリエーションを超えて、形や回転の中心に関して実験する余地がたくさんあると思う。

└

そうだよね？ザ・タイム・ブロブを見るのはなんか妙に満足感があるよね。

すごくクールだね。昔のiPhoneの時計アプリ「hms」を思い出すよ。長方形のプリズムを表示してて、各次元（x, y, z）が時間、分、秒に対応してたから、時間が経つにつれて形が大きくなって、リセットされることもあったんだ。何かの理由で数年前に削除されちゃったけど、「ナイトスタンドモード」の時計として大好きだったな。

└

https://hms.gysin-vanetti.com/

いいね、すごく革新的！パックマンがダイヤルの周りを走り回って、秒を食べていくっていうのも面白いかも。ウーカウーカウーカウーカ...

└

以前、物理的な時計のアイデアを思いついたことがあって、60個のリンクが中央のモーターの周りを回ってて、そのチェーンがすごくゆっくり動くから、一番上のリンクが12分の範囲内で正しい時間を示すっていうものだったんだ。12時間の時計で1時間に5リンク進む感じ。人生で一度は時間の表現を再デザインしてみるべきだよ :)

└

パックマンの時計がたくさんあるけど…大体はあんまり面白くないかな。でも、この時計 [1] は探してるものかも。 [1] https://timexjapan.com/products/pac-man-x-timex-camper

バイナリー時計は、ベルリンの動物園近くにある実際の時計を思い出させるな。

└

ベース5みたいだけど、めっちゃクールだね！

└

バイナリー時計は、昔テレビ放送で再生されていたビデオテープのバーを思い出させるな。あれは https://en.wikipedia.org/wiki/Vertical_interval_timecode みたいには見えなかったけど、ストライプだからね。PAL特有のものかも？

└

スイスのサン・ガレン駅にもあるよ: https://en.m.wikipedia.org/wiki/File:Binary_clock_Swiss_rail...

「ピーク」の時計の一番上の時間にカーソルを置いたんだけど、少ししたら左にちょっとずれた。時間が過ぎていくのを見て、ちょっと存在の不安を感じたよ。でも、いい時計だね。

└

もうちょっと存在の不安を感じたいなら、ここだよ。 https://ttl.hex.nz/

バイナリー時計と波形時計が好きだな。これがランディングページのフッターとかで微妙なグラフィック要素として使えるかもってすぐに考えちゃった。

ハノイの塔が抜けてるよ、俺のお気に入りの時計なんだ。 https://saej.in/post/hanoi/

└

ハノイの時計は、ディスクの位置をバイナリビットにマッピングすることで時間を表現してるんだ。各合法なタワーの状態が一瞬をユニークにエンコードしていて、一番小さいディスクが毎分動くことで、美しい再帰的なパターンが生まれる。大きいディスクは指数関数的に動く頻度が少なくなるんだよね。

面白い時計が好きなら、デジタルじゃないけど見るのが楽しい時計があるよ（ダジャレのつもり）。コーパス時計 - ウィキペディア https://share.google/aAjMb15aeaVvHLJFa