Borite se s dosadom i svrbežom da biste iskoristili svoju kreativnost. Želite izgraditi nešto, nešto vizualno impresivno, nešto umjetničko. Ili možda želite naučiti programirati i što prije napraviti nešto impresivno. Ako je tako, onda je jezik za obradu pravi put.

Među svim programskim jezicima s kojima sam do sada radio, Processing je bez sumnje bio jedan od najzabavnijih. To je izravni jezik - jednostavan za naučiti, razumjeti i koristiti, ali je vrlo moćan. Gotovo je kao da slikate na praznom platnu linijama koda. Ne postoje čvrsta pravila ili smjernice koje ograničavaju vašu kreativnost, jedino ograničenje je vaša mašta.

Na fakultetu sam bio asistent u programu koji je okupljao srednjoškolce i podučavao ih obradi. Većina njih nije imala jaku programsku pozadinu, neki prije toga nisu ni napisali niti jedan redak koda. Za samo pet dana od njih se očekivalo da nauče jezik i naprave vlastite jednostavne igre. Stopa uspjeha bila je gotovo sto posto, rijetko smo se suočavali s neuspjehom. U ovom ćemo članku upravo to raditi. Smanjio sam cijeli program na dva dijela. Prvi dio, govorit ću o jeziku. Dat ću osnovni pregled, vodič za obradu i daću nekoliko savjeta i trikova. Zatim ćemo u sljedećem dijelu graditi jednostavnu igru ​​korak po korak, svaki će korak biti detaljno objašnjen. Također ću pretvoriti kôd igre u JavaScript pomoću p5js, tako da se naša igra može pokretati u web pregledniku.

Što biste već trebali znati

Da biste razumjeli i lako slijedili ove članke, trebali biste imati osnovno znanje programiranja, jer neću govoriti o osnovama programiranja. Uglavnom, doduše, neću dirati nijedan napredni koncept programiranja, tako da će površno razumijevanje biti dovoljno. Postoje neki dijelovi u kojima govorim o nekim idejama i konceptima na niskoj razini, poput objektno orijentiranog programiranja (OOP), ali oni nisu presudni. Oni su za znatiželjne čitatelje koje zanima struktura jezika. Ako ne želite znati, možete jednostavno preskočiti te dijelove. Osim toga, jedino što biste trebali imati je ambicija naučiti ovaj strašan jezik i entuzijazam za stvaranje vlastite igre!

Kako slijediti

Uvijek sam za učenje programiranja pokušavajući i eksperimentirajući. Što prije zaronite u vlastitu igru, brže ćete se osjećati ugodno s Obradom. Dakle, to će biti moj prvi prijedlog, isprobajte svaki korak u svom okruženju. Obrada ima jednostavan i lagan za korištenje IDE (tj. Uređivač koda), to je jedino što ćete trebati preuzeti i instalirati da biste slijedili. Možete ga preuzeti odavde .

Pa krenimo!

Što je procesorski jezik?

Ovaj odjeljak uključuje kratki tehnički pregled jezika, njegove strukture i neke napomene o procesu sastavljanja i izvršavanja. Pojedinosti će sadržavati neka napredna znanja o programiranju i Java okruženju. Ako vam zasad ne smetaju detalji i jedva čekate naučiti i kodirati vlastitu igru, možete preskočiti na odjeljak 'Osnove obrade'.

Obrada je vizualni programski jezik koji vam omogućuje da skicirate kodove, da tako kažem. Međutim, to nije baš programski jezik sam po sebi, to je ono što oni nazivaju 'Java-esque' programski jezik, što znači da je jezik izgrađen na vrhu Java platforme, ali nije baš sam po sebi Java. Temelji se na Javi i sav se kôd pretprerađuje i pretvara izravno u Java kôd kada pritisnete gumb za pokretanje. Javina klasa PApplet osnovna je klasa za sve obrade skica. Za primjer da uzmemo nekoliko osnovnih blokova koda za obradu:

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

Ovi blokovi koda pretvorit će se u nešto slično:

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

Možete vidjeti da je blok koda za obradu omotan klasom koja se proteže iz Javinog PAppleta. Stoga će se sve klase koje definirate u kodu za obradu, ako postoje, tretirati kao unutarnje klase.

Činjenica da se Obrada temelji na Javi daje nam puno prednosti, posebno ako ste Java programer . Ne samo da je sintaksa poznata, već vam pruža mogućnost da radite stvari poput ugradnje Java koda, knjižnica, JAR datoteka u skice, korištenjem apleta za obradu izravno u Java aplikacijama, definiranjem klasa i korištenjem standardnih vrsta podataka kao što je int , float, char i tako dalje. Ako želite, možete čak i napisati svoj kôd za obradu izravno iz Eclipsea provesti neko vrijeme da ga postavi. Jedna stvar koju ne možete učiniti je da koristite AWT ili Swing komponente u svojim skicama za obradu, jer su u suprotnosti s prirodom petlje u obradi. Ali ne brinite, u ovom članku nećemo raditi ništa od tih fensi stvari.

Osnove obrade

Obradni kod sastoji se od dva glavna dijela, postaviti i crtati blokovi. Blok za postavljanje izvodi se jednom kada se kôd izvrši, a blokovi za crtanje rade kontinuirano. Glavna ideja koja stoji iza Obrade je, ono što napišete u bloku izvlačenja izvršavat će se 60 puta u sekundi od vrha do dna, sve dok vam program ne prestane . Sve ćemo izgraditi iskorištavanjem ove ideje. Natjerat ćemo naše predmete, zadržati rezultate, otkriti sudare, primijeniti gravitaciju i učiniti gotovo sve ostalo koristeći ovu značajku. Ova petlja osvježavanja otkucaj je srca našeg projekta . Objasnit ću vam kako koristiti ovaj otkucaj srca kako biste oživjeli svoj kôd u sljedećim odjeljcima. Prvo, dopustite mi da vas upoznam s IDE-om za obradu.

Obrada IDE-a

Ako ste čitali do ove točke i još uvijek niste preuzeli IDE za obradu, izvolite i učini to . Kroz članak ću vam izložiti neke jednostavne zadatke koje možete sami iskušati, a možete vježbati samo ako imate IDE koji radi. Evo kratkog uvoda u IDE za obradu. Vrlo je jednostavno i samo po sebi objašnjenje, pa ću ga kratko zadržati.

Kao što ste i očekivali, tipke za pokretanje i zaustavljanje rade ono što su predložili. Kada kliknete na trčanje gumb, vaš će se kod sastaviti i izvršiti. Po prirodi programi obrade nikada se ne ukidaju, oni traju zauvijek i zauvijek dok ih ne uznemire. Možete ga programski prekinuti, no ako to ne učinite, možete koristiti Stop dugme.

Gumb koji izgleda poput leptira s desne strane run & stop-a je program za ispravljanje pogrešaka . Upotreba programa za ispravljanje pogrešaka treba mu cijeli drugi članak. To je izvan dosega ovog članka, pa ga zasad možete zanemariti. Na padajućem izborniku pored gumba za otklanjanje pogrešaka dodajete / postavljate modove. Modovi pružaju vam određene funkcije, omogućuju vam pisanje koda za Android, omogućuju vam pisanje koda na Pythonu, i tako dalje i tako dalje. Modovi su također izvan dosega, tako da ih možete zadržati u zadanom Java načinu i zanemariti ga.

Prozor u uređivaču koda je mjesto u kojem se obično izvršavaju vaše skice. Na slici je prazno, jer nismo postavili nijedno svojstvo poput veličine ili boje pozadine ili nismo ništa nacrtali.

O uređivaču koda nema se što puno razgovarati, to je jednostavno mjesto na kojem pišete svoj kôd. Postoje brojevi linija (!) Starije verzije Processinga to nisu imale i ne možete zamisliti koliko sam bila sretna kad sam ih prvi put vidjela.

Ispod je crni okvir konzola . Upotrijebit ćemo ga za ispis stvari radi brzog uklanjanja pogrešaka. The pogreške Na kartici uz konzolu pojavit će se vaše pogreške. Ovo je također nova korisna značajka koja se isporučuje s Processing 3.0. U starijim verzijama pogreške su se ispisivale na konzoli i bilo ih je teško pratiti.

Blok za postavljanje

Kao što je prethodno rečeno, blokovi za postavljanje izvršavaju se jednom kada se program pokrene. Možete ga koristiti za izradu konfiguracija i za stvari koje biste željeli pokrenuti samo jednom, na primjer za učitavanje slika ili zvukova. Evo primjera bloka za postavljanje. Pokrenite ovaj kod u svom okruženju i uvjerite se u rezultate.

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

Metode povezane sa stilom (pozadina, ispuna, potez) bit će objašnjene u odjeljcima svojstava i postavki. Za sada ono što trebate znati jest kako postavke i konfiguracije koje smo ovdje postavili utječu na cijelu našu skicu. Ovdje napisani kodovi koriste se za postavljanje nekih osnovnih skupova pravila primjenjivih u cijeloj skici. Ono što biste također trebali razumjeti u ovom odjeljku su metode navedene u nastavku:

veličina() - Kao što i samo ime govori, ova se funkcija koristi za konfiguriranje veličine naše skice. Mora biti u prvom retku bloka s kodom za postavljanje. Mogao bi se koristiti u sljedećim oblicima:

• veličina (širina, visina);
• veličina (širina, visina, render);

Vrijednosti širine i visine mogu se dati u pikselima. Funkcija veličine prihvaća treći parametar, renderer, koji se koristi za postavljanje mehanizma za prikazivanje koji će koristiti naša skica. Prema zadanim postavkama, prikazivač je postavljen na P2D. Dostupni prikazivači su P2D (Obrada 2D), P3D (Obrada 3D, treba koristiti ako će vaše skice sadržavati 3D grafiku) i PDF (2D grafika crta se izravno u Acrobat PDF datoteku. Više informacija može se pronaći ovdje ). P2D i P3D prikazivači koriste grafički hardver kompatibilan s OpenGL-om.

puni zaslon() - Od Processinga 3.0, funkcija fullScreen sada se može koristiti umjesto funkcije size (). Baš kao i funkcija size (), ona bi također trebala biti u prvom retku bloka za postavljanje. Uporaba je sljedeća:

• puni zaslon();
• puni zaslon (zaslon);
• fullScreen (render);
• fullScreen (zaslon, render);

Ako ga koristite bez ikakvih parametara, vaša skica obrade jednostavno će se izvoditi na cijelom zaslonu i prikazivat će se na vašem glavnom zaslonu. Parametar ‘display’ koristi se za postavljanje na kojem će se ekranu prikazivati ​​vaša skica. Na primjer, ako na računalo povežete vanjske monitore, možete postaviti varijablu zaslona na 2 (ili 3, 4 itd.) I tamo će se pokretati vaša skica. Parametar 'renderer' objašnjen je u gornjem dijelu size ().

Blokiranje postavki

Ovo je još jedna značajka koja je predstavljena novim izdanjem Processinga. To je blok koda, baš kao i postavljanje i crtanje. Korisno je kada želite definirati metode size () ili fullScreen () s promjenjivim parametrima. Također je potrebno definirati veličinu () i druga svojstva stila, kao što je smooth () u ovom bloku koda ako koristite bilo koje okruženje, osim Obrade vlastitog IDE-a, poput Eclipsea. Ali u većini slučajeva neće vam trebati, definitivno ne u ovom članku.

Crtanje bloka

O bloku izvlačenja nema se što posebno razgovarati, ali sve je posebno u vezi s tim. Blok izvlačenja je mjesto gdje se događa sva čarolija. Srce je vašeg programa, kuca 60 puta u sekundi. Ovaj blok koda sadrži svu vašu logiku koda. Ovdje će biti napisani svi vaši oblici, predmeti itd.

Većina koda o kojem ćemo razgovarati u ovom članku bit će iz bloka izvlačenja, stoga je važno da jasno razumijete kako ovaj blok koda radi. Da vam pokažem, evo nečega što možete isprobati. Prvo imajte na umu da na konzolu možemo ispisati bilo što pomoću ispis () ili println () metode. Metode ispisa ispisuju se samo na konzolu, println međutim ispisuje i dodaje novu liniju na kraju, tako da će se svaki println () ispisivati ​​u zasebnim redovima.

Dakle, pogledajte sljedeći blok koda. Prvo pokušajte pogoditi što će se ispisati u konzoli. Zatim, samo naprijed i isprobajte:

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

Ako ste pogodili “1 2 3 4…”, imam vas! Ovo je jedna od zabuna u obradi. Sjećate se da se ovaj blok opetovano izvršava? Kada ovdje definirate varijablu, ona se uvijek iznova definira u svakoj petlji. Na svakoj se iteraciji x postavlja na 0, povećava se za 1 i ispisuje na konzolu. Stoga dobivamo rezultat '1 1 1 1 ...'. Ovaj je primjer bio pomalo očit, ali može zbuniti kad se stvari malo zakompliciraju.

Ne želimo da se x prepiše, pa kako to možemo postići i dobiti rezultat '1 2 3 4 ...'? Pomoću globalne varijable . To nije ništa neobično, mi definiramo varijablu samo izvan bloka izvlačenja kako se ne bi redefinirala na svakoj iteraciji. Također, opseg varijable bit će dostupan tijekom cijele skice. Pogledajte kod u nastavku:

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

Možda se pitate kako može funkcionirati varijabla definirana izvan naših blokova? I zašto nismo koristili blok setup () jer se on izvršava jednom na početku? Odgovor je povezan s objektno orijentiranim programiranjem i opsezima, ako niste upoznati, možete preskočiti ovaj odlomak. Pogledajte dio u kojem sam objasnio kako se kôd za obradu pretvara u Javu. Sjećate se kako se umotaju u Java klasu? Varijable koje napišemo izvan bloka setup () i draw () također se zamotavaju, stoga se tretiraju kao polja vanjske klase koja obavija naš kôd. Korištenje x + = 1 isto je što i korištenje ovog.x + = 1. Također funkcionira isto u našem slučaju, niti jedna varijabla koja se naziva x nije definirana u opsegu draw () i pretražuje se vanjski opseg, što je opseg ovaj . I zašto nismo definirali svoju varijablu x u odjeljku setup ()? Da jesmo, opseg koji je definiran x bio bi opseg funkcije postavljanja i ne bi mu bio dostupan iz bloka draw ().

Crtanje oblika i tekstova

Sada znamo kako konfigurirati našu skicu pomoću bloka za postavljanje i znamo što čini blok za crtanje. Vrijeme je da se malo vizualno upoznate sa zabavnim dijelovima obrade: kako crtati oblike.

Prije nego što započnemo, trebali biste razumjeti koordinatni sustav . U Obradi određujete koordinate svakog objekta koji nacrtate na ekranu. Koordinatni sustav je u pikselima. Polazište (tj. Početna točka) je gornji lijevi kut, trebali biste dati svoje koordinate u odnosu na tu točku. Još jedna stvar koju biste trebali znati je da svaki oblik ima različitu referentnu točku. Na primjer, rect () ima gornji lijevi kut kao referentnu točku. Za elipsu () to je središte. Te se referentne točke mogu mijenjati metodama poput rectMode () i ellipseMode (), što ću objasniti u odjeljku svojstva i postavke. Naveden je primjer brojke koja će vam pomoći da bolje razumijete.

Ovaj je članak osnovni pregled obrade, pa nećemo dodirivati ​​složene oblike poput vrhova ili 3D oblika. Osnovni 2D oblici zapravo će nam biti više nego dovoljni za stvaranje vlastite igre. Na slici možete vidjeti primjere kako se crtaju oblici. Svaki oblik ima svoju sintaksu koju treba stvoriti, ali osnovna ideja je dati ili njegove koordinate ili njegove veličine ili oboje. Evo nekoliko oblika koji bi vam trebali biti poznati (za sve dolje navedene vrijednosti, 'x' i 'y' znače x i y koordinate u pikselima, 'w' i 'h' znače vrijednosti širine i visine također u pikselima):

točka() - Jednostavna točka, potrebna je samo jedna koordinata. Upotreba:

• točka (x, y)
• točka (x, y, z) - U slučaju da koristite 3 dimenzije.

crta() - Za stvaranje linije. Možete stvoriti liniju sa samo početnom i završnom točkom. Upotreba:

• linija (x1, y1, x2, y2)
• linija (x1, y1, z1, x2, y2, z2) - U slučaju da koristite 3 dimenzije.

trokut() - Za stvaranje trokuta. Upotreba: trokut (x1, y1, x2, y2, x3, y3)

četverokut () - Za stvaranje četverokuta. Upotreba: četverokut (x1, y1, x2, y2, x3, y3, x4, y4)

rect () - Za stvaranje pravokutnika. Referentna točka je prema zadanim postavkama gornji lijevi kut (pogledajte sliku). Evo upotrebe:

• pravougaonik (x, y, w, h)
• rect (x, y, w, h, r) - „r“ znači polumjer u pikselima kako bi uglovi bili zaobljeni.
• pravokutni (x, y, w, h, tl, tr, br, bl) - polumjer gornjeg lijevog, gornjeg desnog, donjeg desnog, donjeg lijevog kuta. Ovo je također u pikselima.

elipsa() - Za stvaranje oblika elipse. To se također koristi za stvaranje kruga, treba dati iste vrijednosti širine i visine. Referentna točka za ovaj oblik prema zadanim je postavkama središte (pogledajte sliku). Evo upotrebe:

• elipsa (x, y, w, h)

luk() - Nacrtaj luk. Upotreba:

• luk (x, y, w, h, start, stop) - 'start' i 'stop' koristi se za određivanje kuta za pokretanje i zaustavljanje crtanja luka. Vrijednosti su u radijanima. Mogu se koristiti konstante poput 'PI, HALF_PI, QUARTER_PI i TWO_PI'.
• luk (x, y, w, h, start, stop, mode) - varijabla 'mode' određuje stil prikazivanja luka (niza). Dostupne opcije su „OTVORENO, AKORD, PIE“. OPEN će neizvučene dijelove ostaviti bez ruba. CHORD će neizvučene dijelove upotpuniti obrubom. PIE će vaš luk izgledati poput tortnog grafikona.

Prikazivanje tekstova na ekranu slično je prikazivanju oblika, osnovna ideja je da odredite koordinatu na kojoj želite da se vaš tekst prikazuje. Međutim, ima više za rukovanje tekstovima. Imat ćete veću kontrolu nad svojim tekstovima nakon odjeljka svojstava i postavki, gdje ćete naučiti kako primijeniti postavke i svojstva na objekte. Za sada ću pokazati osnove prikazivanja tekstova. Postoji mnogo načina za to, pokazat ću samo ono bitno.

tekst() - Prikaži tekstove. Upotreba:

• tekst (c, x, y) - „c“ znači znak, prikazat će se bilo koji alfanumerički znak.
• tekst (c, x, y, z) - U slučaju da radite s 3 dimenzije.
• tekst (str, x, y) - 'str' je niz koji će se prikazati.
• tekst (str, x, y, z) - U slučaju da radite s 3 dimenzije.
• tekst (num, x, y) - „num“ je brojčana vrijednost koja se prikazuje.
• tekst (num, x, y, z) - U slučaju da radite s 3 dimenzije.

Svojstva i postavke

Prvo što bi trebalo objasniti u ovom odjeljku bila bi logika postavljanja svojstava objekata. Boja ispune, boja pozadine, obrub, širina obruba, boja obruba, poravnanje oblika, stilovi obruba itd. Mogu biti neki od primjera ovih svojstava.

Kada postavljate svojstvo, morate imati na umu da će se kôd izvršavati iz od vrha do dna . Recimo, svojstvo 'fill' postavite na crveno, svi objekti nacrtani ispod te crte bit će ispunjeni crvenom dok ga ne prepiše neko drugo svojstvo fill. Ista stvar vrijedi i za druga svojstva, no imajte na umu da se neće sva svojstva međusobno prebrisati. Na primjer svojstvo 'stroke' ne prepisuje svojstvo 'fill', već rade zajedno. Evo vizualnog prikaza za razumijevanje logike:

Kao što možete vidjeti na slici, prvi redak postavlja boju ispune na crvenu, a drugi redak boju poteza na plavu. Sada imamo dvije aktivne postavke: ispunjavanje crvenih i plavih poteza. Kao što ste očekivali, što god se naš objekt nalazio u sljedećem retku, bit će ispunjen crvenom bojom i imati plave poteze (ako je primjenjivo). Možete nastaviti ispitivati ​​sliku na ovaj način i shvatit ćete logiku.

Evo nekoliko osnovnih svojstava i postavki koje se često koriste:

Postavke stila

ispuniti () - Postavlja boju ispune objektima. Ova se postavka koristi i za bojanje tekstova. Za sada trebamo znati samo sljedeću upotrebu:

• fill (r, g, b) - Vrijednosti crvene, zelene i plave kao cijeli broj
• fill (r, g, b, a) - Dodatna alfa vrijednost, max je 255

noFill () - Postavlja boju ispune na prozirnu.

udarac () - Postavlja boju poteza objektima. Svojstvo poteza primjenjivo je na crte i obrube oko predmeta. Za sada trebamo znati samo sljedeću upotrebu:

• potez (r, g, b) - Vrijednosti crvene, zelene i plave kao cijeli broj.
• hod (r, g, b, a) - Dodatna alfa vrijednost, max je 255

noStroke () - Uklanja moždani udar.

potezna težina () - Postavlja širinu poteza. Upotreba:

• strokeWeight (x) - x je cijeli broj i predstavlja širinu poteza u pikselima.

pozadina () - Postavlja boju pozadine. Za sada trebamo znati samo sljedeću upotrebu:

• pozadina (r, g, b) - Vrijednosti crvene, zelene i plave kao cijeli broj.
• pozadina (r, g, b, a) - dodatna alfa vrijednost, max je 255

Postavke poravnanja

način elipse () - Postavlja gdje uzeti kao referentnu točku poravnavajuće elipse. Upotreba:

• ellipseMode (mode) - parametar je 'mode', evo dostupnih parametara:
  • CENTAR (zadano): Uzmite središte kao referentnu točku.
  • RADIJUS: Ovo također uzima središte kao referentnu točku, ali u ovom načinu vrijednosti w i h koje navedete tretiraju se kao polovice (tj. Radijus umjesto promjera)
  • KUT: Uzima gornji lijevi kut kao referentnu točku.
  • KUTOVI: Prva dva parametra (x i y) postavlja kao mjesto gornjeg lijevog kuta, a zadnja dva parametra (w i h) kao mjesto donjeg lijevog kuta elipse. Dakle, ovaj način rada, 'širina' i 'visina' nisu bitni. Razmišljanje kao elipsu (x_tl, y_tl, x_br, y_br) u ovom slučaju ima više smisla.

rectMode () - Postavlja gdje uzeti kao referentnu točku poravnavajući pravokutnike. Upotreba:

• rectMode (mod) - parametar je 'način', evo dostupnih parametara:
  • SREDIŠTE: Uzmite središte kao referentnu točku.
  • RADIJUS: Ovo također uzima središte kao referentnu točku, ali u ovom načinu vrijednosti w i h koje navedete tretiraju se kao polovice
  • KUT (zadani): Uzima gornji lijevi kut kao referentnu točku.
  • KUTOVI: Prva dva parametra (x i y) postavlja kao mjesto gornjeg lijevog kuta, a zadnja dva parametra (w i h) kao mjesto donjeg lijevog kuta elipse. Dakle, ovaj način rada, 'širina' i 'visina' nisu bitni. Razmišljanje o tome kao rect (x_tl, y_tl, x_br, y_br) u ovom slučaju ima više smisla.

Postavke povezane s tekstom

textSize () - Postavlja veličinu fonta teksta. Upotreba:

• textSize (veličina) - cjelobrojna vrijednost željene veličine.

textLeading () - Postavlja visinu retka vaših tekstova. Upotreba:

• textLeading (lineheight) - pikselska vrijednost razmaka između redaka.

textAlign () - Postavlja gdje se uzima kao referentna točka za poravnavanje tekstova. Upotreba.

• textAlign (alignX) - 'alignX' služi za vodoravno poravnanje. Dostupno: LIJEVO, SREDINA, DESNO
• textAlign (alignX, alignY) - 'alignY' služi za okomito poravnanje. Dostupno: GORNJI, DONJI, SREDIŠNJI, OSNOVNI.

Animacije

Do sada smo naučili crtati predmete i tekstove. Ali problem kod njih je što su statični. Kako ih sada natjerati da se kreću? Jednostavan, umjesto davanja koordinata kao cijelih brojeva, koristimo varijable kako bismo ih mogli povećavati / smanjivati . Ima smisla? Pogledajte sljedeći kod:

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

Vidite li kako smo upravljali animacijom? Postavili smo x i y kao globalne varijable i njihovu početnu vrijednost na 0. U našoj petlji za crtanje stvorili smo elipsu, boju ispune postavili na crvenu, boju poteza na plavu i koordinate na x i y. Kada povećavamo x i y, lopta jednostavno mijenja svoje mjesto. Ali postoji problem s ovim kodom, možete li ga primijetiti? Kao lak izazov za sebe, pokušajte shvatiti u čemu je problem i testirajte ga. Evo ishoda:

Moja namjera da dopustim da se to dogodi bila je da vas upoznam kako funkcionira petljasta priroda Obrade. Pogledajte primjer u odjeljku 'Crtanje bloka', sjećate li se zašto smo dobili '1 1 1 ...' umjesto '1 2 3 ...'? Isti razlog zašto lopta ostavlja tragove iza sebe. Svaki put kad se blok izvlačenja ponovi, x i y se povećavaju za 5 i stoga se lopta precrta na 5 piksela prema dolje i udesno. Međutim, lopta je izvučena iz prethodnih ponavljanja i dalje ostaje vidljiva. Kako da ih natjeramo da odu? Ima li nagađanja?

Da bismo se riješili tragova koje lopta ostavlja za sobom, jednostavno uklanjamo pozadinu (255) iz bloka za postavljanje i zalijepimo da bude prva linija retka. Kad je naš pozadinski kod bio u bloku za postavljanje, pokrenuo se jednom na početku, čineći našu pozadinu bijelom. Ali to nije dovoljno, potreban nam je kako bismo postavili pozadinu na bijelu na svakoj petlji kako bismo pokrivali kuglice izvučene iz prethodnih petlji. Pozadina je prva linija što znači da se prva izvodi, ona postaje osnovni sloj. Na svakoj je petlji naše platno obojeno bijelom bojom, a novi elementi crtaju se na vrhu bijele pozadine. Dakle, nemamo nikakve oznake.

To je ideja koja stoji iza animiranja stvari u Obradi, programskog manipuliranja koordinatama objekata kako bi se promijenilo njihovo mjesto. Ali kako ćemo raditi otmjene stvari, poput držanja lopte na ekranu? Ili možda provođenje gravitacije? Naučit ću kako to raditi u sljedećem dijelu ovog članka. Učit ćemo pokušavajući i gradeći. Naučit ćemo kako to učiniti i odmah ih primijeniti na našu igru. Na kraju ćemo imati cjelovitu, igrivu i nadamo se zabavnu igru.

Interakcije tipkovnice i miša

Interakcije tipkovnice i miša u Obradi su vrlo jednostavne i jednostavne. Postoje metode koje možete pozvati za svaki događaj, a ono što napišete unutra izvršit će se jednom kada se događaj dogodi. Također postoje globalne varijable kao što su mousePress i keyPress koje možete koristiti u bloku izvlačenja da biste iskoristili prednost petlje. Evo nekoliko metoda s objašnjenjima:

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

Kao što vidite, prilično je jednostavno provjeriti klikne li miš ili koja se tipka pritiska. Međutim, dostupno je više opcija za varijable pritisnute mišem i ključ koda. Dostupne opcije za mišPritisnuto su LIJEVO, DESNO i SREDIŠTE. Postoji mnogo više dostupnih za kod ključa ; GORE, DOLJE, LIJEVO, DESNO, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC i DELETE.

Jedno što treba znati o varijablama miša, a to ćemo puno koristiti, je kako dobiti koordinate miša. Da bismo dobili točne koordinate kursora, možemo koristiti mišX i plašljiv varijable izravno u bloku draw (). I na kraju, ali ne najmanje važno, postoji mnogo drugih korisnih metoda koje biste trebali pogledati. Svi su dokumentirani u Obrada reference .

Zaključak

Već biste se trebali upoznati s Obradom. Međutim, ako se ovdje zaustavite, sve ovo znanje hoće letjeti daleko. Toplo vam preporučujem da i dalje vježbate, poigravajući se onim što ste naučili. Da bih vam pomogao vježbati, pružit ću vam dvije vježbe. Trebali biste se potruditi da to učinite sami. Ako zapnete, Google i Obrada reference trebali biti vaši najbolji prijatelji. Dati ću kod za prvi, ali gledanje u njih trebalo bi biti zadnje što trebate učiniti.

Preporučena vježba 1

Trebao bi napraviti 4 kuglice s različite boje , počevši od 4 ugla zaslona putujući kroz centar s različite brzine . Kada kliknete i držite tipku miša, kuglice bi trebale zamrznuti . A kad pustite miša, loptice se mogu vratiti u početni položaj i nastaviti se kretati. Dakle, tražim nešto slično ovaj .

Nakon što sami isprobate vježbu, možete provjeriti kod ovdje .

Preporučena vježba 2

Sjetite se slavnih DVD čuvar zaslona koji se DVD logo odbija oko zaslona i svi smo očajnički čekali da udari u kut? Želim da kopirate taj čuvar zaslona, ​​ali samo koristeći pravokutnik umjesto DVD logotipa. Kada pokrenete aplikaciju, zaslon bi trebao biti crn, a pravokutnik bi se trebao pokretati na slučajnom mjestu. Svaki put kad pravokutnik udari u kut, trebao bi promijeniti boju (i očito smjer). Kad pomičete miša, pravokutnik bi trebao nestati, a boja pozadine bi trebala postati bijela (to je screensaver, zar ne?). U ovom članku neću dati šifru za ovu vježbu. Trebali biste se potruditi da ga implementirate, a kôd će biti naveden u drugom dijelu ovog članka.

Drugi dio konačnog vodiča za obradu, korak-po-korak tutorial za izgradnju jednostavne igre, objavljeno je.