Pola Segi-N beraturan ~ Pemrograman dan Teknologi

Untuk membuat pola segi-n beraturan, kita bisa menggunakan sin dan cos. Segi-n beraturan memiliki beberapa titik yang jaraknya sama ke titik tengah. Jarak tersebut bisa kita kalikan dengan sin dan cos suatu sudut "yang selisihnya sama".

Untuk membuat segi-n beraturan, yang harus kita lakukan yaitu :

Mencari selisih sudut tiap titiknya dengan rumus "360 / jumlah_sisi". Misalnya, untuk membuat segitiga, selisih sudutnya adalah "360/3=120".
Dengan memulai dari titik 0 derajat, kita bisa mendapatkan beberapa titik sudut sesuai jumlah sisi dari segi-n beraturan yang kita inginkan. Misal, untuk segitiga sudutnya adalah 0, 120 dan 240 karena selisih sudutnya 120 derajat.
Setelah sudut di dapat, kita bisa menghubungkan titik-titik yang berjarak sama dengan sudut yang sudah kita tentukan. Segi-N beraturan bisa dibuat dengan menghubungkan titik-titik yang jaraknya sama dari "titik tengah" segi-N tersebut. Setiap titik dari segi-n beraturan adalah hasil perkalian dari "nilai sin dan cos tiap titik sudut" dengan "jarak dari titik tengan atau radius" yang kita inginkan.
Programnya akan membutuhkan beginPath() untuk menggambar bangun datar dengan menggunakan garis di canvas. Perulangan dan method lineTo akan dibutuhkan untuk menghubungkan tiap titik dari segi-N beraturan yang akan kita tampilkan.
Setelah kalian menghubungkan semua titiknya, berikan warna dengan stroke() dan fill().

Contoh penerapan dari script-nya bisa kalian lihat di bawah ini.

<html>
<head>
</head>
<body>
    <canvas width="640" Height="640" id="kanvas" style="background-color:pink;">
        Canvas tidak dapat ditampilkan
    </canvas>
  <script>
 var kanvas=document.getElementById("kanvas");
 var ct=kanvas.getContext("2d");
 var gambar=new Image();

 var i=0, deg2rad, derajat, radius=320, sisi=9;
 var x1=320, y1=320, x2=160, y2=160; 

 ct.fillStyle="blue";
 ct.strokeStyle="red";
 deg2rad=Math.PI/180;
 ct.beginPath(); 
 derajat=360/sisi;
 for(i=0;i<360;i+=derajat){
     x2=Math.cos(i*deg2rad)*radius;
     y2=Math.sin(i*deg2rad)*radius;
     ct.lineTo(x1+x2, x1+y2);
 }
 ct.fill();
 ct.stroke();
  </script>
</body>
</html>

Segi-n beraturan bisa dikembangkan menjadi pola berbentuk bintang atau bisa juga dijadikan dasar untuk menggambar lingkaran. Lingkaran berukuran kecil bisa dibuat dengan membuat bangun datar segi 360 (atau bangun beraturan lain dengan sisi lebih banyak).

Selanjutnya saya cuma mau berbagi keisengan yang saya buat. Silakan ketik saja script berikut ini untuk menggantikan script pada kode HTML di atas. Kemudian, lihat hasilnya.

var kanvas=document.getElementById("kanvas");
var ct=kanvas.getContext("2d");
var gambar=new Image();
var i=0, radius2, deg2rad, radius1=320, derajat=72;
var x1=320, y1=320, x2=160, y2=160;

ct.fillStyle="red";
ct.strokeStyle="red";

ct.clearRect(0, 0, kanvas.width, kanvas.height);
ct.beginPath();
ct.arc(x1, y1, radius1, 0, 2*Math.PI);
ct.fill();
ct.stroke();

ct.fillStyle="blue";
ct.strokeStyle="red";
ct.beginPath();
deg2rad=Math.PI/180;
x2=(Math.cos(0)-Math.cos(derajat*deg2rad))*radius1;
y2=(Math.sin(0)-Math.sin(derajat*deg2rad))*radius1;
radius2=Math.sqrt(x2*x2+y2*y2)/3;
ct.moveTo(Math.cos(0)*radius1+x1, Math.sin(0)*radius1+y1);
for(i=0;i<360;i+=derajat){
    x2=Math.cos(i*deg2rad)*radius1;
    y2=Math.sin(i*deg2rad)*radius1;
    ct.lineTo(x1+x2, y1+y2);

    x2=Math.cos((i+36)*deg2rad)*radius2;
    y2=Math.sin((i+36)*deg2rad)*radius2;
    ct.lineTo(x1+x2, y1+y2);
}
ct.fill();
ct.stroke();

radius2/=2;
ct.fillStyle="yellow";
ct.strokeStyle="red";
deg2rad=Math.PI/180;
ct.beginPath(); 
for(i=0;i<360;i++){
    x2=Math.cos(i*deg2rad)*radius2;
    y2=Math.sin(i*deg2rad)*radius2;
    ct.lineTo(x1+x2, x1+y2);
}
ct.fill();
ct.stroke();