そして時は動き出す

ホラーゲームのオープニングのような赤い月。

もうちょっと暇になったら… なんて思っていたが、暇になるのはずっと先なんじゃないか。そんないつ来るか判らない未来を、ただ待ってるだけで良いのか。ということで、今日、昨日の文字盤に時針分針秒針をつけて動かすことにした。攻めの姿勢で現実逃避。

そして出来たのがこれ。

html


<div class="clock">
  <div class="hour" style="--hour:1">1</div>
  <div class="hour" style="--hour:2">2</div>
  <div class="hour" style="--hour:3">3</div>
  <div class="hour" style="--hour:4">4</div>
  <div class="hour" style="--hour:5">5</div>
  <div class="hour" style="--hour:6">6</div>
  <div class="hour" style="--hour:7">7</div>
  <div class="hour" style="--hour:8">8</div>
  <div class="hour" style="--hour:9">9</div>
  <div class="hour" style="--hour:10">10</div>
  <div class="hour" style="--hour:11">11</div>
  <div class="hour" style="--hour:12">12</div>
  <div class="hand hand_h"></div>
  <div class="hand hand_m"></div>
  <div class="hand hand_s"></div>
</div>

css


:root {
  --R: 150px;
  --r: 120px;
  --deg-h: 0;
  --deg-m: 0;
  --deg-s: 0;
}

.clock {
  position: relative;
  width:  calc( var( --R ) * 2 );
  height: calc( var( --R ) * 2 );
  border: 1px solid black;
}
.hour {
  position: absolute;
  left: calc( var( --R ) + var( --r ) * cos( var( --hour ) * 30deg - 90deg ) );
  top:  calc( var( --R ) + var( --r ) * sin( var( --hour ) * 30deg - 90deg ) );
  translate: -50% -50%;
  text-align: center;
  font-family: 'Times New Roman';
  font-size: 28px;
}
.hand {
  position: absolute;
  left: 50%;
  top: 0;
  height: calc( var( --R ) * 2 );
  translate: -50%;
  background-color: #000000;
}
.hand_h {
  width: 15px;
  clip-path: polygon( 0 50%, 50% 20%, 100% 50%, 50% 55% );
  transform: rotate( calc( 1deg * var( --deg-h ) ) );
}
.hand_m {
  width: 10px;
  clip-path: polygon( 0 50%, 50% 13%, 100% 50%, 50% 60% );
  transform: rotate( calc( 1deg * var( --deg-m ) ) );
}
.hand_s {
  width: 5px;
  clip-path: polygon( 0 50%, 50% 5%, 100% 50%, 50% 65% );
  transform: rotate( calc( 1deg * var( --deg-s ) ) );
}

JavaScript


window.onload = () => {
  setInterval( () => {
    const d = new Date();
    const h = d.getHours();
    const m = d.getMinutes();
    const s = d.getSeconds();
    const p = document.querySelector( ":root" );
    p.style.setProperty( "--deg-h", 360 / 12 * h + 360 / 12 / 60 * m ); 
    p.style.setProperty( "--deg-m", 360 / 60 * m ); 
    p.style.setProperty( "--deg-s", 360 / 60 * s ); 
  }, 500 );
};

文字盤は昨日に同じ。

時針分針秒針の実体は div で、黒く塗り潰して clip-path で針の形に切り出し、文字盤の中央に配置する。

針の回転は css の transform: rotate を使う。時分秒のそれぞれに変数を用意し、回転角がその変数で決まるようにする。

それらの変数を JavaScript で、現在の時分秒の値に応じて設定する。この処理を定周期で実行する。

実行周期は 500ms とした。 1秒周期でも良いのだが、それだと微妙にズレる時がある。しかし requestAnimationFrame を使ってまで精度と安定を求める程のものでもない。なので実行周期をちょっとだけ細かくして妥協。

秒と分は時刻の値をそのまま設定しているが、時の位置（回転角）は分の値で補正している。 10時59分なのに時針が10時の位置だと、ちょっと無視できない違和感があったので。

で、一通りできて振り返ってみるに、便利になったよな。特に css が。遠い昔に苦労したことが、今ではほんの数行の記述で済んでしまうからね。

ところで、ここで作ったものも含めて時計だが、なんか時間を忘れてぼーっと見てしまうことがある。ふと気がつくと、随分と時間が経っていたりとか。時計を見て時間を忘れるって、時計の全否定って気がしないでもないが。

そういえば、そんな能力を持ったスタンドがいたな。確かキング・クリムゾン。俺も攻撃されていたのだろうか。いや、流石にマフィアのボスに攻撃される理由がないし、あったとすれば巻き添えか。

なんて思いながら調べてみたら、キング・クリムゾンの能力は10秒の時間跳ばしだった。

俺がぼーっとして失った時間は、10秒なんてチャチなものじゃないのだが。