こんにちはです。あっちのそららです。
今回は、HTMLとCSS（ウェブ制作などで使う言語）で、太陽を描画してみました。
「Result」で確認できます（レスポンシブ対応済）。
静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。
ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。
正方形を描画する
spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランスと計算のしやすさを考慮し、今回は10個としました。
<span style="--i: 0;"></span> <span style="--i: 1;"></span> <span style="--i: 2;"></span> <span style="--i: 3;"></span> <span style="--i: 4;"></span> <span style="--i: 5;"></span> <span style="--i: 6;"></span> <span style="--i: 7;"></span> <span style="--i: 8;"></span> <span style="--i: 9;"></span>
style属性で「i」という名前の変数を定義し、各正方形に0～9の連番を設定しました。この連番は、後の計算に必要となります。
基準位置を決める
全ての正方形を中央寄せで同じ位置に重ねます。この位置が基準点となります。
中央寄せのCSSは下記のとおり。
.sun_square span { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
translateの値は、三角関数を使う際に追記することになります。
三角関数で位置を計算
下準備ができたので、ここから三角関数を使用し、正方形を円周上に配置していきます。
.sun_square span { --angle: calc(360deg / 10 * var(--i)); --x: calc(cos(var(--angle)) * 100%); --y: calc(sin(var(--angle)) * 100%); translate: calc(var(--x) - 50%) calc(var(--y) - 50%); }
正方形の位置を算出する3つの変数「angle」「x」「y」を定義します。angleで角度を求め、その結果から正方形のx座標・y座標を計算します。
- angle
360度 ÷ 正方形の数 × 連番 - x
コサイン関数（angleの値）× 半径 - y
サイン関数（angleの値）× 半径
x座標・y座標を算出したら、その値をtranslateに入れます。
これで、正方形が円周上に配置されました。
正方形を回転
正方形が全て同じ角度なので、rotateで連番に応じて回転させます。
計算式は「360度 ÷ 正方形の数 × 連番 + 45度」となります。
.sun_square span { rotate: calc(360deg / 10 * var(--i) + 45deg); }
- 連番0 = 45度
- 連番1 = 81度
- 連番2 = 117度
- 連番3 = 153度
etc.
これで太陽らしい形になりました。
自分で計算して直接数値を入れてもいいですが、自動計算のほうが効率的で、後々正方形の数を変えたくなったときに、サクッと修正できるメリットがあります。
おわりに
数学をロクに勉強してこなかったので、三角関数への理解はまだまだですが、それなりに扱えるようにしていきたいと思います。
需要があるかは不明瞭。
