CSSフレームワークを使おう
■第37話：CSSで三角関数を利用しよう（sin, cos, tan）
（最終更新日：2023.04.09）
（絵が小さい場合はスマホを横に）
「三角関数って使うことあるの？」
学生時代に「三角関数は意味があるのか？」や「実際に使われるのか？」といった会話を一度は経験したことがあるだろう。
たしかに、日常生活において三角関数を利用する機会はほとんどない。
しかし、よく観察すると、建築や電子機器、音響、ロボティクスなど多岐にわたる分野で三角関数が活用されている。
今回、CSSの三角関数を用いて音のスペクトラムアナライザの動きを再現してみた。
このような計算は、波やうねりをデザインで表現する際に役立つ。
デザインにちょっとしたアクセントを加えたいと思ったとき、CSSの三角関数を活用してみるのも一つの方法だ。
「今までのデザインに少しだけアクセントを付けたい！」。そう思ったときにCSSの三角関数を使ってみよう。
１.CSSの三角関数
CSSでは、sin()、cos()、tan()、asin()、acos()、atan()、および atan2() といった三角関数を扱うことができる。 三角関数について忘れてしまった方のために、ここでsinを簡単に説明しよう。 sinは0度で0、30度で0.5、90度で1となり、さらに180度で0、270度で-1、そして360度で0となる周期的な関数である。 これらの計算がCSSで利用可能であるということだ。
２.スペクトラムアナライザーを表現してみる
今回、0～90度の範囲で三角関数sinを繰り返し利用することで、 音波のようなうねりがスペクトラムアナライザで解析された様子を表現してみた。 その結果、以下のような表現が実現できた。
CSSの三角関数を用いてスペクトラムアナライザを表現
以下のようなコードを用いて、これらの表現を作成した。 基本的にはCSSのアニメーション機能を活用して実装している。1周期を3秒とし、50%で最大値を取るように設定している。 9度および5%ずつの区切りが付けられているが、より細かく設定すれば、sin関数の周期的な動きに近づくことができる。 また、0.5秒ずつずらした棒グラフを並べるだけである。この0.5秒ずつの離散的な値がデジタル信号感を演出している。 本来であれば動画ではなく、コードを直接添付するのが適切だが、2023年3月までにChromeが対応していないため、 動画での表現となっていることをご了承いただきたい。
三角関数でスペクトラムアナライザを表現したCSS（上）、HTML（下）
３.CSSで変数、引数を取り扱う
上記のCSSのコードで「見慣れない表現だ」と思った方もいると思うので簡単に説明する。 :rootと書くことで、<html></html>の中で機能するグローバルなCSSの値をを扱うことができる。 --delay: 0s;で初期値0sを表している。animation-delayのプロパティ値にvar(--delay)とすることで値を代入でき、 あとはHTMLのstyleの中で都度、--delayの値を上書きすれば--delayを引数のように使うことができる。
４.まとめ
今回はCSSの三角関数について解説した。2023年1月時点で、まだChromeとEdgeはこれに対応していないが、
3月から対応が予定されているので、安心して利用できるだろう。
この実装により、CSSだけで関数的な動きや計算を表現することが可能になった。
これまでJavaScriptが必要だと考えられていた表現も、今後はCSSでどんどん表現できるようになることが期待される。
後は制作者の使い方次第である。Web制作において他の人と差をつけるためにも、三角関数をはじめとした関数の機能を活用してみよう。
▼参考図書、サイト
CSSに三角関数が欲しくなった日 Zenn
cos()関数 havin' a coffee break