面白い解説動画があったので紹介しておきます。
正多角形の定義は「すべての辺の長さと内角の大きさが等しい図形」です。
内角を求める公式で計算すると、正2.5角形の一つの内角の大きさは36°になるから、これを頼りに作図すると…なんと五芒星となります。
ちなみにn/mは2より大きい有理数です。
作図program
本家の不要な部分を削ぎ落としてあります。しかしcssによるanimationは健在なので処理が重いかも
<!DOCTYPE html><html lang=ja><head>
<meta charset=utf8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1.0">
<title>正n/m角形</title>
<style>
*{margin:0;padding:0}
body{background-color:#000;text-align:center}
form{color:#fff;margin-top:60px}
@keyframes example{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}}
#cv{animation:20s linear infinite example}
form{margin-top:20px}
</style></head><body>
<form id=select name=select>
正<input id=number type=number value="2.5">角形
<input type=button value="作成" onclick="check()"><br>頂点:<span id=vertex>5</span>個
<p>(2より大きな有理数を入力)</p>
</form>
<canvas id="cv"width="500"height="500"></canvas>
<script>{
//canvasの設定
const cvs=document.getElementById("cv"),ctx=cvs.getContext("2d"),grad=ctx.createLinearGradient(0,0,0,600);
grad.addColorStop(0,'rgb(255,255,0)');
grad.addColorStop(0.5,'rgb(0,255,255)');
grad.addColorStop(1,'rgb(255,0,255)');
ctx.lineWidth=1;
//作図関数
function check(){
var j=4,v=+document.select.number.value||2.5,n=Math.floor(v*10000+0.5),theta=Math.PI*2/v,r=200;
for(;j--;n%5||(n/=5))n&1||(n/=2);
document.getElementById('vertex').textContent=n;
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.strokeStyle=grad;
ctx.moveTo(250+r*Math.cos(theta),250+r*Math.sin(theta));
for(;n--;)ctx.lineTo(250+r*Math.cos(theta=theta+Math.PI*2/v),250+r*Math.sin(theta));
ctx.stroke()
}
}</script>
体験版