PROGRAMMA PER DISEGNARE UN POLIGONO REGOLARE DI num LATI INSCRITTO IN UN POLIGONO REGOLARE DELLO STESSO NUMERO DI LATI

Tratto da
POLIGONO REGOLARE INSCRITTO IN UN POLIGONO REGOLARE

  1. Preparare una pagina HTML
    <!DOCTYPE html> <html> <body>
  2. Dichiarare la canvas
    <canvas id="lavagna" width="450" height="450"> Your browser does not support the HTML5 canvas tag.</canvas>
  3. Memorizzare in una variabile l'identificativo della canvas;
    creare un contesto che permetta di lavorare con la grafica, nel nostro caso bidimensionale;
    porre l'origine al centro della canvas;
    dichiarare il numero di lati, l'unitą di misura preferita e la costante k:
    <script>
    var c = document.getElementById('lavagna');
    c.width=c.width;
    var ctx=c.getContext("2d");
    var Ox = c.width/2;
    var Oy = c.height/2;
    ctx.translate(Ox,Oy);
    const num = 5 //se si vuole un pentagono
    const k = 0.25; // costante di proporzionalitą fra i lati
    const u = 180; // unitą di misura preferita
  4. Dichiarare due variabili di tipo strutturato per memorizzare le coordinate dei vertici:
    var x = new Array(); //ascisse vertici
    var y = new Array(); //ordinate vertici
  5. Calcolare l'angolo al centro alfa;
    trovare le coordinate di A e degli altri vertici
    const alfa = 2*Math.PI/num;
    x[0]=-Math.sin(alfa/2); //vedi PRIMA PARTE
    y[0]=Math.cos(alfa/2);
    for (i=1; i<=num-1; i+=1){ //vedi SECONDA PARTE
     x[i]=x[i-1]*Math.cos(-alfa) - y[i-1]*Math.sin(-alfa);
     y[i]=x[i-1]*Math.sin(-alfa) + y[i-1]*Math.cos(-alfa);
    }
  6. Disegnare il poligono
    ctx.beginPath();
    ctx.moveTo(u*x[0],u*y[0]);
    for (i=1;i<=num-1;i+=1){
       ctx.lineTo(u*x[i],u*y[i])
    }
    ctx.closePath()
    ctx.stroke();
  7. Trovare i vertici del poligono inscritto //vedi spiegazione
    var appox=x[0];
    var appoy=y[0]
    for (i=0; i<=num-2; i+=1){
    x[i]=(1 - k) * x[i] + k * x[i+1];
    y[i]=(1 - k) * y[i] + k * y[i+1];
    }
    x[num-1]=(1 - k) * x[num-1] + k * appox;
    y[num-1]= (1 - k) * y[num-1] + k * appoy;
  8. Disegnare il poligono
    ctx.beginPath();
    ctx.moveTo(u*x[0],u*y[0]);
    for (i=1;i<=num-1;i+=1){
    ctx.lineTo(u*x[i],u*y[i])
    }
    ctx.closePath()
    ctx.stroke();
  9. Chiudere lo script e il documento HTML
    </script>
    </body>
    </html>

TORNA INDIETRO