Guida definitiva al linguaggio di elaborazione Parte I: I fondamenti

Pubblicato: 2022-03-11

Stai lottando con la noia e il prurito di usare la tua creatività. Vuoi costruire qualcosa, qualcosa di visivamente impressionante, qualcosa di artistico. O forse vuoi imparare a programmare e fare qualcosa di impressionante il prima possibile. In tal caso, la lingua di elaborazione è la strada da percorrere.

Tra tutti i linguaggi di programmazione con cui ho lavorato finora, Processing è stato senza dubbio uno dei più divertenti. È un linguaggio semplice: facile da imparare, capire e usare, ma è molto potente. È quasi come se stessi dipingendo su una tela vuota con righe di codice. Non ci sono regole rigide o linee guida di sorta per limitare la tua creatività, l'unico limite è la tua immaginazione.

Guida definitiva al linguaggio di elaborazione Parte I: I fondamenti

Al college ero assistente didattico di un programma che raccoglieva studenti delle scuole superiori e insegnava loro l'elaborazione. La maggior parte di loro non aveva un forte background di programmazione, alcuni non avevano nemmeno scritto una singola riga di codice prima. In soli cinque giorni ci si aspettava che imparassero la lingua e costruissero semplici giochi da soli. Il tasso di successo era quasi del cento per cento, raramente abbiamo affrontato il fallimento. In questo articolo, questo è esattamente ciò che faremo. Ho ridotto l'intero programma in due parti. Prima parte, parlerò della lingua. Fornirò una panoramica di base, una procedura dettagliata per l'elaborazione e fornirò alcuni suggerimenti e trucchi. Quindi nella parte successiva costruiremo un semplice gioco passo dopo passo, ogni passaggio verrà spiegato in dettaglio. Convertirò anche il codice del gioco in JavaScript usando p5js, in modo che il nostro gioco possa essere eseguito in un browser web.

Quello che dovresti già sapere

Per comprendere e seguire facilmente questi articoli, dovresti avere una conoscenza di base della programmazione, poiché non parlerò dei fondamenti della programmazione. Tuttavia, per lo più non toccherò alcun concetto di programmazione avanzato, quindi una comprensione superficiale andrà bene. Ci sono alcune parti in cui parlo di alcune idee e concetti di basso livello come la programmazione orientata agli oggetti (OOP), ma non sono cruciali. Quelli sono per lettori curiosi che sono interessati alla struttura della lingua. Se non vuoi saperlo, puoi semplicemente saltare quelle parti. A parte questo, l'unica cosa che dovresti avere è l'ambizione di imparare questa fantastica lingua e l'entusiasmo per creare il tuo gioco!

Come seguire

Sono sempre favorevole all'apprendimento della programmazione provando e sperimentando. Prima ti immergi nel tuo gioco, più velocemente ti sentirai a tuo agio con l'elaborazione. Quindi questo sarà il mio primo suggerimento, prova ogni passaggio nel tuo ambiente. L'elaborazione ha un IDE semplice e facile da usare (cioè un editor di codice), è l'unica cosa che dovrai scaricare e installare per seguire. Puoi scaricarlo da qui.

Quindi iniziamo!

Qual è il linguaggio di elaborazione?

Questa sezione include una breve panoramica tecnica del linguaggio, la sua struttura e alcune note sul processo di compilazione ed esecuzione. I dettagli includeranno alcune conoscenze avanzate sulla programmazione e l'ambiente Java. Se per ora non ti interessano i dettagli e non vedi l'ora di imparare e programmare il tuo gioco, puoi saltare alla sezione "Fondamenti di elaborazione".

L'elaborazione è un linguaggio di programmazione visivo che ti consente di disegnare con codici, per così dire. Tuttavia non è esattamente un linguaggio di programmazione a sé stante, è quello che chiamano un linguaggio di programmazione "Java-esque", il che significa che il linguaggio è costruito sulla piattaforma Java, ma non è esattamente Java di per sé. È basato su Java e tutto il tuo codice viene preelaborato e convertito direttamente in codice Java quando premi il pulsante Esegui. La classe PApplet di Java è la classe base per tutti gli schizzi di elaborazione. Per fare un esempio, prendiamo un paio di blocchi di codice di elaborazione di base:

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Questi blocchi di codice verranno convertiti in qualcosa del genere:

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

Puoi vedere che il blocco del codice di elaborazione è stato avvolto con una classe che si estende da PApplet di Java. Pertanto, tutte le classi definite nel codice di elaborazione, se presenti, verranno trattate come classi interne.

Il fatto che Processing sia basato su Java ci offre molti vantaggi, soprattutto se sei uno sviluppatore Java. Non solo la sintassi è familiare, ma ti dà anche la possibilità di fare cose come incorporare codice Java, librerie, file JAR nei tuoi schizzi, usare le tue applet di elaborazione direttamente nelle tue applicazioni Java, definire classi e usare tipi di dati standard come int , float, char e così via. Puoi anche scrivere il tuo codice Pocessing direttamente da Eclipse, se vuoi dedicare un po' di tempo alla sua configurazione. Una cosa che non puoi fare è usare i componenti AWT o Swing nei tuoi schizzi di elaborazione, perché sono in conflitto con la natura di ciclo di elaborazione. Ma non preoccuparti, non faremo nessuna di quelle cose stravaganti in questo articolo.

Fondamenti di elaborazione

Il codice di elaborazione è costituito da due parti principali, l' impostazione e i blocchi di disegno . Il blocco di installazione viene eseguito una volta quando il codice viene eseguito e i blocchi di disegno vengono eseguiti continuamente. L'idea principale alla base di Processing è che ciò che scrivi all'interno del blocco di disegno verrà eseguito 60 volte al secondo dall'alto verso il basso, fino al termine del programma . Costruiremo tutto sfruttando proprio questa idea. Faremo muovere i nostri oggetti, manterremo i nostri punteggi, rileveremo collisioni, implementeremo la gravità e faremo praticamente tutto il resto usando questa funzione. Questo ciclo di aggiornamento è il cuore pulsante del nostro progetto . Spiegherò come utilizzare questo battito cardiaco per dare vita al tuo codice nelle sezioni successive. Innanzitutto, lascia che ti presenti l'IDE di elaborazione.

IDE di elaborazione

Se hai letto fino a questo punto e non hai ancora scaricato l'IDE di elaborazione, vai avanti e fallo. In tutto l'articolo, illustrerò alcune semplici attività che puoi provare da solo, puoi esercitarti solo se hai l'IDE attivo e funzionante. Ecco una breve introduzione dell'IDE di elaborazione. È molto semplice e autoesplicativo, quindi lo terrò breve.

Come ti aspetteresti, i pulsanti Esegui e Arresta fanno ciò che suggeriscono. Quando fai clic sul pulsante Esegui , il tuo codice verrà compilato ed eseguito. Per natura, i programmi di elaborazione non vengono mai interrotti, funzionano all'infinito fino a quando non vengono disturbati. Puoi terminarlo a livello di codice, tuttavia, in caso contrario, puoi utilizzare il pulsante di arresto .

Il pulsante che sembra una farfalla a destra di run & stop è il debugger . L'utilizzo del debugger necessita di un altro articolo ad esso dedicato. Non rientra nell'ambito di questo articolo, quindi per ora puoi ignorarlo. Il menu a discesa accanto al pulsante del debugger è dove aggiungi / imposti le mod. Le mod ti forniscono alcune funzionalità, ti consentono di scrivere codice per Android, ti consentono di scrivere codice in Python e così via. Anche le mod sono fuori dall'ambito, quindi puoi mantenerlo nella modalità Java predefinita e ignorarlo.

La finestra dell'editor di codice è dove normalmente vengono eseguiti gli schizzi. Nell'immagine è vuoto, perché non abbiamo impostato alcuna proprietà come dimensione o colore di sfondo, o non abbiamo disegnato nulla.

Non c'è molto di cui parlare dell'editor di codice, è semplicemente dove scrivi il tuo codice. Ci sono numeri di riga (!) Le versioni precedenti di Processing non lo avevano e non puoi immaginare quanto fossi felice quando li ho visti per la prima volta.

La scatola nera sotto è la console . Lo useremo per stampare materiale a scopo di debug rapido. La scheda Errori accanto alla console è dove verranno visualizzati i tuoi errori. Questa è anche una nuova utile funzionalità fornita con Processing 3.0. Nelle versioni precedenti, gli errori venivano stampati sulla console ed era difficile tenerne traccia.

Blocco di installazione

Come affermato in precedenza, i blocchi di installazione vengono eseguiti una volta all'avvio del programma. Puoi usarlo per fare configurazioni e per cose che vorresti eseguire solo una volta, ad esempio, caricare immagini o suoni. Ecco un esempio di blocco di installazione. Esegui questo codice nel tuo ambiente e guarda tu stesso i risultati.

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

I metodi relativi allo stile (sfondo, riempimento, tratto) verranno spiegati nelle sezioni delle proprietà e delle impostazioni. Per ora, quello che devi sapere è in che modo le impostazioni e le configurazioni che impostiamo qui influiscono sull'intero schizzo. I codici scritti qui vengono utilizzati per impostare alcuni set di regole di base applicabili in tutto lo schizzo. Quello che dovresti capire anche in questa sezione sono i metodi elencati di seguito:

size() - Come suggerisce il nome, questa funzione viene utilizzata per configurare la dimensione del nostro schizzo. Deve essere nella prima riga del blocco del codice di installazione. Potrebbe essere utilizzato nelle seguenti forme:

  • dimensione (larghezza, altezza);
  • dimensione (larghezza, altezza, renderer);

I valori di larghezza e altezza possono essere indicati in pixel. La funzione Size accetta un terzo parametro, renderer, che viene utilizzato per impostare quale motore di rendering utilizzerà il nostro sketch. Per impostazione predefinita, il renderer è impostato su P2D. I renderer disponibili sono P2D (Elaborazione 2D), P3D (Elaborazione 3D, dovrebbe essere utilizzato se i tuoi schizzi includeranno grafica 3D) e PDF (la grafica 2D viene disegnata direttamente in un file Acrobat PDF. Maggiori informazioni possono essere trovate qui). I renderer P2D e P3D utilizzano hardware grafico compatibile con OpenGL.

fullScreen() - A partire da Processing 3.0, è ora possibile utilizzare la funzione fullScreen invece della funzione size(). Proprio come la funzione size(), dovrebbe trovarsi anche nella prima riga del blocco di installazione. L'utilizzo è il seguente:

  • a schermo intero();
  • schermo intero (visualizzazione);
  • schermo intero(rendering);
  • fullScreen(visualizzazione, renderer);

Se lo usi senza alcun parametro, il tuo schizzo di elaborazione verrà semplicemente eseguito a schermo intero e verrà eseguito sul display principale. Il parametro 'visualizzazione' viene utilizzato per impostare su quale display verrà eseguito lo schizzo. Ad esempio, se colleghi monitor esterni al tuo computer, puoi impostare la variabile di visualizzazione su 2 (o 3, 4 ecc.) e il tuo schizzo verrà eseguito lì. Il parametro 'renderer' è come spiegato nella parte size() sopra.

Blocco impostazioni

Questa è un'altra funzionalità introdotta con la nuova versione di Processing. È un blocco di codice, proprio come setup e draw. È utile quando si desidera definire i metodi size() o fullScreen() con parametri variabili. È inoltre necessario definire size() e altre proprietà di stile come smooth() in questo blocco di codice se si utilizza un ambiente diverso dall'IDE di Processing, come Eclipse. Ma non ne avrai bisogno nella maggior parte dei casi, sicuramente non in questo articolo.

Disegna blocco

Non c'è niente di speciale di cui parlare del blocco di disegno, eppure tutto è speciale al riguardo. Draw block è dove avviene tutta la magia. È il cuore del tuo programma, batte 60 volte al secondo. Questo blocco di codice ospita tutta la logica del codice. Tutte le tue forme, oggetti ecc. Saranno scritti qui.

La maggior parte del codice di cui parleremo in questo articolo proverrà dal blocco di disegno, quindi è importante comprendere chiaramente come funziona questo blocco di codice. Per darti una dimostrazione, ecco qualcosa che puoi provare. Prima nota che possiamo stampare qualsiasi cosa sulla console usando i metodi print() o println() . I metodi di stampa stampano solo sulla console, println tuttavia stampa e aggiunge una nuova riga alla fine, quindi ogni println() verrà stampato in righe separate.

Quindi, dai un'occhiata al seguente blocco di codice. Per prima cosa, prova a indovinare cosa stamperà nella console. Quindi, vai avanti e provalo:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

Se hai indovinato “1 2 3 4…”, ti ho preso! Questa è una delle confusioni in Processing. Ricordi che questo blocco viene eseguito ripetutamente? Quando definisci una variabile qui, questa viene definita in ogni ciclo più e più volte. Ad ogni iterazione, x è impostato su 0, viene incrementato di 1 e viene stampato sulla console. Quindi otteniamo il risultato “1 1 1 1…”. Questo esempio era in qualche modo ovvio, ma può creare confusione quando le cose si complicano un po'.

Non vogliamo che x venga sovrascritto, quindi come possiamo ottenerlo e ottenere il risultato “1 2 3 4…” ? Utilizzando variabili globali . Non è niente di speciale, definiamo solo la variabile al di fuori del blocco di disegno in modo che non venga ridefinita ad ogni iterazione. Inoltre, l'ambito della variabile sarà raggiungibile in tutto lo schizzo. Vedi il codice qui sotto:

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

Ti starai chiedendo, come può funzionare una variabile definita al di fuori dei nostri blocchi? E perché non abbiamo usato il blocco setup() poiché viene eseguito una volta all'inizio? La risposta è correlata alla programmazione e agli ambiti orientati agli oggetti, se non hai familiarità puoi saltare questo paragrafo. Fare riferimento alla parte in cui ho spiegato come il codice di elaborazione viene convertito in Java. Ricordi come vengono avvolti con una classe Java? Anche le variabili che scriviamo al di fuori di setup() e draw() block vengono avvolte, quindi vengono trattate come campi della classe esterna che racchiude il nostro codice. Usare x+=1 equivale a usare this.x+=1. Funziona allo stesso modo anche nel nostro caso, nessuna variabile chiamata x è definita nello scope di draw() e viene cercato uno scope esterno, che è lo scopo di this . E perché non abbiamo definito la nostra variabile x nella sezione setup()? Se lo facessimo, l'ambito di cui x è definito sarebbe l'ambito della funzione di configurazione e non sarebbe accessibile dal blocco draw().

Forme e testi di disegno

Ora sappiamo come configurare il nostro schizzo usando il blocco di configurazione e sappiamo cosa fa il blocco di disegno. Quindi è tempo di ottenere un po' di visuale e conoscere le parti divertenti dell'elaborazione: come disegnare forme.

Prima di iniziare, dovresti comprendere il sistema di coordinate . In Elaborazione, determini le coordinate di ogni oggetto che disegna sullo schermo. Il sistema di coordinate è in pixel. L'origine (cioè il punto di partenza) è l'angolo in alto a sinistra, dovresti fornire le tue coordinate relative a quel punto. Un'altra cosa che dovresti sapere è che ogni forma ha un punto di riferimento diverso. Ad esempio, rect() ha il suo angolo in alto a sinistra come punto di riferimento. Per ellipse(), è il centro. Questi punti di riferimento possono essere modificati con metodi come rectMode() ed ellipseMode(), che spiegherò nella sezione delle proprietà e delle impostazioni. Viene fornita una figura di esempio per aiutarti a capire meglio.

Questo articolo è una panoramica di base dell'elaborazione, quindi non toccheremo forme complesse come vertici o forme 3D. Le forme 2D di base saranno effettivamente più che sufficienti per creare il nostro gioco. Nella figura, puoi vedere esempi di come vengono disegnate le forme. Ogni forma ha la sua sintassi da creare, ma l'idea di base è quella di fornire le sue coordinate o le sue dimensioni o entrambe. Ecco alcune forme con cui dovresti avere familiarità (per tutti i valori indicati di seguito, 'x' e 'y' significano le coordinate xey in pixel, 'w' e 'h' significano valori di larghezza e altezza anche in pixel):

point() - Punto semplice, necessita solo di una singola coordinata. Utilizzo:

  • punto(x, y)
  • point(x, y, z) - Nel caso in cui utilizzi 3 dimensioni.

line() - Per creare una linea. È possibile creare una linea con solo un punto iniziale e finale. Utilizzo:

  • linea(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - Nel caso in cui utilizzi 3 dimensioni.

triangolo() - Per creare un triangolo. Utilizzo: triangolo (x1, y1, x2, y2, x3, y3)

quad() - Per creare un quadrilatero. Utilizzo: quad(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Per creare un rettangolo. Il punto di riferimento è l'angolo in alto a sinistra per impostazione predefinita (fare riferimento alla figura). Ecco l'utilizzo:

  • rect(x, y, w, h)
  • rect(x, y, w, h, r) - 'r' indica il raggio in pixel per arrotondare gli angoli.
  • rect(x, y, w, h, tl, tr, br, bl) - Raggio rispettivamente per gli angoli in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Anche questo è in pixel.

ellipse() - Per creare una forma ellittica. Questo è anche usato per creare un cerchio, dovrebbero essere forniti gli stessi valori di larghezza e altezza. Il punto di riferimento per questa forma è il centro per impostazione predefinita (fare riferimento alla figura). Ecco l'utilizzo:

  • ellisse(x, y, w, h)

arc() - Disegna un arco. Utilizzo:

  • arc(x, y, w, h, start, stop) - 'start' e 'stop' sono usati per determinare l'angolo per iniziare e fermare il disegno dell'arco. I valori sono in radianti. È possibile utilizzare costanti come "PI, HALF_PI, QUARTER_PI e TWO_PI".
  • arc(x, y, w, h, start, stop, mode) - La variabile 'mode' serve a determinare lo stile di rendering dell'arco (stringa). Le opzioni disponibili sono “OPEN, CHORD, PIE”. OPEN lascerà le parti non disegnate senza bordi. CHORD completerà le parti non disegnate con un bordo. PIE renderà il tuo arco simile a un grafico a torta.

La visualizzazione di testi sullo schermo è simile alla visualizzazione di forme, l'idea di base è di determinare una coordinata in cui si desidera visualizzare il testo. Tuttavia, c'è di più nella gestione dei testi. Avrai un maggiore controllo sui tuoi testi dopo la sezione Proprietà e impostazioni, dove imparerai come applicare impostazioni e proprietà agli oggetti. Per ora, mostrerò le basi della visualizzazione dei testi. Ci sono molti modi per farlo, mostrerò solo l'essenziale.

text() - Visualizza i testi. Utilizzo:

  • text(c, x, y) - 'c' significa carattere, verrà visualizzato qualsiasi carattere alfanumerico.
  • text(c, x, y, z) - Se stai lavorando con 3 dimensioni.
  • text(str, x, y) - 'str' è la stringa da visualizzare.
  • text(str, x, y, z) - Se stai lavorando con 3 dimensioni.
  • text(num, x, y) - 'num' è il valore numerico da visualizzare.
  • text(num, x, y, z) - Se stai lavorando con 3 dimensioni.

Proprietà e impostazioni

La prima cosa che dovrebbe essere spiegata in questa sezione sarebbe la logica dietro l'impostazione delle proprietà degli oggetti. Il colore di riempimento, il colore di sfondo, il bordo, la larghezza del bordo, il colore del bordo, l'allineamento delle forme, gli stili del bordo ecc. potrebbero essere alcuni esempi di queste proprietà.

Quando imposti una proprietà, devi ricordare che il codice verrà eseguito dall'alto verso il basso . Supponiamo che tu imposti la proprietà "riempimento" su rosso, tutti gli oggetti disegnati sotto quella linea verranno riempiti di rosso fino a quando non verrà sovrascritto da un'altra proprietà di riempimento. La stessa cosa vale anche per altre proprietà, tuttavia tieni presente che non tutte le proprietà si sovrascriveranno a vicenda. Ad esempio, la proprietà "tratto" non sovrascrive la proprietà "riempimento", ma lavorano insieme. Ecco una rappresentazione visiva per farti comprendere la logica:

Come puoi vedere nell'immagine, la prima linea imposta il colore di riempimento su rosso e la seconda linea imposta il colore del tratto su blu. Ora abbiamo due impostazioni attive: riempi i tratti rossi e blu. Come previsto, qualunque sia il nostro oggetto sulla riga successiva, sarà riempito di rosso e avrà tratti blu (se applicabile). Puoi continuare a esaminare l'immagine in questo modo e capirai la logica.

Di seguito sono elencate alcune proprietà e impostazioni essenziali comunemente utilizzate:

Impostazioni di stile

fill() - Imposta il colore di riempimento sugli oggetti. Questa impostazione viene utilizzata anche per colorare i testi. Per ora, abbiamo solo bisogno di conoscere il seguente utilizzo:

  • fill(r, g, b) - Valori rossi, verdi e blu come numeri interi
  • fill(r, g, b, a) - Valore alfa aggiuntivo, max è 255

noFill() - Imposta il colore di riempimento su trasparente.

stroke() - Imposta il colore del tratto sugli oggetti. La proprietà Stroke è applicabile per linee e bordi attorno agli oggetti. Per ora, abbiamo solo bisogno di conoscere il seguente utilizzo:

  • stroke(r, g, b) - Valori rossi, verdi e blu come numeri interi.
  • stroke(r, g, b, a) - Valore alfa aggiuntivo, max è 255

noStroke() - Rimuove il tratto.

strokeWeight() - Imposta la larghezza del tratto. Utilizzo:

  • strokeWeight(x) - x è un numero intero e rappresenta la larghezza del tratto in pixel.

background() - Imposta il colore di sfondo. Per ora, abbiamo solo bisogno di conoscere il seguente utilizzo:

  • background(r, g, b) - Valori rosso, verde e blu come intero.
  • background(r, g, b, a) - Valore alfa aggiuntivo, max è 255

Impostazioni di allineamento

ellipseMode() - Imposta dove prendere come punto di riferimento per allineare le ellissi. Utilizzo:

  • ellipseMode(mode) - 'mode' è il parametro, ecco i parametri disponibili:
    • CENTRO (predefinito): prendi il centro come punto di riferimento.
    • RAGGIO: Questo prende anche il centro come punto di riferimento, ma in questa modalità, i valori w e h specificati sono trattati come metà (cioè raggio invece del diametro)
    • ANGOLO: Prende l'angolo in alto a sinistra come punto di riferimento.
    • ANGOLI: imposta i primi due parametri (x e y) come posizione dell'angolo in alto a sinistra e gli ultimi due parametri (w e h) come posizione dell'angolo in basso a sinistra dell'ellisse. Quindi questa modalità, "larghezza" e "altezza" è irrilevante. Pensarlo come un'ellisse(x_tl,y_tl,x_br,y_br) ha più senso in questo caso.

rectMode() - Imposta dove prendere come punto di riferimento i rettangoli di allineamento. Utilizzo:

  • rectMode(mode) - 'mode' è il parametro, ecco i parametri disponibili:
    • CENTRO: prendi il centro come punto di riferimento.
    • RAGGIO: prende anche il centro come punto di riferimento, ma in questa modalità i valori w e h specificati vengono trattati come metà
    • ANGOLO (predefinito): prende l'angolo in alto a sinistra come punto di riferimento.
    • ANGOLI: imposta i primi due parametri (x e y) come posizione dell'angolo in alto a sinistra e gli ultimi due parametri (w e h) come posizione dell'angolo in basso a sinistra dell'ellisse. Quindi questa modalità, "larghezza" e "altezza" è irrilevante. Pensarlo come rect(x_tl,y_tl,x_br,y_br) ha più senso in questo caso.

Impostazioni relative al testo

textSize() - Imposta la dimensione del carattere del testo. Utilizzo:

  • textSize(size) - Valore intero della dimensione desiderata.

textLeading() - Imposta l'altezza della linea dei tuoi testi. Utilizzo:

  • textLeading(lineheight) - Valore in pixel dello spazio tra le righe.

textAlign() - Imposta dove prendere come punto di riferimento i testi di allineamento. Utilizzo.

  • textAlign(alignX) - 'alignX' serve per l'allineamento orizzontale. Disponibile: SINISTRA, CENTRO, DESTRA
  • textAlign(alignX, alignY) - 'alignY' è per l'allineamento verticale. Disponibile: ALTO, BASSO, CENTRO, BASELINE.

Animazioni

Finora abbiamo imparato a disegnare oggetti e testi. Ma il problema con loro è che sono statici. Ora come li facciamo muovere? Semplice, invece di fornire le coordinate come numeri interi, utilizziamo le variabili in modo da poterle incrementare/decrementare . Ha senso? Dai un'occhiata al seguente codice:

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Vedi come abbiamo gestito l'animazione? Impostiamo xey come variabili globali e il loro valore iniziale su 0. Nel nostro ciclo di disegno, abbiamo creato la nostra ellisse, impostato il colore di riempimento su rosso, il colore del tratto su blu e le coordinate su xey. Quando incrementiamo xey, la pallina cambia semplicemente la sua posizione. Ma c'è un problema con questo codice, puoi notarlo? Come sfida facile per te stesso, prova a capire qual è il problema e provalo. Ecco il risultato:

La mia intenzione di lasciare che ciò accadesse era di farti capire come funziona la natura a ciclo continuo di Processing. Fare riferimento all'esempio nella sezione "Draw Block", ti ricordi perché abbiamo ottenuto "1 1 1..." invece di "1 2 3..."? Lo stesso motivo per cui la palla lascia segni dietro. Ogni volta che il blocco di disegno scorre, xey vengono incrementati di 5 e quindi la pallina viene ridisegnata a 5 pixel in basso ea destra. Tuttavia la palla viene estratta dalle precedenti iterazioni rimane nella visuale. Come li facciamo andare via? Qualche ipotesi?

Per eliminare i segni lasciati dalla pallina, rimuoviamo semplicemente lo sfondo (255) dal blocco di impostazione e lo incolliamo come prima riga del blocco di disegno. Quando il nostro codice di sfondo era nel blocco di installazione, è stato eseguito una volta all'inizio, rendendo il nostro sfondo bianco. Ma ciò non basta, ci serve per impostare il nostro sfondo su bianco su ogni loop per coprire le palline estratte dai loop precedenti. Sfondo essendo la prima riga significa che viene eseguito per primo, diventa il livello di base. In ogni ciclo, la nostra tela è dipinta di bianco e nuovi elementi vengono disegnati sopra lo sfondo bianco. Quindi non abbiamo segni.

Questa è l'idea alla base dell'animazione delle cose in Processing, manipolando le coordinate degli oggetti a livello di codice per cambiarne la posizione. Ma come faremo cose stravaganti, come tenere la palla sullo schermo? O forse implementando la gravità? Insegnerò come fare queste cose nella prossima parte di questo articolo. Impareremo provando e costruendo. Impareremo come farlo e li applicheremo immediatamente al nostro gioco. Alla fine, avremo un gioco completo, giocabile e, si spera, divertente.

Interazioni con tastiera e mouse

Le interazioni di tastiera e mouse in Elaborazione sono molto semplici e dirette. Esistono metodi che puoi chiamare per ogni evento e ciò che scrivi all'interno verrà eseguito una volta quando si verifica l'evento. Inoltre ci sono variabili globali come mousePressed e keyPressed che puoi usare nel tuo blocco di disegno per sfruttare il ciclo. Ecco alcuni dei metodi con spiegazioni:

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Come puoi vedere, è abbastanza facile verificare se si fa clic con il mouse o quale tasto viene premuto. Ci sono tuttavia più opzioni disponibili per le variabili mousePressed e keyCode. Le opzioni disponibili per mousePressed sono SINISTRA, DESTRA e CENTRO. Ce ne sono molti altri disponibili per keyCode ; SU, GIÙ, SINISTRA, DESTRA, ALT, CONTROL, MAIUSC, BACKSPACE, TAB, INVIO, INVIO, ESC e CANCELLA.

Una cosa da sapere sulle variabili del mouse, e la useremo molto, è come ottenere le coordinate del mouse. Per ottenere le coordinate esatte del cursore, possiamo usare le variabili mouseX e mouseY direttamente nel blocco draw(). Ultimo ma non meno importante, ci sono molti altri metodi utili a cui dovresti dare un'occhiata. Sono tutti documentati nel Processing Reference.

Conclusione

A questo punto dovresti aver acquisito familiarità con l'elaborazione. Tuttavia, se ti fermi qui, tutta questa conoscenza volerà via. Ti consiglio vivamente di continuare a esercitarti, giocando con ciò che hai imparato. Per aiutarti a esercitarti, ti fornirò due esercizi. Dovresti fare del tuo meglio per farlo da solo. Se rimani bloccato, Google e Processing Reference dovrebbero essere i tuoi migliori amici. Fornirò il codice per il primo, ma guardarli dovrebbe essere l'ultima cosa che fai.

Esercizio consigliato 1

Dovresti fare 4 palline con colori diversi , partendo dai 4 angoli dello schermo viaggiando attraverso il centro con velocità diverse . Quando fai clic e tieni premuto il pulsante del mouse, le palline dovrebbero bloccarsi . E quando lasci andare il mouse, le palline potrebbero tornare alla loro posizione iniziale e continuare a muoversi. Quindi, sto cercando qualcosa del genere.

Dopo aver provato tu stesso l'esercizio, puoi controllare il codice qui.

Esercizio consigliato 2

Ricordi il famoso salvaschermo del DVD in cui il logo del DVD fa rimbalzare sullo schermo e abbiamo tutti aspettato disperatamente che colpisse l'angolo? Voglio che replichi quello screensaver, ma usando solo un rettangolo invece del logo del DVD. Quando avvii l'app, lo schermo dovrebbe essere nero e il rettangolo dovrebbe iniziare in una posizione casuale. Ogni volta che il rettangolo colpisce l'angolo, dovrebbe cambiare colore (e ovviamente direzione). Quando muovi il mouse, il rettangolo dovrebbe scomparire e il colore di sfondo dovrebbe diventare bianco (è uno screensaver, vero?). Non fornirò il codice per questo esercizio in questo articolo. Dovresti fare del tuo meglio per implementarlo e il codice verrà fornito nella seconda parte di questo articolo.

È stata pubblicata la seconda parte della guida definitiva all'elaborazione, un tutorial passo passo per costruire un gioco semplice.

Ulteriori letture sul blog di Toptal Engineering:

  • Come avvicinarsi alla scrittura di un interprete da zero