正多角形

湧き上がる雲。いかにも夏の空。

しばらく前に css の三角関数の用途を考えて、時計の文字盤を作るのに使ってみた。文字盤のように円周上に何かを並べるには便利だとは思ったが、同時に、用途が文字盤しか思いつかないのはどうなんだとも思った。

そして今日。雲をぼんやり眺めているときに、三角関数を clip-path と組み合わせれば正多角形が作れるのではないかと閃いた。円周をN等分する点を結べばいいのだから簡単だろうと。

以下、その成果。

html


<div class="polygon_base">
  <div class="p3"></div>
</div>
<div class="polygon_base">
  <div class="p4"></div>
</div>
<div class="polygon_base">
  <div class="p5"></div>
</div>

css


.polygon_base {
  width:  200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  padding: 4px;
}
.polygon_base div {
  width:  100%;
  height: 100%;
  background: black;
}
.polygon_base .p3 {
  clip-path: polygon(
    calc( 50% + cos( 360deg / 3 * 0 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 3 * 0 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 3 * 1 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 3 * 1 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 3 * 2 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 3 * 2 - 90deg ) * 50% )
  );
}
.polygon_base .p4 {
  clip-path: polygon(
    calc( 50% + cos( 360deg / 4 * 0 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 4 * 0 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 4 * 1 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 4 * 1 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 4 * 2 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 4 * 2 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 4 * 3 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 4 * 3 - 90deg ) * 50% )
  );
}
.polygon_base .p5 {
  clip-path: polygon(
    calc( 50% + cos( 360deg / 5 * 0 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 5 * 0 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 5 * 1 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 5 * 1 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 5 * 2 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 5 * 2 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 5 * 3 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 5 * 3 - 90deg ) * 50% ),
    calc( 50% + cos( 360deg / 5 * 4 - 90deg ) * 50% )
    calc( 50% + sin( 360deg / 5 * 4 - 90deg ) * 50% )
  );
}

見ての通り、頂点の指定に同じ形の式を並べるだけ。根性さえあれば何角形でもできる。俺の根性は五角形で尽きかけているが。

同じ形の式の繰り返しだからと、 JavaScript で作ってみた多角形ジェネレーター。

数字を変えると、その数の正多角形を描画する。最小3から最大20まで。

折角の正多角形だが、15ぐらいから違いが地味になってきて、20はもう円。上限を20にしたのもこれが理由。これがゲームのグラフィックだったら、15ぐらいで円と言って許されそう。ポリゴンならシェーディングで余裕で誤魔化せそうだし。

で、この正多角形をどこで使うのか？

なんてことを考えちゃ駄目。

以下、ソース。

html


<div class="polygon_base">
  <div class="pN" id="p0"></div>
</div>
<div>
  <input type="number" value="3" min="3" max="20" onchange="applyNumber(this)" />
</div>

JavaScript


function applyNumber( elm ) {
  const n = parseInt( elm.value );
  const s = ( new Array( n ) )
            .fill( "" )
            .map( ( e, i ) => `calc( 50% + cos( 360deg / ${ n } * ${ i } - 90deg ) * 50% ) calc( 50% + sin( 360deg / ${ n } * ${ i } - 90deg ) * 50% )` )
            .join( "," );
  document.getElementById( "p0" ).style.clipPath = `polygon( ${ s } )`;
}

正五角形でちょっと頑張ったのを悔やんでしまう簡単さ。根性とか、ねぇ。