Versione rettangolare (4x3), in fondo versione quadrata4x1  e  2x1 // Rectangular version (4x3), at the bottom the square, the 4x1 and 2x1 version

[ Se vuoi ottenere nuovi file (come quelli descritti più avanti) a partire da quelli originali puoi salvare uno di questi sul tuo computer. Come fare? Ecco un semplice modo.  In Windows attivi l'editor di testi (BloccoNote o NotePad) e da lì apri il file originale (copia l'indirizzo "http://macosa.dima.unige.it/js/fun.htm" o ".../fun1.htm" o ...), lo salvi (se vuoi con un nuovo nome) sul tuo computer, lo modifichi e poi ne salvi la nuova versione.  In Mac salvi il file sul computer, modfica l'estensione da "htm" a "txt", apri il file con TextEdit, modificalo e rimetti l'estensione "htm".
If you want to get new files (like the ones described below) starting from the original ones you can save one of these on your computer. How to do? Here is a simple way.  In Windows activate the text editor (NotePad) and from there open the original file (copy the address "http://macosa.dima.unige.it/js/fun.htm" or ".../fun1.htm" or ...), you save it (with a new name if you want) on your computer, modify it and then save the new version.  On Mac save the file on your computer, change the extension from "htm" to "txt", open the file with TextEdit, edit it and put the extension "htm" back ]



fun1.htmfun.htmfun0.htmfun00.htm  e  fun000.htm  differiscono solo per le dimensioni del grafico. La versione originale contiene queste righe e produce il grafico soprastante:

fun1.htmfun.htmfun0.htmfun00.htm  and  fun000.htm  differ only in the size of the graph. The original version contains these lines and produces the graph above:


// --- base = 4/3 height -- base = 4/3 altezza --- f blue, g green, h red, k orange --

function f(x) { y =  x*x*x - 3*x*x + 1  ; return y }
function g(x) { y = 1/0; return y }  // puoi definire altre funzioni
function h(x) { y = 1/0; return y }  // you can define other funcions
function k(x) { y = 1/0; return y }

aX = -1; bX = 3; aY = -3.5; bY = 1.5
Dx = 1/2; Dy = 1/2

// Con/with Px=[a,b,..]; Py=[A,B,..] posso tracciare anche / I can also plot (a,A),(b,B),...
// Con/with Qx=[a,b,..]; Qy=[A,B,..] i punti sono gialli / the points are yellow;  con/with QQx,QQy sono piccoli / are little
// Con/with Q1x,Q1y, Q2x,Q2y, Q3x,Q3y  rossi,celesti,verdi / red,cyan,green        with QQ1x,QQ1y, QQ2x,QQ2y very little light red,blue
// Con/with Lx=[a,b,..]; Ly=[A,B,..] or ... L9y=[A,B,..] ho una linea spezzata / I have a polyline (a,A)-(b,B)-...
// Con/with xx=..; yy=.. ottengo rette verticali ed orizzontali / I get vertical and horizontal lines
Px=[];Py=[]; Qx=[];Qy=[]; Q1x=[];Q1y=[];Q2x=[];Q2y=[];Q3x=[];Q3y=[]; xx=[];yy=[]; QQx=[];QQy=[]; QQ1x=[]; QQ1y=[]; QQ2x=[]; QQ2y=[]
C0=C1="blue"; C2=C1;C3=C1;C4=C1;C5=C1;C6=C1;C7=C1;C8=C1;C9=C1; Cax="brown";Cgr="grey" // colors of L,L1,..,L9,axes,grid, that I can change
Lx=[];Ly=[]; L1x=[];L1y=[];L2x=[];L2y=[];L3x=[];L3y=[];L4x=[];L4y=[];L5x=[];L5y=[];L6x=[];L6y=[];L7x=[];L7y=[];L8x=[];L8y=[];L9x=[];L9y=[]

// ---------------------------------------------------------------------------

Data una funzione, scelto l'intervallo delle x, potrei scegliere l'intervallo delle y usando WolframAlpha. Con:
Given a function, after choosing the x range, I could choose the y range using WolframAlpha. With:
range  y = x*x*x - 3*x*x + 1,  -5 < x < 10
ottengo / I have:   -3 ≤ y ≤ 1

Se mi serve, la quantità di elementi di Px o Qx o … è  Px.length  o  Qx.length o …
If I need it, the quantity of elements of Px or Qx or … is  Px.length  or  Qx.length or …

Possono essere tracciati anche i grafici delle funzioni g, h e k, come vedremo in esempi finali (al momento sono funzioni con dominio vuoto).  Modificando le righe precedenti posso cambiare la scala o la funzione. Con xx = … e yy = … posso tracciare alcune rette verticali e orizzontali colorate. Come ottenere il grafico sopra a destra:
The graphs of functions g, h and k can also be plotted, as we will see in final examples (at present, they are functions with an empty domain).  By editing the previous lines I can change the scale or function. With xx = … and yy = … I can draw some colored vertical and horizontal lines. How to get the graph above on the right:

aX = -1; bX = 1; aY = -1.5; bY = 1.5
Dx = 0.1; Dy = 1/2

xx = [-0.5, 0.5]; yy = [-1, 1]

Al posto di x*x*... si può usare l'elevamento a potenza:
In place of x*x*... exponentiation can be used:

function f(x) { y =  Math.pow(x,3) - 3*Math.pow(x,2) + 1  ; return y }

Per calcolare xK quando x < 0 e K non è intero (ad es. (-8)1/3) non posso usare Math.pow(x,K) ma devo impiegare Math.sign(x)*Math.pow(Math.abs(x),K) :  mentre (-8)1/3 = 3√(-8) = -2, Math.pow(-8,1/3) non è definito. Math.sign(-8)*Math.pow(Math.abs(-8),K) fornisce il risultato atteso.
To calculate xK when x < 0 and K is not integer (e.g. (-8)1/3) I cannot use Math.pow(x,K) but I have to use Math.sign(x)*Math.pow(Math.abs(x),K) :  while (-8)1/3 = 3√(-8) = -2, Math.pow(-8,1/3) is not defined. Math.sign(-8)*Math.pow(Math.abs(-8),K) gives the expected result.
(vedi / see)
 
 y=x1/3  

Altri nomi di funzione / Other function names:

      Usable Functions (preceded by "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"

Note.   Al posto di / Instead of

function f(x) { y =  Math.pow(x,3) - 3*Math.pow(x,2) + 1  ; return y }
          puoi usare / you can use
function f(x) { with(Math) { y = pow(x,3) - 3*pow(x,2) + 1 }; return y }
 

Con degli zoom possiamo trovare i valori di x per cui  f(x)=0  o  f(x)  assume valori massimi o minimi.
With zooms we can find the values of x for which  f(x)=0  or  f(x)  assumes maximum or minimum values.

Per esempio con qualche zoom per il punto indicato trovo 0.65270
For example, with some zoom for the indicated point I find 0.65270
Con un altro script posso trovare / With another script I can find:
0.652703644666139

Volendo, si può individuare l'intervallo in cui variano le y usando questo script e modificando la funzione e l'intervallo considerati. Se si mette:
y = x*x*x - 3*x*x + 1
A = -1; B = 3
si ottiene:    -1 <= x <= 3  ___  y Min ~  -3  ___  y Max ~  1
ossia che y varia tra -3 ed 1, come in effetti è confermato dal grafico.

Un altro esempio / Another example
function f(x) { y =  Math.floor(x)  ; return y }

aX = -5; bX = 5; aY = -6; bY = 5
Dx = 1; Dy = 1

Posso evidenziare anche quali sono i punti non appartenenti al grafico, usando Px e Qx (vedi):
I can also highlight the points not belonging to the graph, by making use of Px and Qx (see):

// Con/with Px=[a,b,..]; Py=[A,B,..] puoi tracciare anche / you can also plot (a,A),(b,B),...
// Con/with Qx=[a,b,..]; Qy=[A,B,..] i punti sono gialli / the points are yellow
Px=[];Py=[]; Qx=[];Qy=[]; Q1x=[];Q1y=[]; Q2x=[];Q2y=[]; Q3x=[];Q3y=[]
 ...
Px=[-5,-4,-3,-2,-1,0,1,2,3,4]; Py=[-5,-4,-3,-2,-1,0,1,2,3,4,5,6]
Qx=[-4,-3,-2,-1,0,1,2,3,4,5]; Qy=[-5,-4,-3,-2,-1,0,1,2,3,4,5,6]

Un altro esempio / Another example
              (vedi / see)
function f(x) { y = (x-1)/( Math.pow(x,2)+x ) ; return y }
aX = -4; bX = 5; aY = -3; bY = 15
Dx = 1; Dy = 1
     ...

Un altro esempio / Another example
              (vedi / see)

function f(x) { if(x<=Math.PI/2) {y=2*Math.sin(x*x)} else {y=Math.sin(x*x)} ; return y }
aX = 0; bX = 3; aY = -1.5; bY = 2.5                                                     
Dx = 0.5; Dy = 0.5                                                                      
Qx=[Math.PI/2]; Qy=[Math.sin(Math.PI/2*Math.PI/2)]                                      

Un altro esempio / Another example
              (vedi / see)
function f(x) { if(x >= -1 && x <= 2) {y = Math.abs(-x*x+1)} else {y = x/0} ; return y }
aX = -2; bX = 3; aY = -1; bY = 4                                                        
Dx = 0.5; Dy = 0.5                                                                      
   
 
Un altro esempio / Another example

geometric transformations
trasformazioni geometriche
(vedi / see)
 
 
Un altro esempio / Another example
scales + translations
trasformazioni di scala + traslazioni
(vedi / see)

 
 
Un altro esempio / Another example
A function and its  derivative
(vedi / see
or  vedi / see)
 
Un altro esempio / Another example
Una funzione in cui compare A1/n con n dispari
A function in which A1/n appears with n odd
x → 5( x²·(x+1) / ( (1+x²)·(x+3) ) )
(vedi / see)

 

 
 
Un altro esempio / Another example
The function x → xx
(vedi / see)
Tre esempi in scala monometrica, scegliendo (bX-aX)/(bY-aY) = 4/3
Three examples on a monometric scale, if we choose (bX-aX)/(bY-aY) = 4/3:

              (1^ esempio / example)
// ------ base = 4/3 height ---- base = 4/3 altezza ---------------------------------

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

aX = -12; bX = 12; aY = -9; bY = 9
Dx = 1; Dy = 1

// Con/with Px=[a,b,..]; Py=[A,B,..] posso tracciare anche / I can also plot (a,A),(b,B),...
// Con/with Qx=[a,b,..]; Qy=[A,B,..] i punti sono gialli / the points are yellow
// Con/with Q1x,Q1y, Q2x,Q2y, Q3x,Q3y sono rossi,celesti,verdi / are red,cyan,green
// Con/with Lx=[a,b,..]; Ly=[A,B,..] or ... L9y=[A,B,..] ho una linea spezzata / I have a polyline (a,A)-(b,B)-...
// Con/with xx=..; yy=.. ottengo rette verticali ed orizzontali / I get vertical and horizontal lines
Px=[];Py=[]; Qx=[];Qy=[]; Q1x=[];Q1y=[]; Q2x=[];Q2y=[]; Q3x=[];Q3y=[]; xx=[];yy=[]
C0=C1="blue"; C2=C1;C3=C1;C4=C1;C5=C1;C6=C1;C7=C1;C8=C1;C9=C1; Cax="brown";Cgr="grey"
// colors of L1,..,L9,axes,grid, that I can change
Lx=[];Ly=[]; L1x=[];L1y=[];L2x=[];L2y=[];L3x=[];L3y=[];L4x=[];L4y=[];L5x=[];L5y=[];L6x=[];L6y=[];L7x=[];L7y=[];L8x=[];L8y=[];L9x=[];L9y=[]

Px=[-3,3,3,-3]; Py=[-3,-3,3,3]
Qx=[-6,6,6,-6,-2,2,2,-2]; Qy=[-6,-6,6,6,-2,-2,2,2]
Lx=[-5,5,5,-5,-5]; Ly=[-5,-5,5,5,-5]
L1x=[-8,8,8,-8,-8]; L1y=[-8,-8,8,8,-8]
L2x=[-2,2,2,-2,-2]; L2y=[-2,-2,2,2,-2]

// ----------------------------------------------------------------------------------

(2^ esempio / example)
(Lx,Ly) è una spezzata blu, (L1x,L1y),..,(L9x,L9y) hanno i colori messi in C1,..,C9. Alcuni dei colori assegnabili  /  (Lx,Ly) is a polyline blue, (L1x,L1y),..,(L9x,L9y) have the colors put in C1,..,C7. [the color of (Lx,Ly) is C0; you can change it too] Some of the colors assignable:
white silver grey yellow orange pink coral magenta red cyan aqua royalblue blue lightgreen limegreen seagreen green brown chocolate black

I colori sono descrivibili anche come addizione di rosso, verde e blu / The colors can also be described as the addition of Red, Green and Blue: #RRGGBB
red = #FF0000   green (lime) = #00FF00   blue = #0000FF   black = #000000   white = #FFFFFF   yellow = #FFFF00   orange = #FFA500
Numeri in base 16:  FF is 255, FE is 254, FA is 250, F0 is 240, EF is 239, A0 is 160, 9F is 159, 2F is 47, 20 is 32, 1F is 31, 10 is 16, 0F is 15, 0A is 10
Alcuni esempi / Some examples: vedi/see.

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

aX = 0; bX = 12; aY = 0; bY = 9
Dx = 1; Dy = 1
         // ...

C1="red"; C2="brown"; C3="green"; C4="green"; C5="green"
Lx=[1,1,11,11]; Ly=[6,1,1,6]
L1x=[0,6,12]; L1y=[6-2/5,8,6-2/5]; L2x=[5,5,7,7]; L2y=[1,4,4,1]
L3x=[2.5+5.5,4+5.5,4+5.5,2.5+5.5,2.5+5.5]; L3y=[2,2,4,4,2]
L4x=[5,7,7,5,5]; L4y=[5,5,6.5,6.5,5]; L5x=[2.5,4,4,2.5,2.5]; L5y=[2,2,4,4,2]

(2^ esempio bis / example bis)
 
Posso "cancellare" assi e griglia, e scritte  /  I can "delete" axis and grid, and writings

C1="blue"; ... Cax="brown";Cgr="grey" // colors of .. axes,grid that I can change
C1="red"; C2="brown"; C3="green"; C4="green"; C5="green"
Cax = "white"; Cgr = "white"
AX = BX = AY = BY = ""
 
(3^ esempio / example)

Grafici di più funzioni / Graphs of multiple functions
 

// base = 4/3 height -- f blue, g green, h red, k orange

function f(x) { y = Math.pow(x,2) ; return y }
function g(x) { y = Math.sqrt(x) ; return y }
function h(x) { y = g(f(x))+1 ; return y }
function k(x) { y = f(g(x))-1 ; return y }

aX = -4; bX = 4; aY = -1; bY = 5
Dx = 1; Dy = 1

 
Se vuoi, puoi cambiare che cosa scrivere come estremi degli intervalli delle x o delle y
If you want, you can change what to write as the extremes of the x or y intervals
                        //...
function f(x) { y = Math.pow(Math.sin(x),3); return y }
                        //...
aX = 0; bX = Math.PI*4; aY = -1.5; bY = 1.5
Dx = Math.PI/2; Dy = 0.5
                        //...
xx = [Math.PI*2, Math.PI*4]; yy=[-1,1]
                        //...
// ------------------------------------------------------------
                        //...
AX = aX      // Puoi cambiare che cosa scrivere come estremi
BX = "4*PI"  // You can change what to write as the extremes
AY = aY
BY = bY
// puoi mettere scritte non al centro / you can put writing not in the center
AAX=""; BBX=""; AAY=""; BBY=""
                              o / or:  (vedi / see)
AX = 0
BX = ""
AY = "2*PI"
BY = "y = sin(x)^3"
// puoi mettere scritte non al centro / you can put writing not in the center
AAX = aX; BBX = "4*PI"; AAY = aY; BBY = bY

 

 

   Come tracciare grafici con spessori diversi: vedi.
function f(x) { y = x+2; return y }
function g(x) { y = x-2; return y }
function h(x) { y = -x+2; return y }
function k(x) { y = -x-2; return y }
aX = -4; bX = 4; aY = -3; bY = 3
Dx = 1/2; Dy = 1/2
// linew=2; linef=2; lineg=2; lineh=2; linek=2
// e' lo spessore standard di linee e grafici; puoi cambiarlo (1,..,6)
// is the standard width of line and graphs; you can change it (1,..,6)
linew=2; linef=1; lineg=2; lineh=3; linek=4

Come colorare con puntini piccoli / How to color with small dots (vedi / see)
function f(x) { if(x<=Math.PI/2) {y=2*Math.sin(x*x)} else
                                 {y=Math.sin(x*x)}; return y }

aX = 0; bX = 3; aY = -1.5; bY = 2.5
Dx = 1/2; Dy = 1/2

// with QQ1x,QQ1y, QQ2x,QQ2y very little light red, blue

i=0; ii=0
for(j=0;j<1e5;j=j+1) {xp=Math.random()*(bX-aX)+aX; yp=Math.random()*(bY-aY)+aY
                      if(yp>0 && yp<f(xp)) {QQ2x[i]=xp; QQ2y[i]=yp; i=i+1}
                      if(yp<0 && yp>f(xp)) {QQ1x[ii]=xp; QQ1y[ii]=yp; ii=ii+1} }
Un altro esempio / Another example (vedi / see)

 Un altro / Another
La trasformazione geometrica che, usando i numeri complessi (z = x+iy), è z → z²+z
The geometric transformation which, using complex numbers (z = x+iy), is z → z²+z

C  →  R²
(x+iy)^2 + (x+iy)  =  x^2 + i (2 x y + y) + x - y^2
(x, y)  →  (x^2 + x - y^2,  2 x y + y)

(vedi / see)

  
Puoi anche tracciare curve descritte in forma parametrica.
Nel caso esemplificato le curve sono messe in (Lx,Ly) e (L1x,L1y).
I loro colori sono C0 e C1.

You can also draw curves described in parametric form.
In the exemplified case the curves are located in (Lx,Ly) and (L1x,L1y).
Their colors are C0 and C1.

                  (vedi / see)

aX = -4; bX = 4; aY = -3; bY = 3
Dx = 1/2; Dy = 1/2
C1="red"
// curve in forma parametrica / curves in parametric form
function XX(t) {x= Math.cos(t)*2.5; if(Ix(x)<1){x=1/0}; return x}
function YY(t) {y= Math.sin(t)*2; if(Iy(y)<1){y=1/0}; return y}; t1=0; t2=6.29
function XX1(t) {x= Math.cos(t)*2; if(Ix(x)<1){x=1/0}; return x}
function YY1(t) {y= Math.sin(t)*2.5; if(Iy(y)<1){y=1/0}; return y}; t1=0; t2=6.29
for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);Lx[j]=XX(t);Ly[j]=YY(t)}
for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);L1x[j]=XX1(t);L1y[j]=YY1(t)}
// Con/with  for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);Lx[j]=XX(t);Ly[j]=YY(t)}
// O con/ or with  for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);L1x[j]=XX1(t);L1y[j]=YY1(t)}
// ottieni una curva se metti opportune funzioni / you get a curve if you put suitable functions
// x=f(t), y=g(t) inside  {;  in XX(t),YY(t) or XX1(t),YY1(t)  [or  XX2(t)..XX7(t), YY2(t)..YY7(t)]

AX = ""
BX = ""
AY = "-4 <= x <= 4, -3 <= y <= 3"
BY = ""

     Come tracciare il grafico della relazione inversa in
casi in cui non sia facile descriverla esplicitamente

How to plot the converse relation in cases
where it is not easy to describe it explicitly

(vedi / see)

Come colorare parti di figure
How to color parts of figures

(vedi / see)
    

  Come tracciare facilmente archi di cerchio
How to easily draw arcs of circles

                  (vedi / see)
 

// curve in forma parametrica / curves in parametric form
function XX(t) {; if(Ix(x)<1){x=1/0}; return x}
function YY(t) {; if(Iy(y)<1){y=1/0}; return y}; t1=1/0; t2=1/0
function XX1(t) {; if(Ix(x)<1){x=1/0}; return x};
function YY1(t) {; if(Iy(y)<1){y=1/0}; return y}; t1=1/0; t2=1/0
// Con/with  for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);Lx[j]=XX(t);Ly[j]=YY(t)}
// O con/ or with  for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);L1x[j]=XX1(t);L1y[j]=YY1(t)}
// ottieni una curva se metti opportune funzioni / you get a curve if you put suitable functions
// x=f(t), y=g(t) inside  {;  in XX(t),YY(t) or XX1(t),YY1(t)  [or  XX2(t)..XX7(t), YY2(t)..YY7(t)]
R=2; P=-1;Q=1/2; gr1=225;gr2=225+180
 function XX1(t) {x=Math.cos(t)*R+P; if(Ix(x)<1){x=1/0}; return x}
 function YY1(t) {y=Math.sin(t)*R+Q; if(Ix(x)<1){x=1/0}; return y}; t1=Math.PI/180*gr1; t2=Math.PI/180*gr2
 for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);L1x[j]=XX1(t);L1y[j]=YY1(t)}
R=1/2; P=-1;Q=1/2; gr1=0;gr2=360
 function XX(t) {x=Math.cos(t)*R+P; if(Ix(x)<1){x=1/0}; return x}
 function YY(t) {y=Math.sin(t)*R+Q; if(Ix(x)<1){x=1/0}; return y}; t1=Math.PI/180*gr1; t2=Math.PI/180*gr2
 for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);Lx[j]=XX(t);Ly[j]=YY(t)}

 
Posso tracciare anche più di due curve descritte in forma parametrica
definendole in modo analogo a (Lx,Ly) e (L1x,L1y).

I can also plot more than two curves described in parametric form
by defining them similarly to (Lx, Ly) and (L1x, L1y).

                    (vedi / see)
 

aX = -4; bX = 4; aY = -3; bY = 3
Dx = 1/2; Dy = 1/2
C1="red";C2="green"; Cax="orange"; Cgr="orange"
AX = BX = AY = BY = ""
// curve in forma parametrica / curves in parametric form
function XX(t) {x= Math.cos(t)*2.5; if(Ix(x)<1){x=1/0}; return x}
function YY(t) {y= Math.sin(t)*2; if(Iy(y)<1){y=1/0}; return y}; t1=0; t2=6.29
for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);Lx[j]=XX(t);Ly[j]=YY(t)}
function XX1(t) {x= Math.cos(t)*2; if(Ix(x)<1){x=1/0}; return x}
function YY1(t) {y= Math.sin(t)*2.5; if(Iy(y)<1){y=1/0}; return y}; t1=0; t2=6.29
for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);L1x[j]=XX1(t);L1y[j]=YY1(t)}
function XX2(t) {x= Math.pow(Math.cos(t),3)*3; if(Ix(x)<1){x=1/0}; return x}
function YY2(t) {y= Math.pow(Math.sin(t),3)*3; if(Iy(y)<1){y=1/0}; return y}; t1=0; t2=6.29
for(j=0;j<=5e3;j=j+1) {t=t1+(t2-t1)/5e3*(j-1);L2x[j]=XX2(t);L2y[j]=YY2(t)}

Un altro esempio  /  Another example:  vedi / see
[ rotazioni / rotations ]
Un altro esempio  /  Another example:  vedi / see
Un altro esempio  /  Another example:  vedi / see
Un altro esempio  /  Another example:  vedi / see

Fixed point iteration
La lunghezza di una spezzata  /  the length of a polygonal chain:  vedi / see

[per la lunghezza di curve / for the length of a curve: arc lenght

Posso tracciare sequenze di punti diversamente colorati.
I can draw sequences of differently colored points.

    I millimetri di pioggia caduti mediamente, tra il 1971 e il 2000, nei vari mesi dell'anno, nelle città di Palermo (rosso), Genova (verde), Milano (giallo) e Bolzano (celeste).
    The millimeters of rain that fell on average, between 1971 and 2000, in the various months of the year, in the cities of Palermo (red), Genoa (green), Milan (yellow) and Bolzano (light blue).

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

aX = 1; bX = 12; aY = 0; bY = 180
Dx = 1; Dy = 10

// Con/with Px=[a,b,..]; Py=[A,B,..] posso tracciare anche / I can also plot (a,A),(b,B),...
// Con/with Qx=[a,b,..]; Qy=[A,B,..] i punti sono gialli / the points are yellow
// Con/with Q1x,Q1y, Q2x,Q2y, Q3x,Q3y sono rossi,celesti,verdi / are red,cyan,green
// Con/with Lx=[a,b,..]; Ly=[A,B,..] or ... L9y=[A,B,..] ho una linea spezzata / I have a polyline (a,A)-(b,B)-...
// Con/with xx=..; yy=.. ottengo rette verticali ed orizzontali / I get vertical and horizontal lines
Px=[];Py=[]; Qx=[];Qy=[]; Q1x=[];Q1y=[]; Q2x=[];Q2y=[]; Q3x=[];Q3y=[]; xx=[];yy=[]
C0=C1="blue"; C2=C1;C3=C1;C4=C1;C5=C1;C6=C1;C7=C1;C8=C1;C9=C1; Cax="brown";Cgr="grey" // colors of L1,..,L9,axes,grid, that I can change
Lx=[];Ly=[]; L1x=[];L1y=[];L2x=[];L2y=[];L3x=[];L3y=[];L4x=[];L4y=[];L5x=[];L5y=[];L6x=[];L6y=[];L7x=[];L7y=[];L8x=[];L8y=[];L9x=[];L9y=[]

Lx =[1,2,3,4,5,6,7,8,9,10,11,12]; Ly =[58.7,49.2,65.0,75.5,95.5,66.7,66.8,88.8,93.1,122.4,76.7,61.7]
L1x = Lx; L1y = [97.5,109.9,78.2,65.1,36.2,17.9, 6.7,31.8,65.3,105.6,117.5,123.7]
L2x = Lx; L2y = [23.5, 22.8,36.9,50.2,75.2,84.6,92.3,86.2,70.9, 84.4, 49.9, 34.6]
L3x = Lx; L3y = [101.8,74.0,81.7,88.0,72.4,58.2,24.2,69.3,136.4,171.3,108.8,93.1]
Qx = Lx; Q1x = Lx;  Q2x = Lx;  Q3x = Lx
Qy = Ly; Q1y = L1y; Q2y = L2y; Q3y = L3y
yy = [50,100,150]

AX = "gen "
BX = " dic"
AY = aY+" mm"
BY = bY+" mm"
                 o / or:  (vedi / see)

AX = ""; BX = ""; AY = ""
BY = "mm di pioggia caduti mediamente tra 1971 e 2000"
AAX=""; BBX=""; AAY=""; BBY=""

//   Puoi aggiungere 20 scritte: la scritta S nella posizione x0,y0 con T0=["S",x0,y0],.., nella
// posizione x9,y9 con T9=["S",x9,y9], o di dimensioni piccole con s0=["S",x0,y0],.., s9=["S",x9,y9]
//   You can add 20 writings: the writing S in position x0,y0 using T0["S",x0,y0],.., in position
// x9,y9 using T9=["S",x9,y9], or with small dimensions using s0=["S",x0,y0],.., s9=["S",x9,y9].
V="";T0=V;T1=V;T2=V;T3=V;T4=V;T5=V;T6=V;T7=V;T8=V;T9=V;s0=V;s1=V;s2=V;s3=V;s4=V;s5=V;s6=V;s7=V;s8=V;s9=V

T1=["PA",12.7,122]; T2=["GE",12.7,92]; T3=["MI",12.7,61]; T4=["BZ",12.7,33]
s0=["lug",7,-6.5]; s1=["gen",1,-6.5]; s2=["dic",12,-6.5]
s3=["0 mm",0.1,2]; s4=["100 mm",-0.1,100]; s5=["180 mm",0,180]

// ----------------------------------------------------------------------------------

Puoi anche fare linee (L,..,L9) di spessore diverso.  E puoi colorare la parte interna delle figure.  Un esempio, un orologiovedi  (uno più piccolo)
You can also make lines (L,..,L9) of different thickness.  And you can color the inside of the figures.  An example, a clocksee  (a smaller one)
HOUR = 7; MIN = 20; SEC = 13        //  <-- scrivi l'ora / write the time

// ----------------------------------------------------------------------------------
linew1=linew2=linew3=linew4=linew5=linew6=linew7=linew8=linew9=linew
// se vuoi puoi porre linewN diverso da linew / you can set linewN different from linew
linew5=5; linew4=4; linew3=1

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// per colorare l'interno del poligono L o ... L9 poni Co="colore" o ... Co9="colore"
// you can color the inside of the polygon L, ... L9 set Co="color", ... Co9="color"
Co1="pink"                                     // L1 e' il cerchio / L1 is the circle
// ----------------------------------------------------------------------------------
 
 Un altro /another:  vedi / see
Un altro /another:  vedi / see

più grande / a bigger one
 
 Un altro /another:  vedi / see
Un altro /another:  vedi / see 
    Un altro /another:  vedi / see
somma di vettori / sum of vectors

Un altro /another:  vedi / see
centroid, baricentro / centroid, barycenter
Un altro /another:  vedi / see 


131     217     37     116     48

23.862%    39.526%      6.74%    21.129%     8.743%
Un altro (diagramma a torta) / another (pie chart):
grande / big     piccolo / little


(diistribuzione %  /  % distribution:  vedi / see)

Un altro (diagramma a torta in sessantesimi) / another (pie chart in sixtieths):
grande / big     piccolo / little

10     20     15     15


3.8%  27.1%  5.7%  17.6%  25.2%  13.3%  7.1%
Un altro (diagramma a mezza torta) / another (a half pie chart):
grande / big     piccolo / little

(diistribuzione %  /  % distribution:  vedi / see)

Un altro diagramma a torta / another pie chart:
vedi / see

A=8, B=57, C=12, D=37, E=53, F=28, G=15
3.8%  27.1%  5.7%  17.6%  25.2%  13.3%  7.1%
Un diagramma vuoto/ an empty chart: vedi / see

Puoi aggiungere un'altra griglia / You can add another grid:
grande / big     piccolo / little

Un altro esempio / another example
(diagramma a barre / bar diagram)

vedi / see

Un altro esempio / Another example
(random)

vedi / see

Un altro esempio / Another example

vedi / see     vedi / see

Un altro esempio / Another example: people per km² in 2018 (Lazio, Piemonte, Calabria, Sardegna, Valle d'Aosta)
vedi/see A   vedi/see B   vedi/see C   vedi/see D   vedi/see E

Un altro esempio (istogrammi)/ another example (histograms)
vedi / see     vedi / see     vedi / see     vedi / see     vedi / see     vedi / see     vedi / see    
 

Un altro / another
vedi / see       vedi / see
 

Un altro esempio  /  Another example   (vedi / see:  totale, unitario):

Un altro esempio   /   Another example   (vedi / see)

Un altro esempio   /   Another example
      Fourier series   (vedi / see)

Un altro esempio   /   Another example   (vedi / see)

Un altro esempio (record di salto in alto maschile)
Another example (men's high jump records)
(vedi / see)

Un altro esempio (una superficie - area e centroide)
Another example (a surface - area and centroid)
(vedi / see)

  Altri due esempi:
uno/one     due/two

Con  Lx,Ly, ..., L9x,L9y  posso anche tracciare "punti" con ascisse e ordinate rappresentate da intervalli di indeterminazione. Vedi qui un esempio.
With  Lx, Ly, ..., L9x, L9y  I can also plot "points" with abscissas and ordinates that lie within specified ranges instead of having definite values (interval arithmetic). See here an example.

Puoi mettere in uno stesso documento grafici diversi disponendoli in più colonne o righe.
You can put different graphics in the same document by arranging them in multiple columns or rows.

2 colonne / 2 columns:  vedi / see.

o / or:  vedi / see.

Un altro esempio QUI

Another example HERE

Un altro esempio QUI

Another example HERE




In fondo all'immagine generata appare il testo seguente:  /
The following text appears at the bottom of the generated image:

Puoi aprire il codice e modificare la funzione: vedi l'Help
You can open the Code and modify the function: see the Help
HELP

prodotto dal codice:  /  produced by the code:

<p>Puoi aprire il codice e modificare la funzione: vedi l'Help<br>
You can open the Code and modify the function: see the Help<br>
<b>HELP</b</p>

Volendo, possiamo togliere questo testo.  /  If we want, we can remove this text.



 
La versione quadrata differisce da quella rettangolare solo per le dimensioni. I comandi sono gli stessi.
The square version differs from the rectangular one only in size. The commands are the same.


// --- base = height -- base = altezza --- f blue, g green, h red, k orange --

function f(x) { y = x; return y }
function g(x) { y = 1/0; return y }  // puoi definire altre funzioni
function h(x) { y = 1/0; return y }  // you can define other funcions
function k(x) { y = 1/0; return y }

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

Le versioni originali in diverse dimensioni sono fu1.htmfu.htmfu0.htmfu00.htm  e  fu000.htm.
The original versions in different sizes are fu1.htmfu.htmfu0.htmfu00.htm  and  fu000.htm.



 

Due esempi  /  two examples:   es1es2.


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

aX = -1.5; bX = 1.5; aY = -1.5; bY = 1.5
Dx = 1/2; Dy = 1/2

Lx = [-1, -1, 1, 1, -1]; Ly = [1, -1, -1, 1, 1]
C1="red"
L1x = [-1, 0, 1, 0, -1]; L1y = [0, -1, 0, 1, 0]

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// se vuoi colorare l'interno del poligono L o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
// if you want to color the inside of the polygon L, L1 or ... L9 set Co="color", Co1="color" or ... Co9="color"
Co="yellow"; Co1="cyan"
Un altro esempio / Another example:

vedi/see
Un altro esempio / Another example:

vedi/see
Un altro / another:


 
La versione 4x1 differisce da quella 4x3 solo per le dimensioni. I comandi sono gli stessi.
The 4x1 version differs from the 4x3 one only in size. The commands are the same.


// --- base = 4 height -- base = 4 altezza --- f blue, g green, h red, k orange --

function f(x) { y = 25/100*x; return y }
function g(x) { y = 1/0; return y }  // puoi definire altre funzioni
function h(x) { y = 1/0; return y }  // you can define other funcions
function k(x) { y = 1/0; return y }

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

Le versioni originali in diverse dimensioni sono ff1.htmff0.htm  e  ff00.htm.
The original versions in different sizes are ff1.htmff0.htm  and  ff00.htm.

Un esempio /An example:  vedi/see

Due esempi  /  two examples:   es1es2.





 
function f(x) { if(x<=Math.PI*2 && x>=-Math.PI*2) {y=Math.sin(x)} else {y=1/0}; return y }
 . . .
aX = -8; bX = 8; aY = -2; bY = 2
Dx = 1/2; Dy = 1/2
 . . .
Px=[-Math.PI*2,Math.PI*2,-Math.PI,Math.PI]; Py=[0,0,0,0]
 . . .
AX=BX=AY=BY=""
BY="sin"
 . . .
T0=["-2PI",-Math.PI*2,-2.3]; T1=["2PI",Math.PI*2,-2.3]; T2=["-PI",-Math.PI,-2.3]; T3=["PI",Math.PI,-2.3]
T4=["-8",-8,-2.3]; T5=["8",8,-2.3]; T6=["-5",-5,-2.3]; T7=["5",5,-2.3]; T8=["0",0,-2.3]
s0=["-1",-8.3,-1]; s1=["1",-8.3,1]; s2=["0",-8.3,0]


 
La versione 2x1 differisce solo per le dimensioni. I comandi sono gli stessi.
The 2x1 version differsonly in size. The commands are the same.

Le versioni originali in diverse dimensioni sono fdue.htm  e  fdue0.htm.
The original versions in different sizes are fdue.htm  and  fdue0.htm.

Un altro esempio / Another example   fdue_sun.htm: