Albero di Pitagora in HTML5 canvas

Contatti	MATEMATICA CON JAVASCRIPT ALBERO DI PITAGORA CON ANGOLI ACUTI DI 30° E 60° REALIZZATO CON IL TAG HTML5 CANVAS

Trovate qui il codice e l'anteprima del programma che genera l'albero di Pitagora con angoli acuti di 30° e 60° con metodo geometrico passo per passo.

Argomenti correlati:

Tali capitoli sono contenuti nella sezione caos e oggetti frattali del nostro sito, nella quale potete anche trovare, oltre che approfondimenti sulle caratteristiche dei frattali, anche notizie sulle trasformazioni lineari.

ANTEPRIMA

Scegliete un'opzione dall'elenco a discesa e costruite il frattale corrispondente

IN EVIDENZA DAL SITO

www.tommasobientinesi.it

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

REALIZZARE L'ALBERO

Parte da copiare all'interno del tag <body> (clic sull'area per selezionare tutto)

Parte da copiare all'interno del tag <head> (clic sull'area per selezionare tutto) <script> const lato=60 //lato del quadrato di base in pixel var volte=0 var Ox,Oy const k1 = 0.5 const T = 2.618 // [2.618 è l'angolo, espresso in radianti, di +150° (cioè 150° in senso antiorario) e la contrazione è di 0.5] const k2 = 0.866 const T1 = -2.094 //[-2.094 è l'angolo, espresso in radianti, -120° (cioè 120° in senso orario) e la contrazione è di 0.866] function Chiama(numero) { volte=numero.options[numero.selectedIndex].value var c = document.getElementById('lavagna'); ctx = c.getContext("2d"); //posizione Origine Ox=c.width/3-40; Oy=3*c.height/4; ctx.clearRect(0,0,c.width,c.height) //cancella ctx.fillStyle="rgba(120,60,0,0.2)" //colori per il tronco ctx.strokeStyle='rgba(80,40,0,0.2)' ctx.beginPath() ctx.fillRect(Ox,Oy-lato,lato,lato); //tronco ctx.strokeRect(Ox,Oy-lato,lato,lato); Pit1N(volte, 0, 0, 1, 0, 1, 1, 0, 1) //scritte ctx.beginPath() ctx.font="bold 20px Times New Roman"; ctx.fillStyle="rgba(50,50,50,0.45)" ctx.fillText('\u00a9webfract.it',180,220) ctx.fillStyle="rgba(50,50,50,0.45)" ctx.textAlign="center"; ctx.fillText('ALBERO DI PITAGORA AL PASSO ' + volte,c.width/2,50) } function Pit1N(n, x1, y1, x2, y2, x3, y3, x4, y4){ var x1q1, y1q1, x1q2, y1q2, x1q3, y1q3, x1q4, y1q4 var x1q5, y1q5, x1q6, y1q6, x1q7, y1q7, x1q8, y1q8 var a, b, a1, b1 var c = document.getElementById('lavagna'); ctx = c.getContext("2d"); if (n==0) return; else { a = k1 * Math.cos(T) b = -k1 * Math.sin(T) a1 = k1 * Math.sin(T) b1 = k1 * Math.cos(T) // [Trovo il trasformato di (x1,y1)] x1q1 = a * (x1 - x4) + b * (y1 - y4) + x4 y1q1 = a1 * (x1 - x4) + b1 * (y1 - y4) + y4 // [Trovo il trasformato di (x2,y2)] x1q2 = a * (x2 - x4) + b * (y2 - y4) + x4 y1q2 = a1 * (x2 - x4) + b1 * (y2 - y4) + y4 // [Trovo il trasformato di (x3,y3)] x1q3 = a * (x3 - x4) + b * (y3 - y4) + x4 y1q3 = a1 * (x3 - x4) + b1 * (y3 - y4) + y4 // [Trovo il trasformato di (x4,y4) che resta fisso, infatti è in centro di similitudine] x1q4 = x4 y1q4 = y4 a = k2 * Math.cos(T1) b = -k2 * Math.sin(T1) a1 = k2 * Math.sin(T1) b1 = k2* Math.cos(T1) // [Trovo il trasformato di (x1,y1)] x1q5 = a * (x1 - x3) + b * (y1 - y3) + x3 y1q5 = a1 * (x1 - x3) + b1 * (y1 - y3) + y3 // [Trovo il trasformato di (x2,y2)] x1q6 = a * (x2 - x3) + b * (y2 - y3) + x3 y1q6 = a1 * (x2 - x3) + b1 * (y2 - y3) + y3 //[Trovo il trasformato di (x4,y4)] x1q8 = a * (x4 - x3) + b * (y4 - y3) + x3 y1q8 = a1 * (x4 - x3) + b1 * (y4 - y3) + y3 // [Trovo il trasformato di (x3,y3) che resta fisso, infatti è il centro di similitudine] x1q7 = x3 y1q7 = y3 //disegno ctx.beginPath() ctx.fillStyle="rgba(179,39,4,0.45)" ctx.strokeStyle='rgba(255,0,0,0.45)' ctx.moveTo(Ox+lato*x1q6,Oy-lato*y1q6); ctx.lineTo(Ox+lato*x1q7,Oy-lato*y1q7); ctx.lineTo(Ox+lato*x1q8,Oy-lato*y1q8); ctx.lineTo(Ox+lato*x1q5,Oy-lato*y1q5); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.beginPath() ctx.fillStyle="rgba(120,120,120,0.45)" ctx.strokeStyle='rgba(0,255,0,0.45)' ctx.moveTo(Ox+lato*x1q1,Oy-lato*y1q1); ctx.lineTo(Ox+lato*x1q2,Oy-lato*y1q2); ctx.lineTo(Ox+lato*x1q3,Oy-lato*y1q3); ctx.lineTo(Ox+lato*x1q4,Oy-lato*y1q4); ctx.closePath(); ctx.fill(); ctx.stroke(); Pit1N(n - 1, x1q4, y1q4, x1q1, y1q1, x1q2, y1q2, x1q3, y1q3) Pit1N(n - 1, x1q6, y1q6, x1q7, y1q7, x1q8, y1q8, x1q5, y1q5) } } </script>

NOTA BENE - Gli utenti MSIE possono visualizzare il canvas solo se possiedono la versione dalla 9 in poi.

INDICE MATEMATICA CON JAVASCRIPT - INDICE GUIDA CANVAS

MATEMATICA CON JAVASCRIPT

ALBERO DI PITAGORA CON ANGOLI ACUTI DI 30° E 60° REALIZZATO CON IL TAG HTML5 CANVAS

ANTEPRIMA

REALIZZARE L'ALBERO