Ghidul final al limbajului de procesare Partea I: Fundamentele

Publicat: 2022-03-11

Te lupți cu plictiseala și mâncărimi să-ți folosești creativitatea. Vrei să construiești ceva, ceva impresionant vizual, ceva artistic. Sau poate vrei să înveți programarea și să faci ceva impresionant cât mai curând posibil. Dacă da, atunci limba de procesare este calea de urmat.

Dintre toate limbajele de programare cu care am lucrat până acum, Processing a fost fără îndoială unul dintre cele mai distractive. Este o limbă simplă - ușor de învățat, de înțeles și de folosit, dar este foarte puternică. Este aproape ca și cum ai picta pe o pânză goală cu linii de cod. Nu există reguli sau linii directoare rigide care să îți limiteze creativitatea, singura limită este imaginația ta.

Ghidul final al limbajului de procesare Partea I: Fundamentele

În facultate am fost asistent didactic al unui program care aduna liceeni și îi preda Procesarea. Majoritatea nu aveau un fundal puternic de programare, unii nici măcar nu scriseseră o singură linie de cod înainte. În doar cinci zile, se aștepta să învețe limba și să-și construiască propriile jocuri simple. Rata de succes a fost de aproape o sută la sută, rareori ne-am confruntat cu eșecul. În acest articol, asta este exact ceea ce vom face. Am redus întregul program în două părți. Prima parte, voi vorbi despre limbă. Voi oferi o prezentare generală de bază, o explicație pentru Procesare și voi oferi câteva sfaturi și trucuri. Apoi, în partea următoare, vom construi un joc simplu pas cu pas, fiecare pas va fi explicat în detaliu. De asemenea, voi converti codul jocului în JavaScript folosind p5js, astfel încât jocul nostru să poată rula într-un browser web.

Ce ar trebui să știi deja

Pentru a înțelege și urma cu ușurință aceste articole, ar trebui să aveți cunoștințe de bază despre programare, deoarece nu voi vorbi despre elementele fundamentale ale programării. În mare parte, nu voi atinge niciun concept de programare avansat, așa că o înțelegere superficială va fi suficientă. Există unele părți în care vorbesc despre câteva idei și concepte de nivel scăzut, cum ar fi programarea orientată pe obiecte (OOP), dar acestea nu sunt cruciale. Acestea sunt pentru cititorii curioși care sunt interesați de structura limbii. Dacă nu vrei să știi, poți sări peste acele părți. În afară de asta, singurul lucru pe care ar trebui să-l ai este ambiția de a învăța acest limbaj minunat și entuziasmul de a-ți crea propriul joc!

Cum să urmezi

Sunt întotdeauna în favoarea învățării programarii încercând și experimentând. Cu cât te scufunzi mai devreme în propriul tău joc, cu atât mai repede te vei simți confortabil cu Procesare. Deci aceasta va fi prima mea sugestie, încercați fiecare pas în propriul vostru mediu. Procesarea are un IDE simplu și ușor de utilizat (adică un editor de cod), este singurul lucru pe care trebuie să îl descărcați și să îl instalați pentru a-l urma. Îl poți descărca de aici.

Asadar, haideti sa începem!

Ce este limbajul de procesare?

Această secțiune include o scurtă prezentare tehnică a limbajului, structura acestuia și câteva note despre procesul de compilare și execuție. Detaliile vor include unele cunoștințe avansate despre programare și mediul Java. Dacă nu vă deranjează detaliile momentan și abia așteptați să învățați și să vă codificați propriul joc, puteți sări la secțiunea „Fundamentals of Processing”.

Procesarea este un limbaj de programare vizuală care vă permite să schițați cu coduri, ca să spunem așa. Cu toate acestea, nu este chiar un limbaj de programare în sine, este ceea ce ei numesc un limbaj de programare „Java-esque”, ceea ce înseamnă că limbajul este construit pe platforma Java, dar nu este tocmai Java în sine. Se bazează pe Java și tot codul dvs. este preprocesat și convertit direct în cod Java atunci când apăsați butonul de rulare. Clasa PAApplet din Java este clasa de bază pentru toate schițele de procesare. Pentru a da un exemplu, să luăm câteva blocuri de cod de procesare de bază:

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

Aceste blocuri de cod vor fi convertite în ceva de genul acesta:

 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 } }

Puteți vedea că blocul de cod de procesare a fost împachetat cu o clasă care se extinde din PAApplet-ul Java. Prin urmare, toate clasele pe care le definiți în codul dvs. de procesare, dacă există, vor fi tratate ca clase interioare.

Faptul că Procesarea este bazată pe Java ne oferă o mulțime de avantaje, mai ales dacă ești un dezvoltator Java. Nu numai că sintaxa este familiară, dar vă oferă și posibilitatea de a face lucruri precum încorporarea codului Java, biblioteci, fișiere JAR în schițele dvs., utilizarea applet-urilor Procesare direct în aplicațiile Java, definirea claselor și utilizarea tipurilor de date standard, cum ar fi int , float, char și așa mai departe. Puteți chiar să vă scrieți codul Pocessing direct din Eclipse, dacă doriți să petreceți ceva timp pentru a-l configura. Un lucru pe care nu îl puteți face este să utilizați componente AWT sau Swing în schițele dvs. de procesare, deoarece acestea sunt în conflict cu natura buclă a procesării. Dar nu vă faceți griji, nu vom face nimic din acele lucruri fanteziste în acest articol.

Fundamentele procesării

Codul de procesare este format din două părți principale, blocuri de configurare și de desen . Blocul de configurare rulează o dată când codul este executat, iar blocurile de desen rulează continuu. Ideea principală din spatele procesării este că ceea ce scrieți în blocul de desen va fi executat de 60 de ori pe secundă de sus în jos, până când programul dvs. se încheie . Vom construi totul profitând de această idee. Ne vom face obiectele să se miște, ne vom păstra scorurile, vom detecta coliziunile, vom implementa gravitația și vom face aproape orice altceva folosind această funcție. Această buclă de reîmprospătare este ritmul inimii proiectului nostru . În secțiunile ulterioare, voi explica cum să folosiți această bătaie a inimii pentru a vă aduce codul la viață. Mai întâi, permiteți-mi să vă prezint IDE-ul de procesare.

Procesare IDE

Dacă ați citit până în acest moment și încă nu ați descărcat Procesarea IDE, vă rugăm să continuați și să o faceți. Pe parcursul articolului, vă voi schița câteva sarcini ușoare pe care să le încercați pe cont propriu, puteți exersa doar dacă aveți IDE-ul în funcțiune. Iată o scurtă introducere a IDE-ului de procesare. Este foarte simplu și explicit de la sine, așa că o voi fi scurt.

După cum v-ați aștepta, butoanele de alergare și oprire fac ceea ce vă sugerează. Când faceți clic pe butonul de rulare , codul dvs. va fi compilat și executat. Prin natura lor, programele de procesare nu se termină niciodată, rulează pentru totdeauna până când sunt deranjate. Îl puteți opri în mod programatic, dar dacă nu o faceți, puteți utiliza butonul de oprire .

Butonul care arată ca un fluture din partea dreaptă a rulării și opririi este depanatorul . Utilizarea depanatorului necesită un alt articol dedicat acestuia. Este în afara domeniului de aplicare al acestui articol, așa că îl puteți ignora pentru moment. Meniul derulant de lângă butonul de depanare este locul în care adăugați / setați moduri. Modurile vă oferă anumite funcționalități, vă permit să scrieți cod pentru Android, vă permit să scrieți cod în Python și așa mai departe și așa mai departe. Modificările sunt, de asemenea, în afara domeniului de aplicare, așa că îl puteți păstra în modul Java implicit și îl puteți ignora, de asemenea.

Fereastra din editorul de cod este locul unde rulează în mod normal schițele dvs. În imagine este gol, deoarece nu am setat nicio proprietate precum dimensiunea sau culoarea de fundal, sau nu am desenat nimic.

Nu este nimic de vorbit despre editorul de cod, pur și simplu este locul în care scrieți codul. Există numere de rând (!) Versiunile mai vechi de Processing nu aveau asta și nu vă puteți imagina cât de fericit am fost când le-am văzut prima dată.

Caseta neagră de mai jos este consola . Îl vom folosi pentru a imprima lucruri în scopuri de depanare rapidă. Fila de erori de lângă consolă este locul unde vor apărea erorile dvs. Aceasta este, de asemenea, o nouă caracteristică utilă care a venit cu Processing 3.0. În versiunile mai vechi, erorile erau tipărite pe consolă și era greu să le ținem evidența.

Bloc de configurare

După cum sa menționat anterior, blocurile de configurare sunt executate o dată când programul pornește. Îl puteți folosi pentru a face configurații și pentru lucruri pe care ați dori să le rulați o singură dată, de exemplu, încărcarea imaginilor sau a sunetelor. Iată un exemplu de bloc de configurare. Rulați acest cod în propriul dumneavoastră mediu și vedeți singur rezultatele.

 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); }

Metodele legate de styling (fond, umplere, contur) vor fi explicate la secțiunile de proprietăți și setări. Deocamdată, ceea ce trebuie să știți este modul în care setările și configurațiile pe care le setăm aici afectează întreaga noastră schiță. Codurile scrise aici sunt folosite pentru a seta unele seturi de reguli de bază aplicabile pe parcursul schiței. Ceea ce ar trebui să înțelegeți și în această secțiune sunt metodele enumerate mai jos:

size() - După cum sugerează și numele, această funcție este folosită pentru a configura dimensiunea schiței noastre. Trebuie să fie în prima linie a blocului de cod de configurare. Poate fi folosit sub următoarele forme:

  • dimensiune (lățime, înălțime);
  • dimensiune (lățime, înălțime, redare);

Valorile lățimii și înălțimii pot fi date în pixeli. Funcția Size acceptă un al treilea parametru, randamentul, care este folosit pentru a seta ce motor de randare va folosi schița noastră. În mod implicit, redarea este setată la P2D. Renderele disponibile sunt P2D (Processing 2D), P3D (Processing 3D, ar trebui utilizate dacă schițele dvs. vor include grafică 3D) și PDF (graficele 2D sunt desenate direct într-un fișier PDF Acrobat. Mai multe informații pot fi găsite aici). Renderele P2D și P3D folosesc hardware grafic compatibil OpenGL.

fullScreen() - Începând cu Processing 3.0, funcția fullScreen poate fi folosită acum în locul funcției size(). La fel ca și funcția size(), ar trebui să fie și în prima linie a blocului de configurare. Utilizarea este după cum urmează:

  • ecran complet();
  • Ecran complet(afisaj);
  • Ecran complet (renderer);
  • Ecran complet (afișare, redare);

Dacă îl utilizați fără parametri, schița de procesare va rula pur și simplu pe ecran complet și va rula pe afișajul principal. Parametrul „afișare” este folosit pentru a seta pe ce afișaj va rula schița. De exemplu, dacă conectați monitoare externe la computer, puteți seta variabila de afișare la 2 (sau 3, 4 etc.) și schița dvs. va rula acolo. Parametrul „renderer” este așa cum este explicat în partea size() de mai sus.

Blocare setări

Aceasta este o altă caracteristică care este introdusă odată cu noua versiune de Processing. Este un bloc de cod, la fel ca configurarea și desenul. Este util atunci când doriți să definiți metode size() sau fullScreen() cu parametri variabili. Este, de asemenea, necesar să definiți size() și alte proprietăți de stil, cum ar fi smooth() în acest bloc de cod dacă utilizați alt mediu decât propriul IDE al Processing, cum ar fi Eclipse. Dar nu veți avea nevoie de el în majoritatea cazurilor, cu siguranță nu în acest articol.

Draw Block

Nu este nimic special de vorbit despre blocul de remiză, dar totul este special la el. Draw block este locul unde se întâmplă toată magia. Este inima programului tău, care bate de 60 de ori pe secundă. Acest bloc de cod găzduiește toată logica de cod. Toate formele, obiectele etc. vor fi scrise aici.

Majoritatea codului despre care vom vorbi în acest articol va fi din blocul de extragere, așa că este important să înțelegeți clar cum funcționează acest bloc de cod. Pentru a vă face o demonstrație, iată ceva ce puteți încerca. Mai întâi rețineți că putem imprima orice pe consolă utilizând metodele print() sau println() . Metodele de imprimare se imprimă numai pe consolă, println, totuși, imprimă și adaugă o nouă linie la sfârșit, astfel încât fiecare println() se va tipări în rânduri separate.

Deci, aruncați o privire la următorul bloc de cod. Mai întâi, încercați să ghiciți ce se va imprima în consolă. Apoi, continuă și încearcă:

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

Dacă ai ghicit „1 2 3 4…”, te-am prins! Aceasta este una dintre confuziile din procesare. Vă amintiți că acest bloc este executat în mod repetat? Când definiți o variabilă aici, aceasta este definită pe fiecare buclă din nou și din nou. La fiecare iterație, x este setat la 0, este incrementat cu 1 și este imprimat pe consolă. Prin urmare, obținem rezultatul „1 1 1 1…”. Acest exemplu a fost oarecum evident, dar poate fi confuz atunci când lucrurile se complică puțin.

Nu vrem ca x să fie suprascris, așa că cum putem realiza acest lucru și obținem rezultatul „1 2 3 4…”? Prin utilizarea variabilelor globale . Nu este nimic elegant, definim doar variabila în afara blocului de desen, astfel încât să nu fie redefinită la fiecare iterație. De asemenea, domeniul de aplicare al variabilei va fi accesibil pe tot parcursul schiței. Vezi codul de mai jos:

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

S-ar putea să vă întrebați cum poate funcționa o variabilă definită în afara blocurilor noastre? Și de ce nu am folosit blocul setup() deoarece este executat o dată la început? Răspunsul este legat de programarea orientată pe obiecte și de domenii, dacă nu sunteți familiarizat, puteți sări peste acest paragraf. Consultați partea în care am explicat modul în care codul de procesare este convertit în Java. Îți amintești cum sunt împachetate cu o clasă Java? Variabilele pe care le scriem în afara blocului setup() și draw() sunt de asemenea împachetate, prin urmare sunt tratate ca câmpuri ale clasei exterioare care înglobează codul nostru. Folosirea x+=1 este la fel cu utilizarea acestui.x+=1. De asemenea, funcționează la fel și în cazul nostru, nicio variabilă numită x nu este definită în domeniul de aplicare al draw() și este căutat un domeniu exterior, care este domeniul de aplicare al acestui . Și de ce nu am definit variabila noastră x în secțiunea setup()? Dacă am face-o, domeniul de aplicare al căruia x este definit ar fi domeniul de aplicare al funcției de configurare și nu ar fi accesibil din blocul draw().

Desenarea formelor și a textelor

Acum știm cum să ne configuram schița folosind blocul de configurare și știm ce face blocul de desen. Așa că este timpul să obțineți puțin vizual și să învățați despre părțile distractive ale procesării: cum să desenați forme.

Înainte de a începe, ar trebui să înțelegeți sistemul de coordonate . În Procesare, determinați coordonatele fiecărui obiect pe care îl desenați pe ecran. Sistemul de coordonate este în pixeli. Originea (adică punctul de plecare) este colțul din stânga sus, ar trebui să vă dați coordonatele relativ la acel punct. Un alt lucru pe care ar trebui să-l știți este că fiecare formă are un punct de referință diferit. De exemplu, rect() are colțul din stânga sus ca punct de referință. Pentru elipse(), este centrul. Aceste puncte de referință pot fi modificate cu metode precum rectMode() și ellipseMode(), pe care le voi explica în secțiunea de proprietăți și setări. Este oferită un exemplu de cifră pentru a vă ajuta să înțelegeți mai bine.

Acest articol este o prezentare generală de bază a procesării, așa că nu vom atinge forme complexe precum vârfurile sau formele 3D. Formele 2D de bază vor fi de fapt mai mult decât suficiente pentru a ne crea propriul joc. În figură, puteți vedea exemple despre cum sunt desenate formele. Fiecare formă are propria sintaxă care trebuie creată, dar ideea de bază este de a oferi fie coordonatele, fie dimensiunile, fie ambele. Iată câteva forme cu care ar trebui să fiți familiarizat (pentru toate valorile date mai jos, „x” și „y” înseamnă coordonatele x și y în pixeli, „w” și „h” înseamnă valorile de lățime și înălțime tot în pixeli):

point() - Punct simplu, are nevoie doar de o singură coordonată. Utilizare:

  • punctul (x, y)
  • point(x, y, z) - În cazul în care utilizați 3 dimensiuni.

line() - Pentru crearea unei linii. Puteți crea o linie cu doar un punct de început și un punct de sfârșit. Utilizare:

  • linie(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - În cazul în care utilizați 3 dimensiuni.

triunghi() - Pentru a crea un triunghi. Utilizare: triunghi (x1, y1, x2, y2, x3, y3)

quad() - Pentru crearea unui patrulater. Utilizare: quad(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Pentru crearea unui dreptunghi. Punctul de referință este implicit colțul din stânga sus (consultați figură). Iată modul de utilizare:

  • rect(x, y, w, h)
  • rect(x, y, w, h, r) - „r” înseamnă raza în pixeli pentru a face colțurile rotunjite.
  • rect(x, y, w, h, tl, tr, br, bl) - Raza pentru colțurile din stânga sus, din dreapta sus, din dreapta jos, respectiv din stânga jos. Acesta este, de asemenea, în pixeli.

ellipse() - Pentru a crea o formă de elipsă. Acesta este, de asemenea, folosit pentru a crea un cerc, ar trebui date aceleași valori pentru lățime și înălțime. Punctul de referință pentru această formă este centrul în mod implicit (consultați figură). Iată modul de utilizare:

  • elipsa (x, y, w, h)

arc() - Desenați un arc. Utilizare:

  • arc(x, y, w, h, start, stop) - „start” și „stop” sunt folosite pentru a determina unghiul de pornire și oprire a desenării arcului. Valorile sunt exprimate în radiani. Pot fi utilizate constante precum „PI, HALF_PI, QUARTER_PI și TWO_PI”.
  • arc(x, y, w, h, start, stop, mode) - variabila „mod” este de a determina stilul de redare al arcului (șir). Opțiunile disponibile sunt „OPEN, CHORD, PIE”. OPEN va lăsa părțile nedesenate fără margini. CHORD va completa părțile nedesenate cu un chenar. PIE vă va face arcul să arate ca o diagramă circulară.

Afișarea textelor pe ecran este similară cu afișarea formelor, ideea de bază este că determinați o coordonată la care doriți să fie afișat textul. Cu toate acestea, este mai mult la manipularea textelor. Veți avea mai mult control asupra textelor dvs. după secțiunea de proprietăți și setări, unde veți învăța cum să aplicați setările și proprietățile obiectelor. Deocamdată, voi arăta elementele de bază ale afișării textelor. Există multe moduri de a face acest lucru, voi arăta doar elementele esențiale.

text() - Afișează texte. Utilizare:

  • text(c, x, y) - „c” înseamnă caracter, orice caracter alfanumeric va fi afișat.
  • text(c, x, y, z) - În cazul în care lucrați cu 3 dimensiuni.
  • text(str, x, y) - „str” este șirul care trebuie afișat.
  • text(str, x, y, z) - În cazul în care lucrați cu 3 dimensiuni.
  • text(num, x, y) - „num” este valoarea numerică care trebuie afișată.
  • text(num, x, y, z) - În cazul în care lucrați cu 3 dimensiuni.

Proprietăți și setări

Primul lucru care ar trebui explicat în această secțiune ar fi logica din spatele setării proprietăților obiectelor. Culoarea de umplere, culoarea de fundal, chenarul, lățimea chenarului, culoarea chenarului, alinierea formelor, stilurile de chenar etc. ar putea fi câteva exemple ale acestor proprietăți.

Când setați o proprietate, trebuie să vă amintiți că codul se va executa de sus în jos . Să spunem că setați proprietatea „fill” la roșu, toate obiectele desenate sub acea linie vor fi umplute cu roșu până când vor fi suprascrise de o altă proprietate de umplere. Același lucru este valabil și pentru alte proprietăți, totuși rețineți că nu toate proprietățile se vor suprascrie reciproc. De exemplu, proprietatea „stroke” nu suprascrie proprietatea „fill”, ci lucrează împreună. Iată o reprezentare vizuală pentru ca tu să înțelegi logica:

După cum puteți vedea în imagine, prima linie setează culoarea de umplere la roșu, iar a doua linie setează culoarea conturului la albastru. Avem acum două setări active: umpleți linii roșii și albastre. După cum v-ați aștepta, oricare ar fi obiectul nostru pe linia următoare, acesta va fi umplut cu roșu și va avea linii albastre (dacă este cazul). Puteți continua să examinați imaginea în acest fel și veți înțelege logica.

Iată câteva proprietăți și setări esențiale care sunt utilizate în mod obișnuit:

Setări de stil

fill() - Setează culoarea de umplere a obiectelor. Această setare este folosită și pentru a colora textele. Pentru moment, trebuie să cunoaștem doar următoarele utilizări:

  • fill(r, g, b) - Valori roșu, verde și albastru ca număr întreg
  • fill(r, g, b, a) - Valoarea alfa suplimentară, max este 255

noFill() - Setează culoarea de umplere la transparent.

stroke() - Setează culoarea conturului la obiecte. Proprietatea stroke este aplicabilă pentru linii și margini din jurul obiectelor. Pentru moment, trebuie să cunoaștem doar următoarele utilizări:

  • stroke(r, g, b) - Valori roșu, verde și albastru ca întreg.
  • stroke(r, g, b, a) - Valoarea alfa suplimentară, max este 255

noStroke() - Elimină cursa.

strokeWeight() - Setează lățimea cursei. Utilizare:

  • strokeWeight(x) - x este un număr întreg și reprezintă lățimea cursei în pixeli.

background() - Setează culoarea de fundal. Pentru moment, trebuie să cunoaștem doar următoarele utilizări:

  • background(r, g, b) - Valori roșu, verde și albastru ca număr întreg.
  • background(r, g, b, a) - Valoarea alfa suplimentară, max este 255

Setări de aliniere

ellipseMode() - Setează unde să ia ca punct de referință elipsele de aliniere. Utilizare:

  • ellipseMode(mode) - „modul” este parametrul, aici sunt parametrii disponibili:
    • CENTRU (implicit): Luați centrul ca punct de referință.
    • RAZA: Acesta ia și centrul ca punct de referință, dar în acest mod, valorile w și h pe care le specificați sunt tratate ca jumătate (adică raza în loc de diametru)
    • COLT: ia colțul din stânga sus ca punct de referință.
    • COLțuri: setează primii doi parametri (x și y) ca locație a colțului din stânga sus și ultimii doi parametri (w și h) ca locație a colțului din stânga jos al elipsei. Deci acest mod, „lățimea” și „înălțimea” este irelevante. Gândindu-l ca elipse(x_tl,y_tl,x_br,y_br) are mai mult sens în acest caz.

rectMode() - Setează unde să ia drept punct de referință alinierea dreptunghiurilor. Utilizare:

  • rectMode(mode) - „modul” este parametrul, aici sunt parametrii disponibili:
    • CENTRU: Luați centrul ca punct de referință.
    • RAZA: Acesta ia și centrul ca punct de referință, dar în acest mod, valorile w și h pe care le specificați sunt tratate ca jumătate
    • COLT (implicit): ia colțul din stânga sus ca punct de referință.
    • COLțuri: setează primii doi parametri (x și y) ca locație a colțului din stânga sus și ultimii doi parametri (w și h) ca locație a colțului din stânga jos al elipsei. Deci acest mod, „lățimea” și „înălțimea” este irelevante. Gândirea la asta ca rect(x_tl,y_tl,x_br,y_br) are mai mult sens în acest caz.

Setări legate de text

textSize() - Setează dimensiunea fontului textului. Utilizare:

  • textSize(size) - Valoare întreagă a mărimii dorite.

textLeading() - Setează înălțimea liniei textelor dvs. Utilizare:

  • textLeading(lineheight) - Valoarea pixelului spațiului dintre linii.

textAlign() - Setează unde să ia ca punct de referință textele de aliniere. Utilizare.

  • textAlign(alignX) - „alignX” este pentru alinierea orizontală. Disponibil: STÂNGA, CENTRU, DREAPTA
  • textAlign(alignX, alignY) - „alignY” este pentru alinierea verticală. Disponibil: SUS, JOS, CENTRU, LINIA DE BAZĂ.

Animații

Până acum, am învățat cum să desenăm obiecte și texte. Dar problema cu ele este că sunt statice. Acum cum îi facem să se miște? Simplu, în loc să dăm coordonatele ca numere întregi, folosim variabile astfel încât să le putem incrementa/decrementa . Are sens? Aruncă o privire la următorul cod:

 // 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; }

Vedeți cum am reușit animația? Setăm x și y ca variabile globale și valoarea lor inițială la 0. În bucla noastră de desen, am creat elipsa, am stabilit culoarea de umplere la roșu, culoarea contului la albastru și coordonatele la x și y. Când creștem x și y, mingea își schimbă pur și simplu locația. Dar există o problemă cu acest cod, îl poți observa? Ca o provocare ușoară pentru dvs., încercați să vă dați seama care este problema și testați-o. Iată rezultatul:

Intenția mea de a lăsa acest lucru să se întâmple a fost să vă fac să realizați cum funcționează natura în buclă a procesării. Consultați exemplul din secțiunea „Draw Block”, vă amintiți de ce am primit „1 1 1…” în loc de „1 2 3…”? Același motiv pentru care mingea lasă urme în urmă. De fiecare dată când blocul de desenare repetă, x și y sunt incrementați cu 5 și, prin urmare, mingea este redesenată la 5 pixeli în jos și în dreapta. Cu toate acestea, mingea este extrasă din iterațiile anterioare rămâne în vedere. Cum îi facem să dispară? Orice presupuneri?

Pentru a scăpa de semnele pe care mingea le lasă în urmă, pur și simplu scoatem fundalul (255) din blocul de configurare și îl lipim pentru a fi chiar prima linie a blocului de desen. Când codul nostru de fundal era în blocul de configurare, a rulat o singură dată la început, făcând fundalul nostru alb. Dar asta nu este suficient, avem nevoie pentru a ne seta fundalul la alb pe fiecare buclă pentru a acoperi bilele extrase din buclele anterioare. Fundalul fiind prima linie înseamnă că rulează primul, devine stratul de bază. Pe fiecare buclă, pânza noastră este vopsită în alb și elemente noi sunt desenate deasupra fundalului alb. Deci nu avem semne.

Aceasta este ideea din spatele animarii lucrurilor în Procesare, manipulând coordonatele obiectelor în mod programatic pentru a le schimba locația. Dar cum vom face lucruri de lux, cum ar fi păstrarea mingii pe ecran? Sau poate implementând gravitația? Voi învăța cum să fac aceste lucruri în următoarea parte a acestui articol. Vom învăța încercând și construind. Vom învăța cum să o facem și le vom aplica în jocul nostru imediat. La final, vom avea un joc complet, jucabil și, sperăm, distractiv.

Interacțiuni cu tastatură și mouse

Interacțiunile de la tastatură și mouse în Procesare sunt foarte ușoare și directe. Există metode pe care le puteți apela pentru fiecare eveniment, iar ceea ce scrieți în interior va fi executat o dată când are loc evenimentul. De asemenea, există variabile globale, cum ar fi mousePressed și keyPressed, pe care le puteți utiliza în blocul dvs. de desen pentru a profita de bucla. Iată câteva dintre metodele cu explicații:

 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. }

După cum puteți vedea, este destul de ușor să verificați dacă se face clic pe mouse sau pe ce tastă este apăsată. Există totuși mai multe opțiuni disponibile pentru variabilele mousePressed și KeyCode. Opțiunile disponibile pentru mouse-ul apăsat sunt STÂNGA, DREAPTA și CENTRUL. Există multe altele disponibile pentru keyCode ; SUS, JOS, STÂNGA, DREAPTA, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC și DELETE.

Un lucru de știut despre variabilele mouse-ului, și îl vom folosi foarte mult, este cum să obținem coordonatele mouse-ului. Pentru a obține coordonatele exacte ale cursorului, putem folosi variabile mouseX și mouseY direct în blocul draw(). Nu în ultimul rând, există o mulțime de alte metode utile pe care ar trebui să le aruncați o privire. Toate sunt documentate în Referința de procesare.

Concluzie

Ar trebui să vă familiarizați cu Procesare până acum. Cu toate acestea, dacă vă opriți aici, toate aceste cunoștințe vor zbura departe. Vă recomand cu tărie să continuați să exersați, jucându-vă cu ceea ce ați învățat. Pentru a vă ajuta să exersați, vă voi oferi două exerciții. Ar trebui să încercați tot posibilul să o faceți pe cont propriu. Dacă rămâneți blocat, Google și Processing Reference ar trebui să vă fie cei mai buni prieteni. Îți voi furniza codul pentru primul, dar să te uiți la ele ar trebui să fie ultimul lucru pe care îl faci.

Exercițiul recomandat 1

Ar trebui să faci 4 bile cu culori diferite , pornind de la 4 colțuri ale ecranului călătorind prin centru cu viteze diferite . Când faceți clic și țineți apăsat butonul mouse-ului, bilele ar trebui să înghețe . Iar când eliberezi mouse-ul, bilele se pot întoarce în poziția inițială și se pot continua să se miște. Deci, caut asa ceva.

După ce încercați singur exercițiul, puteți verifica codul aici.

Exercițiul 2 recomandat

Îți amintești de faimosul screensaver DVD pe care logo-ul DVD-ului trece pe ecran și am așteptat cu disperare ca acesta să ajungă la colț? Vreau să reproduci acel screensaver, dar folosind doar un dreptunghi în loc de logo-ul DVD. Când porniți aplicația, ecranul ar trebui să fie negru, iar dreptunghiul ar trebui să înceapă într-o locație aleatorie. De fiecare dată când dreptunghiul lovește colțul, ar trebui să-și schimbe culoarea (și, evident, direcția). Când mutați mouse-ul, dreptunghiul ar trebui să dispară și culoarea de fundal ar trebui să devină albă (este un screensaver, nu-i așa?). Nu voi da codul pentru acest exercițiu în acest articol. Ar trebui să încercați tot posibilul să îl implementați, iar codul va fi furnizat în a doua parte a acestui articol.

A fost publicată a doua parte a ghidului suprem pentru procesare, un tutorial pas cu pas pentru construirea unui joc simplu.

Citiți suplimentare pe blogul Toptal Engineering:

  • Cum să abordați scrierea unui interpret de la zero