三角関数

今夜は満月。輝く金色の月。まあいつもの通り、写真だと金色感も微妙になってしまうのだが。

月で繋がる訳ではないが、一昨日に続いて今日も、いつの間にか実装されていた css の便利機能について。

単位が異なる値の計算ができて死ぬほど便利な calc だが、この中で三角関数も使えるようになっていた。

三角関数が使えて嬉しい人はあまりいないかもしれないが、何であれ、使えないよりは使えた方が良いだろう。と、最初はどちらかというと消極的な歓迎だったのだが、ゲームを作りたい人やデザインに拘りたい人にはきっと便利なんだろうと認識を改めた。で、自分だったら… と暫く考えて、時計の文字盤を作ってみた。

その1

その2

III

VII

VIII

XII

html


<p>その1</p>
<div class="clock type1">
  <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>

<p>その2</p>
<div class="clock type2">
  <div class="hour" style="--hour:1">I</div>
  <div class="hour" style="--hour:2">II</div>
  <div class="hour" style="--hour:3">III</div>
  <div class="hour" style="--hour:4">IV</div>
  <div class="hour" style="--hour:5">V</div>
  <div class="hour" style="--hour:6">VI</div>
  <div class="hour" style="--hour:7">VII</div>
  <div class="hour" style="--hour:8">VIII</div>
  <div class="hour" style="--hour:9">IX</div>
  <div class="hour" style="--hour:10">X</div>
  <div class="hour" style="--hour:11">XI</div>
  <div class="hour" style="--hour:12">XII</div>
</div>

css


:root {
  --R: 150px;
  --r: 120px;
}

.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;
}

.type2 .hour {
  transform: rotate( calc( var( --hour ) * 30deg ) ) scale( 0.8, 1.6 );
  letter-spacing: -2px;
}

三角関数は、円周上に時刻の文字を置くための位置決めに使っている。

三角関数が使えない時代は、時刻の文字を配置する位置を自分で計算し、記述する必要があった。それが今や計算式を記述するだけ。その式も、三角関数の中で変数が使えるので、 left と top で一つ記述すれば済む。数値の精度を気にする必要も無い。

超便利！

いやまあ時計の文字盤にどれだけ需要があるのか、まずそこが疑問ではあるが。

せっかく良い感じに文字盤ができたことだし、短針長針秒針つけて動くようにしてみよう。そのうちに。もうちょっと暇になったら。