Tutorial per il metodo scale a un quadrato- matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER COSTRUIRE UNA FIGURA 3D CON IL METODO scale()

Il presente tutorial permette di costruire la prima figura, pubblicata su "metodo scale() - pagina 2", attraverso omotetie, rispetto a un centro qualunque, applicate a un quadrato trasparente.
In questo caso abbiamo costruito un ciclo che applica più volte la stessa omotetia, di centro C e rapporto k, a un quadrato di cui è dato il vertice superiore sinistro e il lato l.

Abbiamo preparato un documento che ha l'aspetto definito dalle righe di codice inserite nell'area di testo in basso a sinistra.

E' possibile cambiare le varie opzioni e quindi vedere 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

CODICE

<!DOCTYPE html> <HTML> <BODY> <canvas id="lavagna" width="300" height="300" ></canvas></p> <script> var c = document.getElementById('lavagna'); const Ox=c.width/2; //ascissa origine const Oy=c.height/2; //ordinata origine const u = 10; //unità di misura var Px,Py,lato //(coordinate punto P e lato del quadrato) var Cx,Cy //(coordinate del centro di omotetia C) // ponete k = h se volete un'omotetia var k = 1.05// rapporto di scala orizzontale var h = 1.05 //rapporto di scala verticale Px=-0.5; Py=3; Cx=10; Cy =6; var lato = 6 var ctx=c.getContext("2d"); ctx.strokeStyle="rgba(120,120,120,0.3)" ctx.strokeRect(1,1,c.width-2,c.height-2) //cornice ctx.beginPath() ctx.font="14px arial"; ctx.fillStyle="rgba(120,120,120,1)" ctx.fillText('15 omotetie di centro C e rapporto 1.05',20,20) ctx.fillText('\u00a9 webfract.it',20,260) ctx.fillText('- area canvas',20,280) //TRASLAZIONE PER SISTEMA DI RIFERIMENTO ctx.translate(Ox,Oy); //DISEGNO IL CENTRO DI OMOTETIA ctx.fillRect(Cx*u,-Cy*u,1,1); ctx.fillText('C',Cx*u,-Cy*u-2) //ciclo omotetie for (i=1;i<=15;i++){ //QUADRATO DI PARTENZA ctx.fillStyle="rgba(0,0,255,0.2)" ctx.fillRect(Px*u,-Py*u,lato*u,lato*u); //TRASLAZIONE VERSO IL CENTRO DI OMOTETIA ctx.translate(Cx*u,-Cy*u); //OMOTETIA RISPETTO ORIGINE ctx.scale(k,h); //TRASLAZIONE INVERSA ctx.translate(-Cx*u,+Cy*u); //QUADRATO TRASFORMATO ctx.fillStyle="rgba(0,255,0,0.2)" ctx.fillRect(Px*u,-Py*u,lato*u,lato*u); } ctx.lineWidth= 0.25 //SEGMENTO P'C ctx.strokeStyle="rgba(120,120,120,0.5)" ctx.moveTo(Cx*u,-Cy*u); ctx.lineTo(Px*u,-Py*u); ctx.stroke(); ctx.moveTo(Cx*u,-Cy*u); ctx.lineTo(Px*u + lato*u,-Py*u); ctx.stroke(); ctx.moveTo(Cx*u,-Cy*u); ctx.lineTo(Px*u + lato*u,Py*u); ctx.stroke(); </script> </body> </html>

RISULTATO

Matematica con javascript, area Canvas: Indice - Metodo scale() Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER COSTRUIRE UNA FIGURA 3D CON IL METODO scale()

CODICE

RISULTATO