Jeffrey Cross
Jeffrey Cross

Kôdno polje: Uklopite (arrailist) ciljeva

Posljednji Codebox pokazao je kako koristiti svoju web kameru da zamijeni miša čarobnim štapićem (vrsta). U primjeru, premještanje štapa u kružno područje zaslona uzrokovalo je da zrake koje emitiraju prelaze na slučajnu boju. Ovaj se članak temelji na tom primjeru i pokazuje kako stvoriti sofisticiranije interakcije. Umjesto jednog, stacionarnog cilja, ova skica predstavlja brojne mete. Dodirivanje cilja (riječ "šešir") pretvara ga u drugu riječ (u ovom slučaju, "zec"), kao što je prikazano ovdje:

Skica prikazuje kako stvoriti i upravljati popisom interaktivnih objekata. Bez obzira pišete li igre, sustave čestica ili čarobnu emisiju s kontrolom Arduino (u redu, dakle, ja sam nagovijestio svoju ruku - ovo je tema budućeg posta), to su alati koje ćete uvijek iznova koristiti ići dalje s obradom.

Postavite skicu

Prvo prvo - hajde da nacrtamo i pokrenemo skicu. Trebat će vam dvije datoteke za ovaj projekt: magic_words.pde i Target.pde, Prvo pokrenite Obradu i zalijepite sljedeći kod za magic_words.pde u glavni prozor.

Možete označiti prvi redak, pomicati se do kraja, a zatim pomoću Ctrl-c kopirati kod (tvrdi) ili možete kliknuti na tu vezu (magic_words.pde), pritisnite Ctrl + a da biste odabrali cijeli tekst, i zatim pomoću Ctrl + c kopirajte (lakše). Kada kopirate kôd, vratite se na Obradu i zalijepite ga u glavni prozor. Zatim upotrijebite “File -> Save” iz trake izbornika (ili samo Ctrl + s) i spremite datoteku koristeći naziv “magic_words” (Obrada će automatski dodati “.pde”).

Evo Target.pde, druga datoteka koju trebate:

Kopirajte kôd u spremnik za lijepljenje koristeći metodu koju želite (tj. Sve to označite ili izravno povežite s datotekom). Ovaj put morate izraditi novi kartica, što je način na koji vam obrada omogućuje upravljanje skicama s više datoteka.(Ovo je vrsta izrade nove kartice u prozoru preglednika).

Da biste stvorili karticu, kliknite strelicu za usmjeravanje udesno u gornjem desnom kutu prozora Obrada. Obrada će vas pitati za novi naziv datoteke - unesite "Cilj." Kada unesete naziv datoteke, pojavit će se nova kartica na koju možete zalijepiti kôd. Sljedeći dijagram trebao bi vam dati korake koje trebate:

Zadnje što trebamo učiniti je stvoriti lijep font za cilj. (Fontovi su opisani u 6. poglavlju Početak rada s obradom). Zašto pitaš? Iz kutije, Obrada ima samo jednostavnu naredbu tekst() koji će prikazati tekst, ali ne možete odrediti koliko prostora zauzimaju na zaslonu (što će biti važno, kao što ćemo vidjeti za minutu). Osim toga, oni su samo obični stari Arial font, tako da nisu baš zanimljivi.

Da biste to zaobišli, možete koristiti izbornik Alati da biste stvorili novu datoteku fonta za svoju skicu. Nakon što uvezete datoteku pomoću loadFont () naredbu, moći ćete se igrati s tipografijom. (W00t!). U svakom slučaju, proces izrade fonta je jednostavan. Najprije kliknite "Alati -> Stvori font ..." iz trake izbornika, koji će se pojaviti na sljedećem zaslonu:

Zatim, sve što trebate učiniti je odabrati font koji želite (odabrao sam "Baskerville-Bold"; ako želite koristiti drugi font, morat ćete promijeniti naziv datoteke fonta u magic_words.pde). Primijetite da se naziv datoteke na dnu okvira mijenja dok odabirete različite opcije - to je naziv datoteke koji ćete morati koristiti u skici; Obrada će automatski dodati ".vlw" na kraj.

Nakon što ste učitali dvije datoteke i instalirali font, pokrenite skicu. (Kao i kod većine projekata iz ove serije, trebat će vam i web-kamera.) Koristeći štapić (ili bilo koji drugi prikladan pokazivač) iz posljednjeg koda, trebali biste moći prevući različite ciljeve.

Sljedeća dva odjeljka opisuju kako skica djeluje. Prvi dio opisuje kôd u datoteci Target.pde, koji se koristi za stvaranje ciljnog objekta, glavnog gradivnog bloka skripte. Drugi dio opisuje kako magic_words.pde datoteka koristi i ArrayList za upravljanje višestrukim Target objektima.

Ciljani objekt

Poglavlje 9 Početak rada s obradom uvodi objekte i objektno orijentirano programiranje (OOP). Za kratak pregled, objekt je građevni blok koji se koristi za stvaranje sofisticiranijih programa. Objekti sadrže dva osnovna elementa: polja, koje su varijable koje određuju trenutno stanje objekta, i metode, koje su samo funkcije koje čine objekt nešto učiniti. Ključni dio snage OOP-a je da vam pomaže da razmišljate o svom kodu na fizički način potičući vas da razmišljate u smislu jednostavnijih komponenti.

Da biste koristili objekte, prvo stvorite klasa (ili nekoliko klasa - možete koristiti mnogo različitih objekata), što je kao predložak koji opisuje sve što objekt može učiniti. Kada definirate klasu, upotrebljavate novi naredbu za stvaranje objekata koje možete koristiti u skicama. Ova razlika može biti pomalo zbunjujuća, stoga o tome razmišljajte na ovaj način. Ako ste pečeni kolač, počeli biste s receptom. Ovo je kao klasa - imate opis, ali i sam kolač. Da biste dobili tortu - ili predmet - morate slijediti recept prije nego što imate što jesti. Stvaranje novih objekata posao je obrade novi naredba - stvara novu varijablu objekta pozivajući posebnu metodu nazvanu konstruktor, Konstruktor inicijalizira varijable objekta i općenito ga priprema za akciju; jedina razlika između nje i bilo koje druge metode je da ima isti naziv kao i sam razred.

U redu, dovoljno pregleda. Razgovarajmo o kodu. Kao što smo već spomenuli, ciljna klasa je građevni blok. Polja uključuju:

  • Trenutna pozicija, prikazana varijablama x i y
  • Brzina i smjer, prikazani varijablama dx i dy, To su samo nasumično izabrane vrijednosti.
  • Širina i visina, kao što su prikazane varijablama w i h
  • Veličina fonta (više o tome u malo)
  • Zastava koja označava da li štapić dodiruje cilj (zastava je programski izraz za svaku varijablu koja se koristi za predstavljanje određenog statusa, npr na ili od)
  • Trenutni tekst cilja (tj. "Šešir" ili "zec")

Nakon obaveznog Cilj() konstruktor (jedini zadatak je postaviti vrijednosti za befofe i poslije teksta za cilj), metode uključuju:

  • korak(), što čini cilj kretanje oko pozornice. Ovo radi dodavanjem dx i dy prema x i y varijable.
  • boja(), koji privlači metu na pozornicu (x, y) položaj
  • detectCollision (), koja određuje je li štap sudario s metom
  • setBox (), koji ažurira varijable širine i visine cilja na temelju toga da li je dodirnuo štapić
  • preklopni (), koja mijenja ciljnu riječ. (tj., ako je trenutna riječ "Hat", tada žabica čini ga "zecom", i obrnuto
  • na pozornici(), koja vraća zastavicu koja označava je li cilj odletio s vidljive površine zaslona

Prve dvije metode su prilično jednostavne, ali preostale metode, koje se koriste za otkrivanje sudara, zaslužuju malo više pozornosti. Ako od početnog koda zapamtite, otkrivanje sudara je ime za sve načine na koje možete odrediti da se dvije stvari sijeku na zaslonu. U primjeru izvornog štapa, imali smo kružni cilj, pa smo koristili formulu jednostavne udaljenosti kako bismo odredili jesu li koordinate štapića unutar radijusa mete. U ovom primjeru koristimo pravokutni cilj. Da bi stvari postale malo kompliciranije, cilj mijenja veličinu kad ga želi dotaknuti, pa nam trebaju neke metode podrške kako bismo bili sigurni da su sve varijable u skladu s trenutnim stanjem cilja. Sljedeći dijagram prikazuje različite dijelove koji su u igri:

S ovim dijagramom prilično je lako napisati kôd za detectCollision ():

// Određuje određenu x, y koordinatu unutar okvira boolean detectCollision (float cx, float cy) {boolean retVal = false; ako ((cx> x) && (cx <(x + w)) && (cy> (y-h)) && (cy <y)) {retVal = true; } povratni povrat; }

Konačno, na pozornici() određuje je li meta još uvijek unutar vidljivog stupnja. Kada se jednom odleti, reciklira se stavljanjem na neko novo mjesto s novom brzinom i smjerom. Utješno je primijetiti da je, unatoč složenosti, većina tog koda gotovo identična s Primjerom 5-17: Granice pravokutnika u Početku rada s obradom.

Arrailist ciljeva

Sada kada smo prošli kroz ciljnu klasu, pogledajmo kako je koristiti. Kao što smo na početku spomenuli, glavni cilj ovog primjera bio je pokazati kako možete dinamički upravljati s više objekata. Dok su standardni nizovi (opisani u poglavlju 10 Početak rada s obradom) odlični za mnoge stvari, oni nisu vrlo dinamični jer nakon što ste odredili koliko elemenata imaju, zaglavili ste s tim zauvijek.

Na primjer, pretpostavimo da želite imati hrpu ciljeva, ali umjesto da ih reciklirate kao što smo ovdje učinili, jednostavno ste ih željeli izbrisati. U standardnom nizu ne možete izbrisati elemente. Ako ste počeli s 5, uvijek imate 5, bez obzira na sve. Dakle, ako želite nešto "izbrisati", morate imati neku vrstu nespretnog zaobilaznog rješenja. Ili, na drugoj strani, pretpostavimo da ste imali program u kojem ste obično imali pregršt stavki za upravljanje, ali u nekim slučajevima možda imate mnogo tisuća. Pomoću standardnog niza svaki put morate stvoriti prostor za tisuće, što troši memoriju i može smanjiti vaše skice.

obrada je ArrayList je način da se zaobiđu ta ograničenja. Umjesto jednostavnog tipa podataka, kao što je float ili int, ArrayList je klasa građevnog bloka za upravljanje drugim objektima. Ima metode za dodavanje novih stavki, brisanje postojećih, pronalaženje broja stavki na popisu i tako dalje. Osim što je stvarno koristan alat, rad s programom ArrayList će vas upoznati s tehnikama koje ćete koristiti u drugim, sofisticiranijim klasama, kao što su HashMaps (nešto što ćemo istražiti u budućim porukama). Dakle, prijeđite na magic_words.pde i pogledajmo kôd.

Stvaranje ArrayList-a je prilično jednostavno i radi se u ovom retku; imajte na umu kako ne moramo prijaviti veličinu:

Ciljevi ArrayList; // ArrayList je dinamičan način za upravljanje nizovima

Nakon što je deklarirana, možemo početi dodavati neke nove objekte u ArrayList, što radimo s dodati() metoda. Slijedi isječak koda u izborniku postaviti() metoda koja dodaje početne ciljeve:

target = new ArrayList (); // Kreirajte novi popis za (int i = 0; i <N; i ++) {target.add (novi Target ("Hat", "Rabbit")); }

Ovaj isječak ima nekoliko zanimljivih točaka. Prvo, ona prikazuje sintaksu za pozivanje metode, koja je object_variable.metoda klase (popis argumenata). Drugo, pokazuje kako možete koristiti objekt kao argument za ArrayList. Primijetite kako koristimo novi naredba u popisu argumenata - koja će stvoriti novu Target objektnu varijablu i proslijediti je na popis. Konačno, isječak pokazuje kako sve to možemo učiniti unutar petlje. Mogli bismo dodati 10, 100 ili 10.000 objekata - veličina popisa je potpuno dinamična.

Sljedeći isječak, koji se pojavljuje u crtati() metoda, pokazuje kako možemo koristiti dobiti() metoda za povlačenje stavke iz popisa ArrayList:

za (int i = 0; i <target.size (); i ++) {Target t = (Target) target.get (i); // Dohvati i'th cilj iz niza t.paint (); // Paint // Provjeri kolizije ako (t.detectCollision (wandX, wandY)) {if (! T.inTarget) {t.toggle (); t.inTarget = true; }} else {t.inTarget = false; } t.step (); // Unaprijedite ga na zaslonu // Ako je trenutni cilj pomaknut s pozornice, izbrišite ga s popisa i stvorite novi cilj ako (! T.onStage ()) {target.remove (i); target.add (novi cilj ("šešir", "zec")); }}

Najvažnija linija ovdje je Ciljni t = (Ciljni) ciljevi.get (i);, Ovdje se događa nekoliko stvari. Prvo je da stvaramo novu Target varijablu koju zovemo t, Ovaj put, međutim, ne koristimo novi naredba. Zašto pitaš? To je zato što objekt koji pokušavamo pristupiti već postoji - stvoren je ranije u programu postaviti() metoda. Sve što radimo ovdje je dohvaćanje. Drugo, imamo tu vrstu čudne sintakse (Cilj), To je način na koji Obrađujemo koji tip varijable je da očekujemo dohvatiti. To se naziva "lijevanje" i zahtijeva malo više objašnjenja.

Ako se sjetite, ArrayList je generički alat - mogli bismo ga koristiti s Target varijablom, klasom Jitterbug o kojoj se govori u 10. poglavlju Početak rada s obradom ili bilo kojom drugom varijablom klase koju bismo mogli stvoriti u budućnosti. Međutim, obrada (i Java, jezik na kojem se temelji) ne može se baviti generičkim objektom. To zahtijeva da svakoj varijabli dajemo točan tip kada ga deklariramo. Dodavanje (Cilj) prema naprijed dobiti() naredba je ono što to čini - govorimo Obradi "Hej, povlačimo objekt" Cilj ". Vidjet ćete to kao lijevanje u drugim programskim resursima.

Konačno, imamo targets.get (i) dio linije. Ovo samo govori “povuci jaFrom th stavke iz ciljeva ArrayList.

Nakon što doista dohvatimo varijablu t, možemo pozvati čitanje njegovih varijabli, nazvati njezine metode i općenito učiniti da nam ponude ponude. U ovom primjeru prvo pozivamo boja() način crtanja cilja na zaslonu. Zatim provjeravamo da li je štapić dodiruje (kao što ćete zapamtiti iz posljednjeg koda, položaj štapa je predstavljen varijablama wandX i wandY). Ako dođe do sudara, prvo provjerimo je li štapić već unutar cilja. (Drugim riječima, štap se mogao sudariti s objektom na ranijoj iteraciji postaviti() i dalje se nalazite unutar okvira za ciljanje.) Ako nije (tj. prvi put udara u okvir cilja), prebacujemo tekst i postavljamo inTarget zastava. Ako je štapić već u ciljanju, jednostavno postavimo ciljnu zastavicu na lažnu, što sprječava cilj od izmjeničnog stanja na svakoj iteraciji crtati(), Sljedeća naredba, t.step (), jednostavno povećava cilj x i y pozicije. Konačno, posljednji ako blok provjerava da li cilj više nije vidljiv na pozornici. Ako nije (tj. Lutao je izvan vidljivog područja zaslona), cilj je uklonjen iz popisa ArrayList pomoću ukloniti() Postupak; novi cilj se zatim dodaje na novo slučajno novo mjesto.

Fijuk! To je mnogo apstraktnih stvari, ali vrijedi razumjeti jer ćete te tehnike koristiti iznova i iznova. Bez obzira koristite li ArrayList, HashMap ili neku drugu opću podatkovnu strukturu, razumijevanje tih osnovnih koraka - stvaranje novog objekta, pohranjivanje u generičku strukturu podataka i njegovo vraćanje - ključni su za izradu sofisticiranijih programa.

U sljedećem Codeboxu napravit ćemo pauzu od web-kamere i istražiti kako dobiti sofisticiraniji unos od korisnika pomoću stvarno kul biblioteke pod nazivom controlP5. Oh, i fraktali. I mi ćemo to učiniti.

Više: Pogledajte sve stupce Codeboxa

Udio

Ostavite Komentar