Grafici con gli SCRIPT

Con WolframAlpha (versione online gratuita) si possono fare facilmente sia grafici di funzioni e curve descritte con "formule", sia tracciare poligonali e rappresentazioni di punti.  Ma quest'ultima cosa è fattibile solo nel caso di circa una ventina di segmenti o punti.
    Con semplici modifiche degli script seguenti (scaricabili sul proprio computer) si possono tracciare facilmente (oltre a grafici di funzione) rappresentazioni grafiche costituite da grandi quantità di punti e segmenti (e quindi anche curve), con la possibilità di tracciare i segmenti in qualunque colore.  I calcoli numerici sono fattibili facilmente con questi altri script.

    I nomi di funzione impiegabili (oltre a  +, -, /, *) sono quelli elencati più avanti in questo documento;  vanno preceduti da "Math.".

    Per semplicità la finestra grafica è in due sole forme,  una con altezza pari ai 2/5 (ovvero al 40%) della base, l'altra forma con altezza e base uguali.  Per entrambe le forme vi è una finestra più grande e una più piccola.  Due esempi, con scala monometrica, con titolo "...", con griglia, senza immagini.

    Costruire un file che genera un'immagine come le seguenti è molto semplice. Puoi scegliere uno dei 6 seguenti file, salvarlo sul tuo computer (cliccandone il nome col bottone destro del mouse), modificarlo e salvarlo con un nome a tuo piacere.

    I file per il riquadro 10×4, grande (graficoXpunti.htm), piccolo (graficoXp.htm) e molto piccolo (graficXp.htm), e per quello quadrato, grande (grafXpunti.htm), piccolo (grafXp.htm) e molto piccolo (grXp.htm).

    I grafici realizzati li puoi copiare (col pulsante destro del mouse), incollarli in Paint o in qualunque altra applicazione grafica, modificarli e salvarli (ad esempio come file PNG) o incollarli in un documento che stai costruendo.

    In fondo come realizzare animazioni.

    Sotto la parte del file da modificare per ottenere la rappresentazione grafica voluta:  [aX,bX] intervallo delle ascisse, [aY,bY] intervallo delle ordinate, Dx e Dy distanze tra le tacche, quadro=1 se vuoi le indicazioni lungo gli assi della scala.  Nella versione quadrata c'è "altezza = base" senza 4/10.

...
// L0..9 estremi dei segmenti da tracciare, Q0..Q9 / O0..O9 punti vuoti/pieni da tracciare

// bX maggiore o uguale al numero dei dati, aY = 0 o minore del min dei dati, bY maggiore o uguale al max
// Dx distanza righe verticali, Dy distanza righe orizzontali.  Rettangolo con  altezza = 4/10 base

aX = ...; bX = ...; aY = ...; bY = ...
Dx = ...; Dy = ...


titolo = "..."
Cax="brown"; Cgr="grey"                                     // colori degli assi e della griglia;  metti "white" se non li vuoi
// alcuni colori: blue, red, black, green, magenta, orange, white, grey, silver, aqua, pink, coral, limegreen, chocolate, brown
quadro=...          // se quadro=1 appare l'indicazione degli intervalli di x e y, se quadro=.. con .. diverso da 1 non apppare

C1="blue"  // colore del grafico L1

// modifica la definizione della funzione di cui volessi tracciare il grafico (f blu, g verde, h rosso, k arancione)
// Esempi: y=2*x+5   y=x*x/3  y= Math.sqrt(x-5)*10+3  y= Math.pow(x,3) (=x^3)  y= Math.sin(x/360*Math.PI)

function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";     T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]

// 10 scritte di piccole dimensioni con s0=["S",x,y],.., s9=["S",x,y]
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
...
// se metti xx=[2,5] (o yy=[2,5]) sono tracciate le rette verticali x=2,x=5 (orizzontali y=2,y=5) di colore colxx
colxx="magenta"
xx=yy=[]

// puoi cambiare raggio (r) e colore (col) dei pallini Qn e On; valori standard:  rQ=2.6; colQ="black"; rO=2.6; colO="black" 
rQ=2.6; colQ="black"; rO=2.6; colO="black"
...

  L'altra forma con altezza e base uguali.


    Esempi con la finestra grafica con altezza pari ai 2/5 (ovvero al 40%) della base.

https://www.macosaweb.it/script/graficoXpunti0.htm

...
aX = 0; bX = 100; aY = 0; bY = 40
Dx = 5; Dy = 5

titolo = "piano cartesiano 100 x 40"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [5,35,35, 5,5]
Q1y = L1y = [5, 5,35,35,5]
L2x = [40,60,80,60,40]
L2y = [ 20,0,20,40,20] 
Q2x = [60]; Q2y = [20]
O1x = L3x = [85,90,90,85,85]
O1y = L3y = [ 5, 5,35,35, 5]

C1="blue"  // colore del grafico L1
C2="red"   // colore del grafico L2
C3="green" // colore di L3

function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = Math.abs(x-60)+10; return y }
...

https://www.macosaweb.it/script/graficoXp0.htm

...
function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = Math.abs(x-60)+10; return y }

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
Co1="aqua"; Co3="limegreen"
...

https://www.macosaweb.it/script/graficoXpunti1.htm   https://www.macosaweb.it/script/graficoXp1.htm

...
aX = 0; bX = 11; aY = 0; bY = 150
Dx = 1; Dy = 10

titolo = "altezze mediane dei bambini di una classe quando avevano compiuto 2, 3,..., 10 anni"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [2, 3, 4, 5, 6, 7, 8, 9, 10]
Q1y = L1y = [87,95,106,111,116,122,126,133,139]
L2x=L3x=[0,11]; L2y=[50,50]; L3y=[100,100]; L4y=L5y=[0,150]; L4x=[5,5]; L5x=[10,10]
C1="black"; C2=C3=C4=C5="grey"
...

https://www.macosaweb.it/script/graficoXpunti1b.htm   https://www.macosaweb.it/script/graficoXp1b.htm

...
aX = 0; bX = 35; aY = 0; bY = 15
Dx = 5; Dy = 1

titolo = "^C, certain month, certain location"
Cax="brown"; Cgr="silver"
quadro=1

Q1x = L1x = [ 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
Q1y = L1y = [ 3, 4, 6, 2, 2, 3, 4, 6, 6, 8, 9, 9, 8,10, 8, 7, 8, 6, 4, 1, 2, 3, 5, 7, 6, 9,12,11,14,13,13]

C1="black"
...
// se metti xx=[2,5] (o yy=[2,5]) sono tracciate le rette verticali x=2,x=5 (orizzontali y=2,y=5) di colore colxx
colxx = "grey"
xx=[10,20,30]; yy=[5,10,15]
...

https://www.macosaweb.it/script/graficoXpunti1c.htm


 

https://www.macosaweb.it/script/graficoXpunti2.htm   https://www.macosaweb.it/script/graficoXp2.htm

...
aX = 1870; bX = 1990; aY = 0; bY = 90
Dx = 10; Dy = 10

titolo = "kg carne bovina, frutta fresca, granturco consumati annualmente in media da un italiano 1880-1980"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = Q2x = Q3x = L1x = L2x = L3x = [1880,1890,1900,1910,1920,1930,1940,1950,1960,1970,1980]
Q1y = L1y = [19,21,23,28,31,27,23,37,65,88,79]
Q2y = L2y = [ 5, 6, 6, 7, 9, 9, 8, 7,13,25,25]
Q3y = L3y = [42,32,32,30,30,32,31,19, 8, 5, 3]

C1="blue" // colore del grafico L1
C2="red"   // colore del grafico L2
C3="green" // colore del grafico L3
...

https://www.macosaweb.it/script/graficoXpunti3.htm   https://www.macosaweb.it/script/graficoXp3.htm

...
aX = -10; bX = 10; aY = -4; bY = 4
Dx = 1; Dy = 1

titolo = "y = x (verde), y = 1/x (blu), y = x^2 (rosso)"
Cax="brown"; Cgr="grey"
quadro=1

function f(x) { y = 1/x; return y }  
function g(x) { y = x; return y }
function h(x) { y = x*x; return y }
function k(x) { y = 1/0; return y }
...

https://www.macosaweb.it/script/graficoXpunti4.htm   https://www.macosaweb.it/script/graficoXp4.htm

...
aX = -720; bX = 720; aY = -3; bY = 3
Dx = 90; Dy = 1/2

titolo = "y = sin(x gradi) (blu), y = cos(x gradi) (blu), y = tan(x gradi) (rosso)"
Cax="brown"; Cgr="grey"
quadro=1

function f(x) { y = Math.sin(x/360*Math.PI); return y }  
function g(x) { y = Math.cos(x/360*Math.PI); return y }
function h(x) { y = Math.tan(x/360*Math.PI); return y }
function k(x) { y = 1/0; return y }
...

https://www.macosaweb.it/script/funzione_no.htm

...
aX = 0; bX = 32; aY = 0; bY = 3
Dx = 1; Dy = 1

titolo = "E' il grafico di una funzione?  Perche'?"
Cax="brown"; Cgr="white"
quadro=0

C1="blue"

n=300; at=3; bt=Math.PI*10; ab=bt-at
for(i=0;i<n;i=i+1) {t=at+ab/n*i
L0x[i]=t-1.15*Math.sin(t)*Math.tan(7/10*Math.PI); L0y[i]=Math.sin(t)+1.35 }
...


Non tutte le funzioni sono facili da descrivere col software; ad esempio nel caso di una radice di grado dispari, che è definita anche per input negativi, occorre usare l'elevamento a potenza con qualche trucco, trasformando ad esempio x^(1/5) in -(-x)^(1/5).
Ecco come tracciare il grafico della funzione descritta qui a destra, introducendo una nuova funzione (qui chiamata POT).
    
5 x2(x+1)
—————
(1+x2)(x+3)

https://www.macosaweb.it/script/radicali.htm

...
aX = -6; bX = 3; aY = -2; bY = 2
Dx = 1; Dy = 1

titolo = "y = ( x^2*(x+1) / ( (1+x^2)*(x+3) ) ^ (1/5)"
Cax="brown"; Cgr="white"
quadro=1
...
C1="blue"
...
function POT(x) { if(x>=0) {y = Math.pow(x,1/5)} else {y = -Math.pow(-x,1/5)}; return y }
function f(x) { y = POT( x*x*(x+1)/((1+x*x)*(x+3)) ); return y }  
...

https://www.macosaweb.it/script/talbot.htm

...
aX = -10; bX = 10; aY = -4; bY = 4
Dx = 20; Dy = 8

titolo = "Blue, red, green: Talbot's curves.  Orange: Lissajous curve"
Cax="white"; Cgr="grey"
quadro=1

C0="blue"; C1="red"; C2="green"; C3="orange"
A = 1.5; B = 1.2; F = 2.5; n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L0x[i]=(A*A-2*F*F+F*F*Math.pow(Math.sin(t),2))*Math.sin(t)/B
L0y[i]=(A*A+F*F*Math.pow(Math.sin(t),2))*Math.cos(t)/A       }
A = 3.5; B = 1; F = 2; n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L1x[i]=(A*A-2*F*F+F*F*Math.pow(Math.sin(t),2))*Math.sin(t)/B
L1y[i]=(A*A+F*F*Math.pow(Math.sin(t),2))*Math.cos(t)/A  }
A = 1; B = 1/2; F = 1; n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L2x[i]=(A*A-2*F*F+F*F*Math.pow(Math.sin(t),2))*Math.sin(t)/B
L2y[i]=(A*A+F*F*Math.pow(Math.sin(t),2))*Math.cos(t)/A  }
n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L3y[i] = 3*Math.sin(3*t+1); L3x[i]=9*Math.sin(t)  }
...

https://www.macosaweb.it/script/graficoXpunti5.htm   https://www.macosaweb.it/script/graficoXp5.htm

...
aX = 0; bX = 180; aY = 0; bY = 300
Dx = 10; Dy = 50

titolo = "retta di regressione vincolata a passare per (0,0)"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = [55,   70, 155, 160, 155, 115, 105, 165, 110, 115,   85, 165, 110, 155, 105]
Q1y = [85, 115, 205, 230, 185, 185, 145, 240, 140, 155, 125, 290, 170, 195, 135]

function f(x) { y = 1.42*x; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }...

https://www.macosaweb.it/script/graficoXpunti6a.htm
https://www.macosaweb.it/script/graficoXpunti6.htm


Per le "medie mobili" vedi qui e (gli esempi).

...
aX = 0; bX = 110; aY = -50; bY = 450
Dx = 10; Dy = 50

titolo = "mm mensili di pioggia a Genova tra il 1984 e il 1992 e loro medie mobili (fatte 5 volte)"
Cax="brown"; Cgr="grey"
quadro=1

L1y = [41, 44, 72, 79, 197, 62, 0, 200, 52, 95, 155, 108, 71, 34, 257, 37, 161, 68, 0, 20, 14, 7, 63, 112, 172,
67, 48, 197, 16, 30, 63, 24, 115, 42, 88, 34, 70, 159, 30, 115, 65, 30, 95, 61, 88, 276, 112, 42, 187, 35, 111,
64, 101, 61, 11, 26, 25, 149, 0, 70, 10, 97, 27, 286, 12, 5, 14, 232, 57, 38, 6, 22, 34, 19, 7, 142, 2, 25, 6, 68,
61, 349, 84, 157, 44, 71, 61, 27, 93, 44, 67, 0, 423, 145, 57, 0, 47, 44, 65, 78, 16, 110, 28, 49, 391, 245, 54, 72]
for(i=0; i < L1y.length; i=i+1) {L1x[i]=i}  // come x prendo 0, 1, ..., num. delle y meno 1
C1="blue"
L2y = [41, 57.91, 73.3, 85.18, 92.1, 94.81, 95.9, 97.87, 100.942, 103.708, 105.009, 105.4, 106.535, 108.267, 108.195,
102.084, 88.42, 69.19, 50.59, 38.87, 38.37, 48.69, 65.49, 82.19, 93.27, 96.31, 91.93, 82.71, 72.01, 63.4, 59.16,
59.37, 62.2, 65.75, 69.53, 73.79, 78.08, 80.85, 80.62, 77.94, 75.54, 77.41, 85.91, 99.92, 114.449, 123.574, 124.096,
117.185, 106.923, 96.62, 87.39, 78.12, 68.22, 58.59, 51.66, 49.14, 50.14, 52.52, 54.72, 58.47, 65.32, 75.04, 82.93,
85.72, 83.07, 79.32, 76.4, 73.22, 65.89, 54.32, 41.82, 33.55, 31.46, 34.3, 38.23, 40.87, 42.74, 48.63, 62.87, 85.96,
110.641, 127.288, 128.69, 116.358, 97.07, 79.21, 67.32, 63.02, 67.06, 79.96, 100.171, 120.136, 129.992, 122.806,
102.084, 77.92, 60.74, 53.63, 54.15, 58.88, 68.24, 85.09, 109.867, 136.044, 151.661, 145.927, 116.61, 72]
for(i=0; i < L2y.length; i=i+1) {L2x[i]=i}  // come x prendo 0, 1, ..., num. delle y meno 1
C2="red"
...

Le medie mobili per "lisciare" curve ottenute con coppie (x,y) in cui le y sono approssimate. Esempio (vedi):


 

https://www.macosaweb.it/script/graficoXpunti7.htm   https://www.macosaweb.it/script/graficoXp7.htm

...
aX = 0; bX = 100; aY = 0; bY = 2
Dx = 10; Dy = 0.5

titolo = "Abitanti in una certa citta' nel 1970 per fasce di eta' (le % sono le aree dei rettangoli)"
// (18% abitanti eta' (0,15) anni, 16.5% [15,25) anni, 50% [25,55), 10% [55,65), 5.5% [65,100])
Cax="grey"; Cgr="grey"
quadro=1

L1x=[0,0,15,15];     L1y=[0,18,18,0];     for(i=0;i<4;i=i+1) L1y[i]=L1y[i]/(15-0)
L2x=[15,15,25,25];   L2y=[0,16.5,16.5,0]; for(i=0;i<4;i=i+1) L2y[i]=L2y[i]/(25-15)
L3x=[25,25,55,55];   L3y=[0,50,50,0];     for(i=0;i<4;i=i+1) L3y[i]=L3y[i]/(55-25)
L4x=[55,55,65,65];   L4y=[0,10,10,0];     for(i=0;i<4;i=i+1) L4y[i]=L4y[i]/(65-55)
L5x=[65,65,100,100]; L5y=[0,5.5,5.5,0];   for(i=0;i<4;i=i+1) L5y[i]=L5y[i]/(100-65)

C1=C2=C3=C4=C5="blue"
...

https://www.macosaweb.it/script/graficoXpunti7b.htm   https://www.macosaweb.it/script/graficoXp7b.htm

...
aX = 0; bX = 100; aY = 0; bY = 3.5
Dx = 10; Dy = 0.5

titolo = "Morti in Italia nel 1951 per fasce di eta' (le % sono le aree dei rettangoli)"
Cax="grey"; Cgr="grey"
quadro=1

T = 4819  // (migliaia di morti, 729 tra 0 e 5 anni, 35 tra 5 e 10, 77 tra 10 e 20, ...)
T = T/100
L1x=[ 0, 0, 5, 5];   L1y=[0,729,729,0];   for(i=0;i<4;i=i+1) L1y[i]=L1y[i]/(5-0)/T
L2x=[ 5, 5,10,10];   L2y=[0,35,35,0];     for(i=0;i<4;i=i+1) L2y[i]=L2y[i]/(10-5)/T
L3x=[10,10,20,20];   L3y=[0,77,77,0];     for(i=0;i<4;i=i+1) L3y[i]=L3y[i]/(20-10)/T
L4x=[20,20,30,30];   L4y=[0,132,132,0];   for(i=0;i<4;i=i+1) L4y[i]=L4y[i]/(30-20)/T
L5x=[30,30,40,40];   L5y=[0,134,134,0];   for(i=0;i<4;i=i+1) L5y[i]=L5y[i]/(40-30)/T
L6x=[40,40,50,50];   L6y=[0,285,285,0];   for(i=0;i<4;i=i+1) L6y[i]=L6y[i]/(50-40)/T
L7x=[50,50,60,60];   L7y=[0,457,457,0];   for(i=0;i<4;i=i+1) L7y[i]=L7y[i]/(60-50)/T
L8x=[60,60,75,75];   L8y=[0,1401,1401,0]; for(i=0;i<4;i=i+1) L8y[i]=L8y[i]/(75-60)/T
L9x=[75,75,100,100]; L9y=[0,1569,1569,0]; for(i=0;i<4;i=i+1) L9y[i]=L9y[i]/(100-75)/T

C1=C2=C3=C4=C5=C6=C7=C8=C9="blue"
...
Vedi sotto gli istogrammi per realizzati in altro modo
 

https://www.macosaweb.it/script/graficoXpunti8.htm   (il rapporto tra base e altezza deve essere 20/8, ovvero 10/4, ovvero 5/2, ...)

...
aX = 0; bX = 20; aY = 4; bY = 12
Dx = 1; Dy = 1

titolo = "figure in un sistema monometrico"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [5,10,10,5,5,9,9,6,6,8,8,7]
Q1y = L1y = [5,5,10,10,6,6,9,9,7,7,8,8]
L2x = [5+7,10+7,10+7,5+7,5+7,9+7,9+7,6+7,6+7,8+7,8+7,7+7]
L2y = L1y

C1="blue"; C2="red"
...

https://www.macosaweb.it/script/graficoXpunti9.htm

...
aX = 0; bX = 800; aY = 0; bY = 100
Dx = 50; Dy = 5

titolo = "A 763 associo 100 (linee rosse).  A quale percentuale corrisponde 264 (linee verdi)?"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [0, 763]
Q1y = L1y = [0, 100]
L2x = [763, 763, 0]
L2y = [0, 100, 100]
L3x = [264, 264, 0]
L3y = [0, 100*264/763, 100*264/763]
Q2x = [0]; Q2y = [100*264/763]

C1="blue"; C2="red"; C3="green" // colore del grafico L3
...

https://www.macosaweb.it/script/graficoXpunti10.htm

...
aX = 0; bX = 100; aY = 0; bY = 800
Dx = 5; Dy = 50

titolo = "A 100 associo 763 (linee rosse).  A quale percentuale corrisponde 264 (linee verdi)?"
Cax="brown"; Cgr="grey"
quadro=1

Q1y = L1y = [0, 763]
Q1x = L1x = [0, 100]
L2y = [763, 763, 0]
L2x = [0, 100, 100]
L3y = [264, 264, 0]
L3x = [0, 100*264/763, 100*264/763]
Q2y = [0]; Q2x = [100*264/763]

C1="blue"; C2="red"; C3="green"
...

https://www.macosaweb.it/script/graficoXpunti11.htm

...
aX = -1; bX = 12; aY = -2; bY = 12
Dx = 1; Dy = 1

titolo = "una funzione definita a tratti  (0 tra 0 e 5,  x-5 tra 5 e 8,  2x-13 oltre 8)"
Cax="brown"; Cgr="grey"
quadro=1

C1="blue"
Q1x=[0,5,8]; Q1y=[0,0,3]

function f(x) { y = 1/0; if(x>0) y = 0; if(x>5) y = x-5; if(x>8) y = 2*x-13; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }
...

Un esempio di rappresentazione di dati approssimati conoscendone la precisione.  Per studiare le caratteristiche di un elastico, lo si tiene sospeso per un estremo e si appendono all'altro estremo diversi oggetti. Ogni volta si misura il peso dell'oggetto e il corrispondente allungamento dell'elastico. Il peso F degli oggetti viene misurato con una bilancia a molla con divisioni di 10 g (in modo che se l'ago si ferma vicino alla tacca 260 si può assumere che il peso sia 260±5 g). Le lunghezze che assume l'elastico sono misurate con la precisione di 1 mm, in modo che i valori dell'allungamento H (ottenuti come differenza di due lunghezze) hanno la precisione di 2 mm. Si ottengono i valori riportati nel grafico, con la loro precisione:

15±2, 260±5    20±2, 380±5    39±2, 710±5    52±2, 990±5

https://www.macosaweb.it/script/graficoXpunti12.htm

x = H
y = F

 

Minima pendenza: (990-5)/(52+2) = 18.2407...   Massima pendenza: (710+5)/(39-2) = 19.3243...   y = k·x con 18.24 ≤ k ≤ 19.33

...
aX = 0; bX = 60; aY = 0; bY = 1100
Dx = 5; Dy = 100

titolo = "y: peso (g) di certi oggetti, x: allungamento (mm) dell'elastico.  Che dire della relazione che lega x e y?"
Cax="brown"; Cgr="grey"
quadro=1

C0=C1=C2=C3="red"
L0x=[15-2,15+2,15+2,15-2,15-2]; L0y=[260-5,260-5,260+5,260+5,260-5]
L1x=[20-2,20+2,20+2,20-2,20-2]; L1y=[380-5,380-5,380+5,380+5,380-5]
L2x=[39-2,39+2,39+2,39-2,39-2]; L2y=[710-5,710-5,710+5,710+5,710-5]
L3x=[52-2,52+2,52+2,52-2,52-2]; L3y=[990-5,990-5,990+5,990+5,990-5]

Q0x=[39-2,52+2]; Q0y=[710+5,990-5]

function f(x) { y = (990-5)/(52+2)*x; return y }  
function g(x) { y = (710+5)/(39-2)*x; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }
...

    Esempi con la finestra grafica quadrata.

Grande:  https://www.macosaweb.it/script/grafXpunti0.htm.   Piccola:  https://www.macosaweb.it/script/grafXp0.htm.  Molto piccola:  https://www.macosaweb.it/script/grXp0.htm

...
aX = 6; bX = 19; aY = 35; bY = 48
Dx = 1; Dy = 1

titolo = "I T A L I A   (e capoluoghi di regione)"
Cax="brown"; Cgr="grey"
quadro=1

L1x = [8,7.87,7.6,7,6.81,6.81,7.2,7.08,6.6,6.6,7,6.82,6.82,7.7,7.7,7.5,7.5,8,8.15,8.47,8.7,8.8,8.9,10.1,10.25,10.45,10.5,10.46,10.75,10.73,
11.2,11.05,11.1,11.2,12.2,13.1,13.8,14.1,14.2,14.4,14.5,14.35,14.75,14.9,15.35,15.55,15.65,16.15,16.2,16.23,16,15.83,15.9,15.6,
15.65,16,16.6,16.58,17,17.1,17.18,17.125,16.8,16.52,16.5,17,17.2,17.2,17.82,18,18.36,18.5,17.9,15.9,15.87,16.25,16.2,16.1,15.1,
15,14.23,13.55,12.4,12.28,12.5,12.5,12.2,12.3,13.1,13.5,13.8,13.8,13.9,13.85,13.6,13.55,13.6,13.5,13.6,13.4,13.65,12.45,12.1,11.5,
11,10.5,10.4,10.1,10.05,10.2,10.05,10,9.6,9.5,9.3,9.3,9,9.1,8.95,8.85,8.4,8.45,8.1,8]
L1y = [46,45.9,45.95,45.85,45.81,45.7,45.35,45.2,45.1,45,44.6,44.5,44.35,44.12,44.08,43.9,43.8,43.87,43.9,44.3,44.38,44.4,44.38,44,43.84,
43.3,43,42.92,42.88,42.8,42.5,42.4,42.35,42.38,41.8,41.25,41.175,40.75,40.8,40.7,40.65,40.55,40.65,40.3,40,40.1,40.1,39,38.91,38.8,
38.72,38.6,38.45,38.25,37.85,37.9,38.45,38.75,38.91,38.89,38.95,39.4,39.6,39.65,39.77,40.5,40.5,40.4,40.28,40,39.75,40.1,40.7,41.5,
41.6,41.75,41.9,41.96,41.94,42,42.45,43.63,44.2,44.78,44.8,45,45.25,45.43,45.6,45.75,45.65,45.55,45.6,45.7,45.8,45.83,46,46,46.2,
46.3,46.5,46.68,47.1,47.05,46.78,46.81,46.5,46.6,46.45,46.28,46.2,46.35,46.3,46.5,46.5,46.35,46,45.8,45.8,46,46.25,46.4,46.28,46]

L2x = [9.2,9.7,9.8,9.75,9.68,9.78,9.6,9.2,9.1,9,8.8,8.7,8.6,8.4,8.35,8.5,8.38,8.42,8.18,8.2,8.5,8.6,9.2]
L2y = [41.3,41,40.5,40.4,40.28,40.1,39.15,39.25,39.2,39,38.8,38.9,38.8,39.2,39.5,39.85,40,40.4,40.7,40.95,40.85,40.9,41.3]

L3x = [15.5, 15.2, 14.95,14.3, 14,   13.8, 13.3, 13.05,12.85,12.7,12.5, 12.43,12.6,13.9,14.2, 14.5, 15,   15.12,15.12,15.35,15.3, 15.15,15.13,15.55,15.47]
L3y = [38.32,38.15,38.2, 38.02,38.04,37.95,38.23,38.21,38.05,38.2,38.05,37.8, 37.6,37.1,37.05,36.77,36.74,36.66,36.8, 37,   37.25,37.3, 37.5, 38.3, 38.32]

Q1x = [8.93,9.18,7.69,7.31,11.26,9.12,13.36,14.27,12.32,12.48,16.87,13.40,15.81,16.59,11.34,13.77,13.51,14.66,11.12,12.39]
Q1y = [44.41,45.47,45.07,45.74,43.77,39.22,38.12,40.85,45.44,41.90,41.12,42.35,40.64,38.91,44.49,45.65,43.61,41.56,46.07,43.11]

C1="red"; C2="red"; C3="red"
...

Nel secondo e terzo script con l'aggiunta:

...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
Co1=Co2=Co3="limegreen"
...

https://www.macosaweb.it/script/diseq2.htm  (← commenti nel file)

https://www.macosaweb.it/script/diseq3.htm   https://www.macosaweb.it/script/diseq4.htm  (← commenti nei file)


 

https://www.macosaweb.it/script/distrib.htm   e   https://www.macosaweb.it/script/distrib2.htm  (sull'asse x le età; si è presa 100 come età massima in quanto allora era trascurabile il numero degli ultracentenari; le altezze dei rettangoli corrispondono alle frequenze medie per anno; nel secondo istogramma si vede che tra 0 e 5 anni la frequenza annua media era molto più alta che tra 75 e 100 anni; come sono diversi questi istogrammi da quelli del 1920 e da quelli del 2020?)

...
aX = -10; bX = 110; aY = -0.01; bY = 1.85/100
Dx = 0; Dy = 0
titolo = "distribuzione per eta' popolaz. in una data citta' italiana nel 1970"
Cax="white"; Cgr="white"
quadro=0

C0="black"; C1="grey"

L1x=[-10,110]; L1y=[0,0]
I=[0,  15,  25,  55,  65, 100]
P=[ 18, 16.5,  50, 10, 5.5]; NP=P.length
SUM=0; for(i=0;i<NP;i=i+1)  {SUM=SUM+P[i]}
mean=0; for(i=0;i<NP;i=i+1) {mean=mean+P[i]*(I[i]+I[i+1])/2}; mean=mean/SUM
Tot=0; for(i=0;i<NP;i=i+1) {Tot=Tot+P[i]}; for(i=0;i<NP;i=i+1) {P[i]=P[i]/Tot/(I[i+1]-I[i])}
L0x=[]; j=0; for(i=1;i<=NP;i=i+1) { L0x[j]=I[i-1]; L0x[j+1]=I[i-1]; L0x[j+2]=I[i]; L0x[j+3]=I[i]; j=j+4 }
L0y=[]; j=0; for(i=1;i<=NP;i=i+1) { L0y[j]=0; L0y[j+1]=P[i-1]; L0y[j+2]=P[i-1]; L0y[j+3]=0; j=j+4 }
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";       T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Per colorare l'interno del poligono L0 o L1 o ... L9: Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]
Co="silver"
T0=["0",0,-0.001]; T1=["15",15,-0.001]; T2=["25",25,-0.001]; T3=["55",55,-0.001]; T4=["65",65,-0.001]; T5=["100",100,-0.001]

// 10 scritte di piccole dimensioni con s0=["S",x,y],.., s9=["S",x,y]
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
s0=["18%",6.5,0.0175]; s1=["16.5%",21,0.0175]; s2=["50%",(25+55)/2,0.0175]; s3=["10%",60,0.0175]; s4=["5.5%",165/2,0.0175]
s5=["eta' media = "+Math.round(mean),89,0.012]
...
...
aX = -5; bX = 105; aY = -0.015; bY = 3.1/100
Dx = 5; Dy = 0
titolo = "Morti per eta' in Italia nel 1951 (% proporz. aree rettangoli)"
Cax="silver"; Cgr="silver"
quadro=0
C0="black"; C1="grey"
L1x=[-5,105]; L1y=[0,0]
I=[0,  5, 10, 20, 30, 40, 50, 60, 75, 100]
P=[ 729,35,77,132,134,285,457,1401,1569]; NP=P.length
SUM=0; for(i=0;i<NP;i=i+1)  {SUM=SUM+P[i]}
mean=0; for(i=0;i<NP;i=i+1) {mean=mean+P[i]*(I[i]+I[i+1])/2}; mean=mean/SUM
Tot=0; for(i=0;i<NP;i=i+1) {Tot=Tot+P[i]}; for(i=0;i<NP;i=i+1) {P[i]=P[i]/Tot/(I[i+1]-I[i])}
L0x=[]; j=0; for(i=1;i<=NP;i=i+1) { L0x[j]=I[i-1]; L0x[j+1]=I[i-1]; L0x[j+2]=I[i]; L0x[j+3]=I[i]; j=j+4 }
L0y=[]; j=0; for(i=1;i<=NP;i=i+1) { L0y[j]=0; L0y[j+1]=P[i-1]; L0y[j+2]=P[i-1]; L0y[j+3]=0; j=j+4 }
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";       T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
..-
Co="silver"
T0=["eta' media di morte = "+Math.round(mean),55,0.025]
...
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
s0=["0",0,-0.0015]; s1=["20",20,-0.0015]; s2=["40",40,-0.0015]; s3=["60",60,-0.0015]; s4=["80",80,-0.0015]; s5=["100",100,-0.0015]
...

https://www.macosaweb.it/script/grafXp1.htm   e   https://www.macosaweb.it/script/grafXp1b.htm

Immagine a sinistra:

...
aX = 0; bX = 100; aY = 0; bY = 100
Dx = 10; Dy = 10

titolo = "piano cartesiano 100 x 100"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [10,50,90,50,10]
Q1y = L1y = [50,10,50,90,50]
Q2x = L2x = [30,70,70,30,30]
Q2y = L2y = [30,30,70,70,30]
O0x = O0y =[50]

C1="red"; C2="black"

function f(x) { y = 50+Math.sqrt(40*40-(x-50)*(x-50)); return y }  
function g(x) { y = 50-Math.sqrt(40*40-(x-50)*(x-50)); return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }
...

Immagine a destra:

...
aX = 0; bX = 100; aY = 0; bY = 100
Dx = 10; Dy = 10

titolo = "piano cartesiano 100 x 100"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [10,50,90,50,10]
Q1y = L1y = [50,10,50,90,50]
Q2x = L2x = [30,70,70,30,30]
Q2y = L2y = [30,30,70,70,30]
O0x = O0y =[50]

N = 200; H = 2*Math.PI/N
for(i=0; i<=N; i=i+1) {L3x[i]=50+40*Math.cos(H*i); L3y[i]=50+40*Math.sin(H*i)
                       L4x[i]=50+10*Math.cos(H*i); L4y[i]=50+10*Math.sin(H*i)}

C1="red"; C2="black"; C3=C4="violet"
...

Formato piccolo: https://www.macosaweb.it/script/grafXp2.htm  e  grande:  https://www.macosaweb.it/script/grafXpunti2.htm

...
aX = -10; bX = 10; aY = -10; bY = 10
Dx = 1; Dy = 1

titolo = "punti a caso nella corona circolare centrata in (1,-2) tra i raggi 3 e 8"
Cax="brown"; Cgr="grey"
quadro=1

jP=-1
for(i=0; i < 2e4; i=i+1) {xP = Math.random()*20-10; yP = Math.random()*20-10;
if((xP-1)*(xP-1)+(yP+2)*(yP+2) < 8*8  &  (xP-1)*(xP-1)+(yP+2)*(yP+2) > 3*3) {jP=jP+1; Q1x[jP]=xP; Q1y[jP]=yP } }

O1x=[1]; O1y[0]=[-2]

C1="red"; C2="black"
...

Posso anche modificare dimensioni e colore dei punti operando su rQ, colQ, rO=2.6, colO. Le figure seguenti sono ottenute con questo script https://www.macosaweb.it/script/grafXp2b.htm ottenuto con le modifiche sotto descritte [nel secondo si sono tracciati meno punti: invece di for(i=0; i < 2e5; i=i+1) si è usato for(i=0; i < 1e4; i=i+1)]

...
jP=-1
for(i=0; i < 2e5; i=i+1) {xP = Math.random()*20-10; yP = Math.random()*20-10;
if((xP-1)*(xP-1)+(yP+2)*(yP+2) < 8*8  &  (xP-1)*(xP-1)+(yP+2)*(yP+2) > 3*3) {jP=jP+1; O1x[jP]=xP; O1y[jP]=yP } }
...
// puoi cambiare raggi e colore dei pallini Qn e On; valori standard:  rQ=2.6; colQ="black"; rO=2.6; colO="black" 
rQ=2.6; colQ="black"; rO=2.6; colO="black"
rO=0.5; colO="red"
https://www.macosaweb.it/script/corona.htm
...
titolo = "corona circolare centrata in (1,-2) tra i raggi 3 e 8"
Cax="brown"; Cgr="grey"
...
C3=C4="blue"; C1=C2="lime"
N = 200; H = 2*Math.PI/N
L1x=[-10,10];L1y=[-2,-2]; L2x=[1,1];L2y=[-10,10]
for(i=0; i<=N; i=i+1)
    { L3x[i]=1+8*Math.cos(H*i); L3y[i]=-2+8*Math.sin(H*i)
      L4x[i]=1+3*Math.cos(H*i); L4y[i]=-2+3*Math.sin(H*i) }
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""; ...
Co3="orange"; Co4="white"
...
 
 

Lo script   https://www.macosaweb.it/script/gradi.htm  traccia la figura qui a sinistra:  un quarto di cerchio di raggio 1 con indicati, con dei pallini, 5°, 10°, ..., 85°.
Può essere usato ad esempio per trovare la pendenza di una strada o l'inclinazione dei raggi dell sole, come nell'esempio che puoi vedere qui.

Nella scuola superiore si vede come questi calcoli possono essere svolti utilizzando la funzione atan (arcotangente).

https://www.macosaweb.it/script/grafXp3.htm   https://www.macosaweb.it/script/grafXp4.htm

...
aX = 0; bX = 5; aY = 0; bY = 5
Dx = 1/2; Dy = 1/2

titolo = "piano cartesiano 5 x 5"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [0.5,1,4,4.5,3,4.5,2,0,0.5]
Q1y = L1y = [0,0,1,2.5,3,3.5,4.5,2.5,0]

O1x = [2.135]; O1y = [2.159]

C1="blue"
...

https://www.macosaweb.it/script/grafXpunti_mm.htm     https://www.macosaweb.it/script/grafXp_mm.htm

...
aX = 0; bX = 80; aY = 0; bY = 80
Dx = 1; Dy = 1

titolo = ""
Cax="coral"; Cgr="orange"
quadro=0

C0="silver"; C1="silver"
C2="coral"; C3="coral"
L0x = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75]
L0y = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]
L1y = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75]
L1x = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]
L2x = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80]
L2y = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]
L3y = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80]
L3x = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]

C4="black"
Q0x=L4x = [10,20,55,75,35,65,30,30,10]
Q0y=L4y = [20,10,10,20,20,35,70,20,20]
...

Un altro esempio, con la scritta sotto al grafico (abbiamo copiato solo la parte inferiore dell'immagine):
https://www.macosaweb.it/script/bicicletta.htm

...
aX = 0; bX = 120; aY = 0; bY = 120
Dx = 1; Dy = 1
titolo = ""
Cax="coral"; Cgr="orange"
quadro=0

C0="silver"; C1="silver"
C2="coral"; C3="coral"
L0x = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75,85,85,95,95,105,105,115,115]
L0y = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]
L1y = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75,85,85,95,95,105,105,115,115]
L1x = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]
L2x = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80,90,90,100,100,110,110,120,120]
L2y = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]
L3y = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80,90,90,100,100,110,110,120,120]
L3x = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]

L4x=[10,10,105]; L4y=[65,10,10]
L5x=[0,0.33,0.83,1.2,1.7,1.83,2.33,2.57,3,46]; for(i=0; i < L5x.length; i=i+1) {L5x[i]=10+L5x[i]*30}
L5y=[0,5,15,18,18,20,34,41,46]; for(i=0; i < L5y.length; i=i+1) {L5y[i]=10+L5y[i]}

O1x=[L5x[0],L5x[3],L5x[4],L5x[8]]; O1y=[L5y[0],L5y[3],L5y[4],L5y[8]]
...
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]
T0=["0",10,7]; T1=["1",40,7]; T2=["2",70,7]; T3=["3",100,7]
T4=["0",5,10]; T5=["10",5,"20"]; T6=["20",5,"30"]; T7=["30",5,"40"]; T8=["40",5,"50"]; T9=["50",5,"60"]
...
// ----------------------------------------------------------------------------------
...
AY="Dx = "+Dx
...
if(quadro >1 || quadro <1) {AY="";AX="";BX=""; AAX="";BBX="";AAY="";BBY=""}  // se "quadro" non e' 1 tolgo indicazioni lungo assi

AY="un percorso in bicicletta durato 3 h (1 mm = 2 min), con una sosta"
...

https://www.macosaweb.it/script/campo.htm     https://www.macosaweb.it/script/campo2.htm

...
aX = 0; bX = 100; aY = 0; bY = 100
Dx = 20; Dy = 20

titolo = "vertici A in alto,  B a sinistra, ...,  E a destra"
Cax="grey"; Cgr="grey"
quadro=1
C1=C2="black"
Q1x=L1x=[ 10, 30, 65, 90, 35, 10 ]
Q1y=L1y=[ 20, 10, 15, 60, 90, 20 ]
L2x=[ 30, 35, 65]; L2y=[ 10, 90, 15]
...

Posso calcolare l'area con lo script "tri lato-lato-lato" che trovi qui (vedi gli esempi presenti nello script).

Cambiando la griglia (Dx e Dy uguali a 10 invece che a 20) vedo che, in realtà, il campo è stato tracciato con in vertici su ascisse e coordinate pari a multipli di 5.  Nell'ipotesi che queste siano le coordinate esatte posso trovare l'area con lo script "area polig":

Le lunghezze dei lati presenti sotto alla immagine (AB = …) sono state calcolate con lo script "dist".

https://www.macosaweb.it/script/mappa.htm

...
aX = -5; bX = 205; aY = -15; bY = 195
Dx = 0; Dy = 0

titolo = "0-10%         10-20%         20-30%          > 30%"
Cax="white"; Cgr="white"
quadro=0
C0=C1=C2=C3=C4=C5=C6=C7=C8=C9="black"

L1x=[57,10,8,27,48,57,45,67,75,57]
L1y=[158,121,78,43,47,72,101,112,130,158]
L2x=[27,48,57, 45, 67, 75,62,112,112,78,115,101,27]
L2y=[43,47,72,101,112,130,150,150,118,103,35.5,25,43]
L3x=[112,78,115,184,168,112,112]
L3y=[118,103,35.5,87,145,144,118]
L4x=[168,184,101,178,197,168]
L4y=[145, 87, 25, 4,115,145]
L5x=[10,35,35,10,10]; L5y=[170,170,195,195,170]; for(i=0;i<5;i=i+1) {L5x[i]=L5x[i]+10; L5y[i]=L5y[i]}
L6y=L7y=L8y=L5y
L6x=[10,35,35,10,10]; for(i=0;i<5;i=i+1) {L6x[i]=L6x[i]+55}
L7x=[10,35,35,10,10]; for(i=0;i<5;i=i+1) {L7x[i]=L7x[i]+100}
L8x=[10,35,35,10,10]; for(i=0;i<5;i=i+1) {L8x[i]=L8x[i]+145}

// modifica la definizione della funzione di cui volessi tracciare il grafico (f blu, g verde, h rosso, k arancione)
// Esempi: y=2*x+5   y=x*x/3  y= Math.sqrt(x-5)*10+3  y= Math.pow(x,3) (=x^3)  y= Math.sin(x/360*Math.PI)

function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";     T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]

Co3=Co5="white"; Co1=Co6="lightgrey"; Co4=Co7="darkgrey"; Co2=Co8="grey"

T0=["A",10,50]; T1=["B",55,25]; T2=["C",130,100]; T3=["D",192,30]
T4 = ["Diffusione di X in 4 regioni confinanti",100,-8]
...

https://www.macosaweb.it/script/polari.htm

minimo: 44 mm (gen. 1º anno), massimo: 108 mm (mar. 2º anno)

https://www.macosaweb.it/script/spirale.htm

...
aX = -100; bX = 100; aY = -110; bY = 90
Dx = 10; Dy = 10

titolo = "una spirale  (raggio = 5*2^(angolo/4)"
// r = 5*2^(teta/4); x = r * cos(teta); y = r * sin(teta)
Cax="brown"; Cgr="grey"
quadro=1

C1="blue"

n=200; H = 2*Math.PI/n
for(i=0;i<=3*n; i=i+1) { t = H*i
L0x[i]= 5*Math.pow(2,t/4)*Math.cos(t)
L0y[i]= 5*Math.pow(2,t/4)*Math.sin(t)       }
...

https://www.macosaweb.it/script/asteroide.htm

...
aX = -1; bX = 1; aY = -1; bY = 1
Dx = 0.1; Dy = 0.1

titolo = "asteroide  ( x=cos(t)^3,  y=sin(t)^3 )"
Cax="brown"; Cgr="grey"
quadro=1

C1="blue"

n=200; H = 2*Math.PI/n
for(i=0;i<=3*n; i=i+1) { t = H*i
L0x[i]= Math.pow(Math.cos(t),3)
L0y[i]= Math.pow(Math.sin(t),3)       }
...

https://www.macosaweb.it/script/isto_barre.htm

...
aX = 0; bX = 12; aY = 0-5; bY = 12-5
Dx = 1; Dy = 1

titolo = "temperature in gradi a marzo alle 12 (14 3 giorni,...)" 
Cax="silver"; Cgr="grey"
quadro=1

C0=C1=C2=C3=C4=C5=C6=C7="black"
L0x = [2,3,3,2,2]; L0y = [0,0,3,3,0]; O0x = [2.5,2.5,2.5]; O0y = [.5,1.5,2.5]
L1x = [3,4,4,3,3]; L1y = [0,0,6,6,0]; O1x = [3.5,3.5,3.5,3.5,3.5,3.5]; O1y = [.5,1.5,2.5,3.5,4.5,5.5]
L2x = [4,5,5,4,4]; L2y = [0,0,4,4,0]; O2x = [4.5,4.5,4.5,4.5]; O2y = [.5,1.5,2.5,3.5]
L3x = [5,6,6,5,5]; L3y = [0,0,7,7,0]; O3x = [5.5,5.5,5.5,5.5,5.5,5.5,5.5]; O3y = [.5,1.5,2.5,3.5,4.5,5.5,6.5]
L4x = [6,7,7,6,6]; L4y = [0,0,4,4,0]; O4x = [6.5,6.5,6.5,6.5]; O4y = [.5,1.5,2.5,3.5]
L5x = [7,8,8,7,7]; L5y = [0,0,2,2,0]; O5x = [7.5,7.5]; O5y = [.5,1.5]
L6x = [8,9,9,8,8]; L6y = [0,0,1,1,0]; O6x = [8.5]; O6y = [.5]
L7x = [9,10,10,9,9]; L7y = [0,0,4,4,0]; O7x = [9.5,9.5,9.5,9.5]; O7y = [.5,1.5,2.5,3.5]
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7="yellow"
// 10 scritte di piccole dimensioni con s0=["S",x,y],.., s9=["S",x,y]
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
s0=["14",2.5,-0.5]; s1=["15",3.5,-0.5]; s2=["16",4.5,-0.5]; s3=["17",5.5,-0.5]
s4=["18",6.5,-0.5]; s5=["19",7.5,-0.5]; s6=["20",8.5,-0.5]; s7=["21",9.5,-0.5]
...

https://www.macosaweb.it/script/areogramma1.htm
https://www.macosaweb.it/script/areogramma2.htm
https://www.macosaweb.it/script/areogramma3.htm

Le pecentuali (calcolabili con questo script) sono 14.5%, 45.5%, 11.1%, 28.8%, in accordo con i pallini che suddividono il cerchio in 10 parti uguali.

...
aX = -1; bX = 1; aY = -1; bY = 1
Dx = 1; Dy = 1

titolo = "125, 392, 96, 248"
Cax="white"; Cgr="white"
quadro=0

N=4; D = [125, 392, 96, 248]; T=0; for(i=0; i<N; i=i+1) T=T+D[i]

C0="black"; C1="red"; C2="blue"; C3="green"
n=300; H = 2*Math.PI/n; t0=0; 
L0x=[0];L0y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[0]/T; L0x[i]= Math.cos(t); L0y[i]= Math.sin(t)}; t0=t+t0
L1x=[0];L1y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[1]/T; L1x[i]= Math.cos(t+t0); L1y[i]= Math.sin(t+t0) } t0=t+t0
L2x=[0];L2y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[2]/T; L2x[i]= Math.cos(t+t0); L2y[i]= Math.sin(t+t0) }; t0=t+t0
L3x=[0];L3y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[3]/T; L3x[i]= Math.cos(t+t0); L3y[i]= Math.sin(t+t0) }; t0=t+t0
Q0x[0]=1; Q0y[0]=0; H = 2*Math.PI/10; for(i=1; i<=10; i=i+1) {Q0x[i]=Math.cos(H*i); Q0y[i]=Math.sin(H*i)}
...
...
aX = -1-1/4; bX = 1-1/4; aY = -1-1/2; bY = 1
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";       T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]
Co="silver"; Co1="pink"; Co2="cyan";Co3="limegreen"
...
...
aX = -1-1/2; bX = 1-1/2; aY = -1-1; bY = 1
...
// senza Q0x[0]=1; Q0y[0]=0; H = 2*Math.PI/10; for(i=1; i<=10; i=i+1) {Q0x[i]=Math.cos(H*i); Q0y[i]=Math.sin(H*i)}
...

Alcune trasformazioni geometriche. Vedi:

cerchi,   ellissi,   parabole,   iperboli
 


Tutte le funzioni usabili (oltre alle 4 operazioni). I nomi devono essere vanno preceduti da "Math."

abs(a)     / |a|                            log10(a) / log of a base 10
acos(a)    / arc cosine of a                max(a,b)
asin(a)    / arc sine of a                  min(a,b)
atan(a)    / arc tangent of a               pow(a,b) / a to the power b
atan2(a,b) / arc tangent of a/b             random() / random n. in [0,1)
cbrt(a)    / cube root of a                 round(a) / integer closest to a
ceil(a)    / integer closest to a not < a   sign(a)  / sign of a 
cos(a)     / cosine of a                    sin(a)   / sine of a
exp(a)     / exponential of a               sqrt(a)  / square root of a
floor(a)   / integer closest to a not > a   tan(a)   / tangent of a
log(a)     / log of a base e                trunc(a) / integer portion of a
log2(a)    / log of a base 2                PI       / π

cosh(a),sinh(a),tanh(a), acosh(a),asinh(a),atanh(a)    hyperbolic functions

      Note:   M%N is the remainder of M/N,   != is "not equal"

Si possono realizzare delle semplici animazioni con dei rinamdi da una pagina all'altra. Un esempio, di cui sotto sono riprodotte alcune immagini, e poi le spiegazioni.

graficoXpunti_zoom1.htm

Un altro:  graficoXpunti_zoomA.htm

Come sono realizzati?  Consideriamo graficoXpunti_zoom1.htm. Se si apre il file si vede che in fondo al documento ci sono queste righe:

...
</script>
<p><b><a href=graficoXpunti_zoom2.htm>CLICCA QUI</a> per CAMBIARE SCALA</b></p>

<p><br><b><a href="https://macosaweb.it/script/graficoXpunti_ex.htm" target=_blank>help</a></b></p>

C'è il rinvio al documento (graficoXpunti_zoom2) che genera la successiva immagine; in fondo a questo c'è il rinvio ... fino a che l'ultimo documento rinvia a quello iniziale.

Un altro esmpio:  grafXpA.htm

Ovviamente si possono realizzare animazioni con figure diverse dai grafici di funzione.


Per informazioni, aiuti, suggerimenti, ... potete scrivere a  dapueto@macosaweb.it