Tutorial per inscrivere un poligono regolare in un poligono regolare con rotazione e omotetia

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER LA COSTRUZIONE DI UN POLIGONO REGOLARE INSCRITTO IN UN POLIGONO REGOLARE CON LO STESSO NUMERO DI LATI ATTRAVERSO UNA ROTAZIONE SEGUITA DA UNA CONTRAZIONE

Il presente tutorial si riferisce a "poligoni regolari inscritti in poligoni regolari: secondo metodo" della guida a MATEMATICA CON JAVASCRIPT, area Canvas.

Abbiamo preparato un documento che ha l'aspetto definito dalle righe di codice inserite nell'area di testo in basso a sinistra.
In particolare notate le due costanti

const num = 5 //se si vuole un pentagono e
var p = 45; //angolo di rotazione in gradi: attenzione! prendi 0 < p < alfa (angolo al centro)

potete variare num per ottenere un poligono regolare con un diverso numero di lati e p per variare l'angolo di rotazione.

E' possibile osservare l'anteprima cliccando sul tasto:

A LATO per osservare il risultato nell' iframe a destra nella pagina;
POPUP per osservare il risultato in una finestra popup

NOTA BENE - Gli utenti google chrome possono solo visualizzare il risultato in una popup, a causa del malfunzionamento del browser con gli iframe.

Infine, cliccando sul tasto AGGIORNA, viene ricaricata la pagina corrente come è adesso:

IN EVIDENZA DAL SITO

www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi

Link utili dalla nostra guida

Trasformazioni geometriche:
traslazione - translate(),
omotetia - scale(),
rotazione - rotate().

CODICE

<!DOCTYPE html> <!DOCTYPE html> <html> <body> <canvas id="lavagna" width="400" height="400"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById('lavagna'); 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 u = 180 //unità di misura preferita const alfa = 2*Math.PI/num; //angolo al centro const beta = (num-2)*Math.PI/num; //angolo interno poligono var p = 15; //angolo di rotazione in gradi: attenzione! prendi 0 < p < alfa p = p*Math.PI/180 //angolo p trasformato in radianti var x=Math.sin(alfa/2); //coordinate del vertice di partenza var y=-Math.cos(alfa/2); Disegna(x,y,'navy'); //disegna il poligono gamma = Math.PI-beta-Math.abs(p); k = Math.sin(Math.abs(p))/(Math.sin(Math.abs(p)) + Math.sin(gamma)); q=k*Math.sin(beta)/Math.sin(Math.abs(p)); ctx.rotate(-p); //rotazione di angolo p ctx.scale(q,q); //contrazione di rapporto q Disegna(x,y,'red'); //disegna il poligono function Disegna(x,y,color) { //procedura "Disegna" ctx.beginPath(); ctx.moveTo(u*x,u*y); ctx.lineTo(-u*x,u*y); ctx.strokeStyle=color ctx.stroke(); for (i=1; i<=num-1; i+=1){ ctx.rotate(alfa); ctx.beginPath(); ctx.moveTo(u*x,u*y); ctx.lineTo(-u*x,u*y); ctx.stroke(); } for (i=1; i<=num-1; i+=1){ ctx.rotate(-alfa); } } </script> </body> </html>

RISULTATO

Matematica con javascript, area Canvas: Indice - Inscrivere un poligono regolare - Programma interattivo con animazioni Matematica con javascript Indice

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER LA COSTRUZIONE DI UN POLIGONO REGOLARE INSCRITTO IN UN POLIGONO REGOLARE CON LO STESSO NUMERO DI LATIATTRAVERSO UNA ROTAZIONE SEGUITA DA UNA CONTRAZIONE

CODICE

RISULTATO

TUTORIAL PER LA COSTRUZIONE DI UN POLIGONO REGOLARE INSCRITTO IN UN POLIGONO REGOLARE CON LO STESSO NUMERO DI LATI
ATTRAVERSO UNA ROTAZIONE SEGUITA DA UNA CONTRAZIONE