{"id":6350,"date":"2023-12-29T14:32:27","date_gmt":"2023-12-29T13:32:27","guid":{"rendered":"https:\/\/msxitalia.org\/?p=6350"},"modified":"2023-12-29T14:42:01","modified_gmt":"2023-12-29T13:42:01","slug":"lezione-18-l-a-g-r-a-f-i-c-a-3-parte","status":"publish","type":"post","link":"https:\/\/msxitalia.org\/en\/lezione-18-l-a-g-r-a-f-i-c-a-3-parte\/","title":{"rendered":"LESSON 18 \u2013 LAGRAPHICS (3rd Part)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Prima di continuare a parlare delle altre funzioni della grafica, vorrei scusarmi con i lettori per un errore anzi una dimenticanza nella scorsa puntata.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sull&#8217;ultima parte del comando CIRCLE, per esattezza sulla sua sintassi:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sintassi: <em>CIRCLE<\/em>\u00a0[<em>STEP<\/em>] (X,Y),\u00a0<em>Raggio<\/em>\u00a0[,<em>Colore][<\/em>,\u00a0<em>Inizio<\/em>,\u00a0<em>Fine][<\/em>,<em>Rapporto<\/em>]<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Questa \u00e8 quella corretta. Avevo dimenticato di inserire le coordinate X e Y.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PAINT<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La funzione PAINT colora un disegno. Ma ci sono delle regole da rispettare. Deve essere una figura chiusa. Anche solo un pixel di distacco tra un punto e l&#8217;altro,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">colorer\u00e0 tutto lo schermo o tutto quello che non \u00e8 dello stesso colore. Tutti i punti dell&#8217;area devono avere lo stesso colore. Il punto dove iniziare a colorare deve essere all&#8217;interno dell&#8217;area chiusa. Per fare capire meglio, usiamo il programmino del rombo fatto la lezione scorsa:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10 SCREEN 2: COLOR 1,15,15: CLS<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">20 LINE (50,50)-(75,75),6: LINE -(50,100),6<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">30 LINE -(25,75),6: LINE -(50,50),6<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">40 PAINT(75,75),6<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">50 GOTO 50<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dopo aver disegnato le quattro linee che formano il rombo, con la funzione PAINT ho dato le coordinate del punto da colorare all&#8217;interno dell&#8217;area, usando lo stesso colore delle suddette. Se proviamo a cambiare il colore di una delle linee<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">o il colore della PAINT, colorer\u00e0 tutto lo schermo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La Sintassi corretta \u00e8: PAINT(CoordinataOrizzontale,CoordinataVerticale),[Codice colore]. Se omettiamo il codice colore prender\u00e0 quello di primo piano.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">DRAW<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">DRAW \u00e8 un potente comando per disegnare immagini, anzi pi\u00f9 che comando \u00e8 un vero linguaggio dentro il Basic che usa le proprie istruzioni. Viene chiamato GML (Graphic Macro Language), \u00e8 un po&#8217; pi\u00f9 veloce delle altre istruzioni Basic ed ha<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">un uso differente rispetto agli altri. Le istruzioni vengono inserite dentro le virgolette o possiamo anche metterle in una variabile alfanumerica. Per fare un esempio; disegniamo il rondo fatto sopra con la funzione LINE:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">DRAW &#8220;BM50,50F25G25H25E25&#8243; o A$=&#8221;BM50,50F25G25H25E25&#8221;: DRAW A$. Di seguito inserisco la tabella con tutte le istruzioni usate dalla DRAW con relativa spiegazione, dove n sar\u00e0 il numero di pixel da disegnare.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Istruzione\u2003\u2003Significato<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un\u2003\u2003\u2003\u2003\u2003 Disegna n pixel verso l&#8217;alto<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dn\u2003\u2003\u2003\u2003\u2003 Disegna n pixel verso il basso<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ln\u2003\u2003\u2003\u2003\u2003\u2002Disegna n pixel verso sinistra<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rn\u2003\u2003\u2003\u2003\u2003\u2002Disegna n pixel verso destra<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En\u2003\u2003\u2003\u2003\u2003\u2002Disegna n pixel verso l&#8217;alto in diagonale a destra<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fn\u2003\u2003\u2003\u2003\u2003\u2002Disegna n pixel verso il basso in diagonale a destra<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gn\u2003\u2003\u2003\u2003\u2003\u2002Disegna n pixel verso il basso in diagonale a sinistra<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hn\u2003\u2003\u2003\u2003\u2003Disegna n pixel verso l&#8217;alto in diagonale a sinistra<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mx,y\u2003\u2003\u2003\u2003 Si posiziona nel punto specificato posto in x,y<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">B\u2003\u2003\u2003\u2003\u2003\u2003Esegue l&#8217;istruzione senza disegnare<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u2003\u2003\u2003\u2003\u2003\u2003Ritorna al punto precedente dopo l&#8217;esecuzione<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cc\u2003\u2003\u2003\u2003\u2003\u2002 Assegna il colore al disegno, dove c deve essere da 0 a 15<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ar\u2003\u2003\u2003\u2003\u2003\u2003Ruota l&#8217;immagine di 90\u00b0. r deve essere da 0 a 3<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ss\u2003\u2003\u2003\u2003\u2003\u2003Riproduce l&#8217;immagine usando una scala di s\/4<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Xstringa\u2003\u2003\u2003 Esegue le istruzioni dentro una stringa o variabile a stringa<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le prime otto sono facili da intuire. Purtroppo, il punto dolente lo riscontriamo disegnando le diagonali, la linea avr\u00e0 sempre un angolo di 45\u00b0, se vogliamo avere un angolo diverso dobbiamo usare la funzione LINE. L&#8217;istruzione M ci consente dii ndicare il punto di partenza del disegno, altrimenti inizierebbe a disegnare dall&#8217;ultimo posizionamento del cursore grafico. Possiamo usarla anche con variabili, basta aggiungere un uguale prima e un punto e virgola alla fine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">X=50: Y=50: DRAW &#8220;M=X;,=Y;R50F25&#8221;. Questa istruzione \u00e8 come il PSET, infatti vedrete sempre un punto dove \u00e8 stata posizionata. Per ovviare a questo, possiamo usare l&#8217;istruzione B: DRAW &#8220;BM50,50&#8221;, la possiamo usare anche se vogliamo tracciare una linea senza farla vedere: DRAW &#8220;BM50,50R50BF25&#8221;. Se invece vogliamo fare ritornare al punto di partenza dopo aver disegnato un segmento, basta mettere N d&#8217;avanti all&#8217;istruzione: DRAW &#8220;BM50,50NR50&#8221;. Cos\u00ec facendo abbiamo riportato il cursore grafico, dopo aver disegnato la retta a destra, nella posizione iniziale; 50,50. Se non usiamo l&#8217;istruzione C (Colore), user\u00e0 quella di default cio\u00e8 quella del primo piano, altrimenti ogni volta che vogliamo cambiare colore basta metterla prima: DRAW &#8220;BM50,50C15R50C1F25&#8221;. La linea che va&#8217; a destra, sar\u00e0 di colore bianco (15), quella in diagonale sar\u00e0 nera (1). L&#8217;istruzione A, come abbiamo detto, fa ruotare l&#8217;immagine di 90\u00b0verso destra. A=0 \u00e8 la posizione iniziale, perci\u00f2 \u00e8 superfluo usarla, ma dir\u00f2 dopo perch\u00e9 \u00e8 importante. A1=90\u00b0, A2=180\u00b0e A3=270\u00b0, se useremo un numero maggiore di 3 l&#8217;MSX segnaler\u00e0 un messaggio d&#8217;errore. Se nel nostro disegno con DRAW abbiamo usato l&#8217;istruzione A, tutto quello che faremo dopo sempre con DRAW, sar\u00e0 disegnato con l&#8217;ultima rotazione usata, perci\u00f2 \u00e8 preferibile portarlo nella posizione reale dopo ogni rotazione, usando A0, almeno che non si voglia disegnare tutto con angolazioni differenti. L&#8217;istruzione S ingrandisce o diminuisce l&#8217;immagine disegnata: per default \u00e8 4, visto che riproduce in scala 4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S1 sar\u00e0 un quarto dell&#8217;immagine, S2 la met\u00e0, S3 tre quarti, S4 quattro quarti cio\u00e8 l&#8217;immagine reale. Dopodich\u00e9 l&#8217;immagine diventa pi\u00f9 grande; S5 pi\u00f9 grande di 1\/4, S8 sar\u00e0 raddoppiata e cos\u00ec via. Una cosa importante; se un&#8217;immagine ingrandita<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">supera i bordi dello schermo, l&#8217;MSX non taglier\u00e0 l&#8217;immagine ma verr\u00e0 disegnata sull&#8217;ultima riga o colonna. Non possiamo usare valori negativi o con virgola.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quello che ho detto per l&#8217;istruzione A vale anche per S, cio\u00e8 una volta usato disegner\u00e0 sempre con l&#8217;ultima scala riportata. L&#8217;istruzione X serve ad inserire una stringa dentro le istruzioni DRAW. In una stringa di istruzioni basta mettere X e il nome della variabile seguito dal punto e virgola: A$=&#8221;U30R30D30&#8243;: DRAW&#8221;BM50,50R50D30L50U30XA$;&#8221;. Per concludere, ho usato solo lettere maiuscole dentro la DRAW, ma possiamo usarle anche minuscole o addirittura mischiarle, il risultato non cambia.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Come inserire stringhe di caratteri sul modo grafico Come ho detto in una delle lezioni precedenti, in modo grafico non \u00e8 possibile usare le funzioni per la scrittura sullo schermo, come PRINT, LOCATE eccetera.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Questo perch\u00e9 quando l&#8217;MSX lavora in modalit\u00e0 grafica, usa un chip a parte, il TM9918A della Texas Instruments. Per\u00f2 possiamo aggirare questa carenza del nostro MSX, aprendo la periferica dello schermo grafico. Non sto a spiegare al dettaglio come funziona, ma vi basta sapere che per aprire tale periferica chiamata GRP, si usa il comando OPEN. Visto che dovremo scrivere sullo schermo grafico, la periferica sar\u00e0 aperta in uscita cio\u00e8 in output. Riassumendo: OPEN &#8220;GRP:&#8221; FOR<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">OUTPUT AS #1. Il #1 \u00e8 il numero di porta che useremo, visto che per default possiamo usarne solo 1, oltretutto lo zero \u00e8 un numero riservato del MSX, perci\u00f2 siamo obbligati a scrivere il suddetto. Dopo aver aperto la periferica possiamo stampare sullo schermo usando la funzione PRINT con il numero di porta: PRINT #1,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;Adesso posso scrivere in modo grafico&#8221;. Obbligatori sono il cancelletto dopo la PRINT e la virgola prima di inserire la stringa o la variabile. Per chiudere la periferica si usa il comando CLOSE #1, anche solo CLOSE. Usato senza argomenti chiude tutte le periferiche aperte, ma visto che \u00e8 solo una, non avremo problemi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Facciamo un esempio con un programma:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10 SCREEN 2: COLOR 1,15,13: CLS<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">20 OPEN &#8220;GRP:&#8221; FOR OUTPUT AS #1<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">30 DRAW &#8220;BM10,50C6E15R50F15D30L80U30&#8221;: PAINT(30,70),6<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">40 DRAW&#8221;BM10,100&#8243;:PRINT #1,&#8221;Disegno di un trapezio&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">50 GOTO 50<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Riga 10 Ho attivato la modalit\u00e0 grafica e colore<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Riga 20 Aperto periferica per scrivere sullo schermo grafico<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Riga 30 Disegnato e colorato un trapezio<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Riga 40 DRAW usato per posizionare la stampa della stringa. Potevo usare anche PSET(10,100), ed infine stampa la frase usando PRINT con il numero di periferica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Riga 50 Come sapete gi\u00e0, blocca il programma alla riga 50<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se usiamo PRINT # senza aver aperto la periferica con OPEN, l&#8217;MSX segnaler\u00e0 un messaggio d&#8217;errore.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ci risentiamo dopo l&#8217;Epifania.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grazie e Auguri di Buone Feste a tutti.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prima di continuare a parlare delle altre funzioni della grafica, vorrei scusarmi con i lettori per un errore anzi una dimenticanza nella scorsa puntata. Sull&#8217;ultima parte del comando CIRCLE, per esattezza sulla sua sintassi: Sintassi: CIRCLE\u00a0[STEP] (X,Y),\u00a0Raggio\u00a0[,Colore][,\u00a0Inizio,\u00a0Fine][,Rapporto] Questa \u00e8 quella corretta. Avevo dimenticato di inserire le coordinate X e Y. PAINT La funzione PAINT colora [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6311,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[14],"tags":[],"dipi_cpt_category":[],"class_list":["post-6350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-msx-basic"],"_links":{"self":[{"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/posts\/6350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/comments?post=6350"}],"version-history":[{"count":5,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/posts\/6350\/revisions"}],"predecessor-version":[{"id":6361,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/posts\/6350\/revisions\/6361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/media\/6311"}],"wp:attachment":[{"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/media?parent=6350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/categories?post=6350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/tags?post=6350"},{"taxonomy":"dipi_cpt_category","embeddable":true,"href":"https:\/\/msxitalia.org\/en\/wp-json\/wp\/v2\/dipi_cpt_category?post=6350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}