Triangolo di Apollonio in HTML5 canvas

Contatti	MATEMATICA CON JAVASCRIPT TRIANGOLO DI APOLLONIO REALIZZATO CON IL TAG HTML5 CANVAS E JAVASCRIPT

Trovate qui il codice e l'anteprima del programma che genera il frattale di Apollonio in cui si prende come figura di partenza la parte di piano compresa fra tre circonferenze tangenti a due a due (triangolo curvilineo).
Il metodo che abbiamo seguito è quello della costruzione geometrica passo per passo, analogamente a quanto si fa per la costruzione del triangolo di Sierpinski.
Potete seguirne la costruzione attraverso i passi riportati nell'anteprima.

Prendiamo come figura di partenza la parte di piano delimitata da tre circonferenze tangenti a due a due (triangolo curvilineo).
Eliminiamo dalla sua superficie il cerchio tangente ai tre cerchi.
Ripetiamo il procedimento su ognuna delle 3 regioni che si sono così formate: otteniamo 9 triangoli curvilinei
Ripetiamo il procedimento su ognuno dei 9 triangoli curvilinei che si sono così formati: otteniamo 27 triangoli curvilinei
Ripetiamo il procedimento su ognuno dei 27 triangoli curvilinei che si sono così formati: otteniamo 81 triangoli curvilinei
Ripetiamo il procedimento senza limite...

Si ottiene così il triangolo di Apollonio, un frattale.

Osserviamo che ogni volta il numero di triangoli curvilinei si triplica, mentre il raggio dei cerchi tangenti, pur diminuendo, non varia secondo un rapporto costante
Ecco quindi che abbiamo un esempio di frattale non autosimile.

IN EVIDENZA DAL SITO

www.tommasobientinesi.it

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

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

REALIZZARE IL FRATTALE

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 unita=450 //unità di misura var passo=0 var Ox,Oy var x1, y1,x2, y2,x3, y3, r1, r2, r3,r var rosso, verde,blu function Chiama(numero) { passo=numero.options[numero.selectedIndex].value var c = document.getElementById('lavagna'); ctx = c.getContext("2d"); //posizione Origine Ox=c.width/2 + 30; Oy=c.height/2; c.width=c.width //cancella ctx.beginPath() x1 = 1 y1 = 0 r1 = Math.sqrt(3)/2 x2 = -1 / 2 y2 = Math.sqrt(3)/2 r2 = Math.sqrt(3)/2 x3 = -1 / 2 y3 = -Math.sqrt(3)/2 r3 = Math.sqrt(3)/2 apollo(passo, x1, y1, r1, x2, y2, r2, x3, y3, r3) //scritte xNS = Math.round(x2 * unita + Ox) yNS = Math.round(Oy - y2 * unita) rS =Math.round(r2 * unita) ctx.beginPath() ctx.arc(xNS, yNS,rS,0,2*Math.PI) ctx.fillStyle="rgba(255,146,115,0.3)" ctx.fill() ctx.stroke() ctx.beginPath() xNS = Math.round(x3 * unita + Ox) yNS = Math.round(Oy - y3 * unita) rS = Math.round(r3 * unita) ctx.arc(xNS, yNS,rS,0,2*Math.PI) ctx.fillStyle="rgba(0,57,57,0.3)" ctx.fill() ctx.stroke() 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('TRIANGOLO DI APOLLONIO AL PASSO ' + passo,c.width/2,50) } function apollo(n, xa, ya, ra, xb, yb, rb, xc, yc, rc){ var a1S, b1S, c1S var a2S, b2S, c2S var xNS, yNS, rS var xaT, yaT, raT, xbT, ybT, rbT var xcT, ycT, rcT var c = document.getElementById('lavagna'); ctx = c.getContext("2d"); if (n==0) { xNS = xa * unita + Ox yNS = Oy - ya * unita rS = ra * unita r = Math.floor(Math.random()*3) if (r<=1) { rosso=255 verde=146 blu=115 } else { rosso=220 verde=250 blu=112 } ctx.fillStyle="rgba("+rosso+","+ verde +"," +blu+",0.1)" ctx.strokeStyle="rgba(0,84,180,0.1)" ctx.beginPath() ctx.arc(xNS, yNS,rS,0,2*Math.PI) ctx.fill() ctx.stroke() } else { raggio = (ra * rb * rc) / (ra * rb + rb * rc + ra * rc + 2 * Math.sqrt(ra * rb * rc * (ra + rb + rc))) a1S = -2 * (xb - xc) b1S = -2 * (yb - yc) c1S = Math.pow(rb,2) - Math.pow(rc,2) + 2 * raggio * (rb - rc) +Math.pow(xc,2) - Math.pow(xb,2) + Math.pow(yc,2) - Math.pow(yb,2) a2S = -2 * (xa - xb) b2S = -2 * (ya - yb) c2S = Math.pow(ra,2) - Math.pow(rb,2) + 2 * raggio * (ra - rb) + Math.pow(xb,2) - Math.pow(xa,2) + Math.pow(yb,2) - Math.pow(ya,2) if ((a1S * b2S - a2S * b1S) != 0) { x0 = (b2S * c1S - b1S * c2S) / (a1S * b2S - a2S * b1S) y0 = (a1S * c2S - a2S * c1S) / (a1S * b2S - a2S * b1S) } xaT = x0 yaT = y0 raT = raggio xbT = x0 ybT = y0 rbT = raggio xcT = x0 ycT = y0 rcT = raggio apollo(n - 1, xa, ya, ra, xb, yb, rb, xcT, ycT, rcT) apollo(n - 1, xa, ya, ra, xbT, ybT, rbT, xc, yc, rc) apollo(n - 1, xaT, yaT, raT, xb, yb, rb, xc, yc, rc) } } </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

TRIANGOLO DI APOLLONIO REALIZZATO CON IL TAG HTML5 CANVAS E JAVASCRIPT

ANTEPRIMA

REALIZZARE IL FRATTALE