Fondamenti di programmazione

Corso php a cura del prof. Pietro De Paolis

Grafico della funzione lineare

y= mx + q

Sappiamo che un funzione matematica si può rappresentare su di un sistema di assi cartesiani. Se sull'asse orizzontale delle ascisse rappresentiamo la variabile indipendente x e sull'asse verticale delle ordinate rappresentiamo il valore che assume la funzione in x, cioè y= f(x) otteniamo per ogni valore di x la coppia (x; y) che costituisce un punto del grafico della funzione. Cioè il grafico è l'insieme dei punti la cui ascissa è x e la cui ordinata è y=f(x).

Il php ha delle funzioni grafiche che abbiamo già visto, per cui lo possiamo utilizzare per il disegno del grafico della funzione su di un sistema di assi cartesiani.

Supponiamo di voler disegnare il grafico della funzione:

y = mx + q

con m e q numeri reali.

cioè il seguente:

Grafico di y = 2x +20

Occorre dare i comandi giusti per disegnare l'immagine sullo schermo del computer.

Schermata del programma iniziale equazione1.php

Dividiamo il programma da costruire in due programmi; un primo programma lo chiameremo equazione1.php  ed ha lo scopo di far scrivere all'utente il valore del coefficiente angolare m e del termine dell'ordinata all'origine q.

Programma equazione1.php

Questo programma mi serve per poter consentire all'utente di cambiare i valori sia di m che di q; questi valori verranno passati ad un secondo programma funzione3.php che eseguirà il disegno del grafico.

In html costruiremo un modulo con due caselle di testo per inserire i due coefficienti dell'equazione.

Con:

<form action="funzione3.php" name="modulo1">

inizio la costruzione del modulo con una istruzione form; quando il modulo verrà inviato esso richiamerà sul PC dell'utente la pagina:funzione3.php che eseguirà il disegno.

Con:

<input type="text" name="coefficiente" size="9" ... >

mi creo una casella di testo di nome coefficiente. Questo nome: coefficiente sarà l'equivalente in php di $coefficiente.

Con:

<input type="text" name="noto" size="9"... >

mi creo una casella di testo di nome noto. Questo nome: noto sarà l'equivalente in php di $noto.

Con:

<input type="Submit" value="DISEGNA GRAFICO">

mi creo il tasto di invio dei dati

Premendo questo tasto oppure premendo invio, i dati contenuti nel modulo verranno trasmessi al programma successivo cioè funzione3.php .

Con:

</form>

</html>

chiudo il modulo e chiudo la pagina in html.

Il listato completo di questo primo programma è il seguente:

Una volta eseguito mi darà:

Schermata del programma iniziale equazione1.php

con il quale l'utente può scrivere i due coefficienti m e q.

Programma funzione3.php

Questo secondo programma mi serve per il disegno del grafico sapendo i coefficienti m e q dell'equazione della retta da disegnare.

Intanto ricordiamo che per disegnare in php occorre prima disegnare l'immagine nella memoria del server e poi mostrare l'immagine creata all'utente.

Il disegno è abbastanza delicato ed è una cosa da esperti; per cui non occorre scoraggiarsi ai primi insuccessi, ma tentare più volte fino a correggere gli errori più comuni.

Comunque noi seguiremo in ordine i seguenti passi.

1 - Il listato in php va scritto con un editor di testo, ma senza mischiare altri linguaggi o tag html; cioè il listato deve essere in puro php, iniziare con

<?php

e finire con

?>

Non usare istruzioni diverse da quelle del disegno, tipo la print; cioè la prima cosa che deve apparire sull'immagine finale deve essere la istruzione

header ("Content-type: image/png");

Questa è una istruzione delicata in quanto lo scambio di informazioni tra computer locale e server che invia l'immagine deve avvenire prima di qualunque altra istruzione; inoltre tutto quello che segue la istruzione header deve essere una istruzione di visualizzazione del disegno, altrimenti non viene visualizzata sullo schermo del pc. Per cui solo istruzioni che lavorano in memoria, che lavorano sui file, e istruzioni di disegno. Risultati non si possono vedere se non a parte, ma solo successivamente con un altro programma, magari anche salvando il disegno su un file di immagine (.pnp .jpg .gif) e poi mostrandolo insieme alle altre cose da far vedere all'utente.

2 - Creiamo una immagine a colori, cioè un foglio vuoto che ci serve da sfondo su cui disegnare:

$immagine = imagecreatetruecolor (550,300);

Salvo nella variabile $immagine questo foglio vuoto che ha la dimensione in orizzontale, pari a 550 punti (pixel dello schermo) e 300 punti in verticale. Per lo schermo l'origine degli assi, cioè 0 (0;0) è il punto più in alto a sinistra e non un punto in basso; per cui mentre l'asse x parte con lo 0 dal primo punto a sinistra e non al centro, l'asse y parte con lo 0 da sopra verso il basso.

3- Mi creo alcuni colori con cui disegnare successivamente; mi serve un colore nero con cui disegno gli assi cartesiani:

$nero = imagecolorallocate ($immagine, 0, 0, 0);

Cioè memorizzo nella varibile $nero un colore da usare per $immagine e questo colore sarà la somma dei tre colori fondamentali, cioè:

rosso =0;

giallo=0;

blu=0;

I numeri dei colori vanno da o a 255; dove 0 vuol dire che quel colore non c'è; 255 vuol dire che quel colore è al massimo di intensità.

Poi con:

$arancio = imagecolorallocate ($immagine, 250, 200,150);

Mi creo un colore arancio che memorizzo nella varibile $arancio da usare per $immagine e questo colore sarà la somma dei tre colori fondamentali, cioè:

rosso =250;

giallo=200;

blu=150;

Poi con: 

$blu = imagecolorallocate ($immagine, 0, 0,200);

Mi creo un colore blu che memorizzo nella varibile $blu da usare per $immagine e questo colore sarà la somma dei tre colori fondamentali, cioè:

rosso =0;

giallo=0;

blu=200;

Poi con: 

$rosso = imagecolorallocate ($immagine, 255, 0,0);

Mi creo un colore rosso che memorizzo nella varibile $rosso da usare per $immagine e questo colore sarà la somma dei tre colori fondamentali, cioè:

rosso =255;

giallo=0;

blu=0;

Una volta che dispongo di un foglio su cui disegnare e dei 4 colori che ho cselto di utilizzare inizio a disegnare sul foglio, ma sempre in memoria, in quanto i risultati non li vedrò se non alla fine del disegno.

4 - Ora mi disegno uno sfondo colorato invece del colore nero, in quanto lo ritengo più gradito.

imagefilledrectangle ($immagine, 0,0, 550, 300, $arancio);

Cioè mi disegno un rettangolo colorato del colore $arancio a partire dal punto superiore dello schermo, di coordinate (0;0) fino al punto inferiore destro di coordinate (550; 300).

A questo punto se volessi vedere il lavoro svolto in memoria dovrei inserire una istruzione:

header ("Content-type: image/png");

seguita da:

imagepng ($immagine);

La istruzione 

header ("Content-type: image/png");

indica il tipo di immagine; nel nostro caso abbiamo scelto il formato png; mentre:

imagepng ($immagine);

mostra all'utente l'immagine che ho memorizzato in formato png nella variabile $immagine.

Vedrò:

Il listato completo, infatti, è ora:

Notiamo la istruzione:

imagedestroy ($immagine);

che cancella l'immagine dalla memoria per evitare che la memoria del server si riempia. Essa va messa sempre alla fine di tutti i disegni.

5 - Ora mi disegno un sistema di assi cartesiani ortogonali; con la istruzione

imageline ($immagine, 10, 150, 500, 150, $nero);

tiro una linea che parte dal punto (10;150) e arriva al punto (500;150); cioè una linea orrizzontale di colore $nero al centro dello schermo.

Con la istruzione:

imageline ($immagine, 250, 10, 250, 300, $nero);

tiro una linea verticale, di colore $nero, che parte dal punto (250;10) e arriva al punto (250;300). 

Con le istruzioni:

imageline ($immagine, 500, 150, 490, 145, $nero);

imageline ($immagine, 500, 150, 490, 155, $nero);

imageline ($immagine, 250, 10, 245, 20, $nero);

imageline ($immagine, 250, 10, 255, 20, $nero);

tiro quattro piccoli segmenti obliqui, a forma di freccia,  sugli estremi degli assi onde indicare il verso positivo dei due assi x e y.

Con le istruzioni:

imagestring ($immagine, 5, 490, 125, "x", $blu);

imagestring ($immagine, 5, 270, 10, "y", $blu);

scrivo x sull'asse delle x ed y sull'asse delle y con un carettere avente dimensione 5 e colore $blu, nei punti (490;125) e (270;10).

Con le istruzioni:

$coefficiente = $_GET['coefficiente'];

$noto = $_GET['noto'];

salvo nella  variabile php $coefficiente il valore di m e in $noto il valore di q.

Ora per poter scrivere una didascalia del grafico devo tenere conto di diversi casi che si possono avere del termine q; cioè q può essere 0, oppure positivo, oppure negativo.

Memorizzo nella variabile $descrizione il testo da scrivere sul grafico come didascalia.

Con:

if($noto<0) $descrizione="Grafico di y = ".$coefficiente."x ".$noto;

 se q è negativo scriverà:

Grafico di y= m - q

Con:

if($noto>0) $descrizione="Grafico di y = ".$coefficiente."x + ".$noto;

se q è positivo scriverà:

Grafico di y= m + q

Con:

if($noto==0) $descrizione="Grafico di y = ".$coefficiente."x" ;

se q è zero scriverà:

Grafico di y= m 

Una volta memorizzato in $descrizione il testo da scrivere con:

imagestring ($immagine, 5, 300, 280, $descrizione, $blu);

scrivo il testo contenuto in $descrizione nel punto (300;280) col colore $blu e con dimensione del carattere uguale a 5.

6- Completo il lavoro disegnando il grafico della funzione

y= mx + q

sul sistema di assi cartesiani. Uso una istruzione for:

for ($t=-140; $t<140; $t+=2) {

$y=$coefficiente*$t + $noto;

imagestring ($immagine, 3, 247+$t, 140-$y, ".", $rosso);

};

Per disegnare il grafico uso la istruzione imagestring che scrive del testo in un punto prestabilito; il testo da scrivere è un punto, cioè ".", di colore $rosso e di dimensione 3.

Le coordinate del punto in cui verrà disegnato "." variano al variare di un contatore $t; $t parte dal valore -140; viene incrementato di 2 per ogni ciclo e il ciclo viene ripetuto finchè $t non raggiunge il valore di 140.

Poiché il sistema di assi dello schermo rispetto al sistema di assi da noi disegnato è traslato, cioè lo zero origine degli assi non è coincidente, occorre che la posizione del punto in cui verrà disegnato sia traslata in senso orizzontale di 250 e in senso verticale di 150. Si è scelto in orizzontale 247 invece di 250 e in verticale  147 invece di 150 per correggere il fatto che il "." si trova verso il basso e verso destra e non al centro.

La coordinata y la preparo con:

$y=$coefficiente*$t + $noto;

Cioè moltiplico il coefficiente m contenuto in $coefficiente per la x variabile contenuta nel contatore $t; poi aggiungo il valore di q contenuto in $noto.

A questo punto eseguendo funzione3.php vedremo:

Grafico di y = 2x +20

Il listato completo è:

Notiamo che volendo salvare l'immagine in un file, onde poterla riutilizzare si può usare:

imagepng ($immagine,"y=2x+20.png");

che salva l'immagine che si trova in memoria cioè $immagine in un file di nome: y=2x+20.png in formato png.

Occorre, per curiosità, fare distinzione tra:

funzione3.php che è un listato che disegna ogni volta l'immagine e  y=2x+20.png che mostra una immagine salvata in formato png.

Osservazioni

Questo programma ha dei pregi, nel senso che possiamo dare qualunque valore, sia positivo, che negativo, anche decimale, purché con il punto decimale;

per esempio

m= -0.5

q= -15.50

Ma ha dei difetti in quanto non consente di cambiare la scala del sistema di assi cartesiani. Infatti i valori disegnati vanno bene quando la x varia da -25 a +250; e la y varia da -150 a + 150.

Se i valori di x ed y  sono piccoli la scala è inadeguata; ed anche per valori molto grandi.

febbraio 2006

Corso di programmazione in PHP

Dizionario php

prof. Pietro De Paolis

Scuola Elettrica

Altre applicazioni

Mappa per tipo di scuola

Indice di tutte le pagine del sito

Guida per navigare

Richiesta informazioni