Sa võitled igavuse ja kihelusega oma loovuse kasutamisel. Tahate ehitada midagi, midagi visuaalselt muljetavaldavat, midagi kunstipärast. Või äkki soovite õppida programmeerimist ja teha midagi muljetavaldavat nii kiiresti kui võimalik. Kui jah, siis on töötlemiskeel õige tee.

Kõigist programmeerimiskeeltest, millega olen seni töötanud, oli Processing kahtlemata üks meelelahutuslikumaid. See on otsekohene keel - seda on lihtne õppida, mõista ja kasutada, kuid see on siiski väga võimas. See on peaaegu nagu te maaliksite koodiridadega tühjale lõuendile. Teie loovuse piiramiseks pole mingeid rangeid reegleid ega juhiseid, ainus piir on teie kujutlusvõime.

Kolledžis olin õpetaja abiks programmis, mis kogus keskkooliõpilasi ja õpetas neile töötlemist. Enamikul neist polnud tugevat programmeerimistausta, mõned polnud varem isegi ühte koodirida kirjutanud. Ainult viie päeva jooksul eeldati, et nad õpivad keelt ja ehitavad ise oma lihtsaid mänge. Edukus oli peaaegu sada protsenti, ebaõnnestumisi kohtasime harva. Selles artiklis me täpselt teeme. Võtsin kogu programmi kaheks osaks. Esimene osa, ma räägin keelest. Annan põhiülevaate, ülevaate töötlemiseks ja annan mõned näpunäited. Seejärel ehitame järgmises osas samm-sammult lihtsa mängu, iga sammu selgitatakse üksikasjalikult. Teisendan ka mängu koodi JavaScripti kasutades p5js, et meie mängu saaks käivitada veebibrauseris.

Mida peaksite juba teadma

Nende artiklite mõistmiseks ja hõlpsaks järgimiseks peaksite omama algteadmisi programmeerimisest, kuna ma ei räägi programmeerimise alustest. Enamasti ei puuduta ma ühtegi arenenud programmeerimiskontseptsiooni, nii et pealiskaudne arusaam sobib. On mõned osad, kus ma räägin mõnest madalama taseme ideest ja kontseptsioonist, näiteks objektorienteeritud programmeerimine (OOP), kuid need ei ole üliolulised. Need on mõeldud uudishimulikele lugejatele, kes on huvitatud keele ülesehitusest. Kui te ei soovi sellest teada, võite need osad lihtsalt vahele jätta. Peale selle peaks teil olema ainult ambitsioon õppida seda vinget keelt ja entusiasmi oma mängu loomiseks!

Kuidas jälgida

Olen alati programmeerimise õppimise poolt proovimise ja katsetamise poolt. Mida varem sukeldute oma mängu, seda kiiremini saate töötlemisega hakkama. Nii et see on minu esimene ettepanek, proovige iga sammu oma keskkonnas. Töötlemisel on lihtne ja hõlpsasti kasutatav IDE (st koodiredaktor), see on ainus asi, mille järgimiseks peate alla laadima ja installima. Saate selle alla laadida siit .

Nii et alustame!

Mis on töötlemiskeel?

See osa sisaldab lühikest tehnilist ülevaadet keelest, selle struktuurist ning mõningaid märkusi koostamis- ja täitmisprotsessi kohta. Üksikasjad hõlmavad mõningaid kõrgemaid teadmisi programmeerimise ja Java-keskkonna kohta. Kui teil pole praegu detailide vastu midagi ja te ei jõua oma mängu õppimist ja kodeerimist oodata, võite minna jaotisse „Töötlemise alused”.

Töötlemine on visuaalne programmeerimiskeel, mis võimaldab niiöelda koodidega visandada. Kuid see pole päris omaette programmeerimiskeel, seda nimetatakse neile Java-esque programmeerimiskeeleks, mis tähendab, et keel on ehitatud Java platvormi peale, kuid pole iseenesest just Java. See põhineb Java-l ja kogu teie kood töödeldakse ja teisendatakse otse Java-koodiks, kui vajutate käivitamisnuppu. Java PAppleti klass on kõigi visandite töötlemise põhiklass. Näite saamiseks võtame paar töötlemiskoodi põhiplokki:

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

Need koodiplokid muudetakse selliseks:

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

Näete, et töötlemiskoodi plokk oli pakitud klassiga, mis ulatub Java PAppletist. Seetõttu käsitletakse kõiki töötluskoodis määratletud klasse, kui neid on, siseklassidena.

Asjaolu, et töötlemine on Java-põhine, annab meile palju eeliseid, eriti kui olete Java arendaja . Süntaks pole mitte ainult tuttav, vaid annab ka võimaluse teha näiteks visandeid Java-koodist, teekidest, JAR-failidest, kasutada oma apletide töötlemise otse Java-rakendustes, määratleda klasse ja kasutada standardseid andmetüüpe, näiteks int , float, char ja nii edasi. Soovi korral saate oma töötlemiskoodi isegi otse Eclipse'ist kirjutada veeta aega selle seadistamiseks. Üks asi, mida te ei saa teha, on AWT- või Swing-komponentide kasutamine visandite visandites, kuna need on vastuolus töötlemise silmusloomusega. Kuid ärge muretsege, me ei tee selles artiklis midagi sellist väljamõeldud asja.

Töötlemise alused

Töötlemiskood koosneb kahest põhiosast, seadistamine ja joonistama plokid. Häälestusblokk töötab üks kord, kui kood käivitatakse, ja joonistusplokid töötavad pidevalt. Töötlemise peamine idee on see, mida kirjutate loosimisplokis, teostatakse 60 korda sekundis ülevalt alla, kuni teie programm lõpeb . Ehitame kõik, kasutades just seda ideed ära. Paneme oma objektid liikuma, hoiame punkte, tuvastame kokkupõrkeid, rakendame raskust ja teeme selle funktsiooni abil peaaegu kõike muud. See värskendusring on meie projekti südamelöök . Hilisemates jaotistes selgitan, kuidas selle südamelöögi abil oma koodi ellu äratada. Kõigepealt lubage mul tutvustada teile IDE töötlemist.

IDE töötlemine

Kui olete selle hetkeni lugenud ja pole siiski IDE töötlemist alla laadinud, jätkake ja tee seda . Kogu artiklis toongin välja mõned lihtsad ülesanded, mida saate ise proovida. Harjutada saate ainult siis, kui IDE on töös ja töötab. Siin on töötleva IDE lühitutvustus. See on väga lihtne ja iseenesestmõistetav, nii et jätan selle lühikeseks.

Nagu arvata võite, tehke käivitamis- ja peatamisnupud vastavalt soovitusele. Kui klõpsate nupul jooksma nupp, teie kood kompileeritakse ja käivitatakse. Oma olemuselt ei lõpetata töötlemisprogramme kunagi, need töötavad igavesti, kuni neid häiritakse. Võite selle programmiliselt lõpetada, kuid kui te seda ei tee, võite kasutada seda peatus nuppu.

Nupp, mis jooksu ja peatuse paremal pool näeb välja nagu liblikas, on silur . Siluri kasutamine vajab sellele pühendatud tervet artiklit. See jääb selle artikli reguleerimisalast välja, nii et saate seda praegu eirata. Silurinupu kõrval olev rippmenüü on koht, kuhu modi lisada / määrata. Modifikatsioonid pakuvad teile teatud funktsionaalsust, võimaldavad teil kirjutada koodi Androidi jaoks, lubavad teil kirjutada koodi Pythonis ja nii edasi ja nii edasi. Modifikatsioonid jäävad samuti reguleerimisalast välja, nii et saate seda hoida Java vaikerežiimis ja samuti ignoreerida.

Koodiredaktori aken on koht, kus teie visandid tavaliselt töötavad. Pildil on see tühi, kuna me pole määranud ühtegi omadust, näiteks suurust või taustavärvi, või me pole midagi joonistanud.

Koodiredaktorist pole palju rääkida, see on lihtsalt koht, kuhu oma koodi kirjutate. Seal on reanumbrid (!) Processingu vanemates versioonides seda ei olnud ja te ei kujuta ette, kui õnnelik ma neid nähes olin.

Allpool olev must kast on konsool . Kasutame seda kraami välja printimiseks kiireks silumiseks. The vigu Konsooli kõrval oleval vahekaardil kuvatakse teie vead. See on ka uus kasulik funktsioon, mis kaasnes Processing 3.0-ga. Vanemates versioonides trükiti vead konsooli ja neid oli raske jälgida.

Häälestusblokk

Nagu varem öeldud, käivitatakse häälestusplokid programmi käivitamisel üks kord. Saate seda kasutada seadistuste tegemiseks ja asjadeks, mida soovite käivitada ainult üks kord, näiteks piltide või helide laadimiseks. Siin on näide seadistusplokist. Käivitage see kood oma keskkonnas ja vaadake tulemusi ise.

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

Stiiliga seotud meetodeid (taust, täitmine, joonistamine) selgitatakse omaduste ja sätete jaotistes. Praegu peate teadma, kuidas siin seatud seaded ja konfiguratsioonid mõjutavad kogu meie visandit. Siin kirjutatud koodide abil määratakse kogu visandis rakendatavad põhireeglid. Selles jaotises peaksite mõistma ka allpool loetletud meetodeid:

suurus () - Nagu nimigi ütleb, kasutatakse seda funktsiooni meie visandi suuruse konfigureerimiseks. See peab olema seadistuskoodi ploki esimesel real. Seda saab kasutada järgmistes vormides:

• suurus (laius, kõrgus);
• suurus (laius, kõrgus, renderdaja);

Laiuse ja kõrguse väärtused võiks esitada pikslites. Funktsioon Suurus aktsepteerib kolmandat parameetrit renderdajat, mida kasutatakse selleks, et määrata, millist renderdamismootorit meie visand kasutab. Vaikimisi on renderdaja väärtuseks seatud P2D. Saadaval renderdajad on P2D (töötlemine 2D), P3D (töötlemine 3D, tuleks kasutada, kui teie visandid sisaldavad 3D graafikat) ja PDF (2D graafika joonistatakse otse Acrobati PDF-faili. Rohkem teavet leiate siin ). P2D ja P3D renderdajad kasutavad OpenGL-iga ühilduvat graafikariistvara.

Täisekraan() - Alates töötlemisest 3.0 saab funktsiooni size () asemel nüüd kasutada täisekraani funktsiooni. Täpselt nagu funktsioon size (), peaks see olema ka häälestusploki esimesel real. Kasutamine on järgmine:

• Täisekraan();
• täisekraan (kuva);
• täisekraan (renderdaja);
• fullScreen (kuva, renderdaja);

Kui kasutate seda ilma parameetriteta, töötab teie töötlusjoonis lihtsalt täisekraanil ja töötab teie põhiekraanil. Parameetrit ‘display’ kasutatakse selleks, et määrata, millisel kuval teie visand käitatakse. Näiteks kui ühendate arvutiga välised monitorid, saate kuvatavaks muutujaks seada 2 (või 3, 4 jne) ja teie visand töötab seal. Parameeter ‘renderdaja’ on kirjeldatud ülaltoodud suuruse () osas.

Seadete blokeerimine

See on veel üks funktsioon, mis tutvustatakse uue töötlemise väljaandega. See on koodiplokk, täpselt nagu seadistamine ja joonistamine. See on kasulik, kui soovite määratleda muutuvate parameetritega meetodid size () või fullScreen (). Selles koodiplokis on vaja määratleda ka suurus () ja muud stiiliatunnused, näiteks sile (), kui kasutate mõnda muud keskkonda kui Processing enda IDE, näiteks Eclipse. Kuid te ei vaja seda enamikul juhtudel, kindlasti mitte selles artiklis.

Joonista plokk

Loosimisplokist pole midagi erilist rääkida, kuid kõik on selles eriline. Joonista plokk on koht, kus kogu maagia juhtub. See on teie programmi süda, peksmine 60 korda sekundis. See koodiplokk sisaldab kogu teie koodiloogikat. Kõik teie kujundid, esemed jms kirjutatakse siia.

Suurem osa koodist, millest selles artiklis räägime, tuleb viigiplokist, seega on oluline, et saaksite selgelt aru, kuidas see koodiplokk töötab. Et teile demonstratsiooni teha, võite proovida järgmist. Kõigepealt pange tähele, et konsooli saab printida ükskõik millise nupu abil print () või println () meetodid. Prindimeetodid printivad ainult konsooli, println aga prindib ja lisab lõpus uue rea, nii et iga println () prinditakse eraldi ridadena.

Niisiis, heitke pilk järgmisele koodiplokile. Kõigepealt proovige arvata, mida see konsoolis trükib. Seejärel jätkake ja proovige:

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

Kui arvasite “1 2 3 4…”, sain ma teid! See on üks segadusi töötlemisel. Kas mäletate, et seda plokki täidetakse korduvalt? Kui määrate siin muutuja, määratakse see igas silmus ikka ja jälle. Igal iteratsioonil seatakse x väärtuseks 0, suurendatakse 1-ga ja trükitakse konsooli. Seetõttu saame tulemuse “1 1 1 1…”. See näide oli mõnevõrra ilmne, kuid võib olla segane, kui asjad lähevad veidi keeruliseks.

Me ei taha, et x kirjutataks üle, siis kuidas me saame selle saavutada ja saada tulemuse '1 2 3 4 ...'? Kasutades globaalsed muutujad . See pole midagi väljamõeldud, muutuja määratleme ainult väljaspool joonistusplokki, nii et seda ei saa igal iteratsioonil uuesti määratleda. Samuti on muutuja ulatus ulatuslik visandi ulatuses. Vaadake allolevat koodi:

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

Võiksite endalt küsida, kuidas saab väljaspool meie plokke määratletud muutuja töötada? Ja miks me ei kasutanud blokeerimist setup (), kuna see käivitatakse alguses üks kord? Vastus on seotud objektorienteeritud programmeerimise ja ulatusega. Kui te pole tuttav, võite selle lõigu vahele jätta. Vaadake osa, kus ma selgitasin, kuidas koodi töötlemine teisendatakse Java-ks. Kas mäletate, kuidas nad Java klassiga mässitakse? Muutujad, mille kirjutame väljaspool seadistust () ja joonistame (), blokeeritakse ka seetõttu, et neid käsitletakse kui väljad välisklassist, mis murrab meie koodi. X + = 1 kasutamine on sama mis selle kasutamine. X + = 1. See toimib ka meie puhul samamoodi, joonistamise ulatuses () pole defineeritud muutujat x ja otsitakse välist ulatust, mis on seda . Ja miks me ei määranud jaotises setup () oma muutujat x? Kui me seda teeksime, oleks x määratletud ulatus seadistusfunktsiooni ulatus ja sellele ei oleks juurdepääs ploki draw () kaudu.

Kujundite ja tekstide joonistamine

Nüüd teame, kuidas häälestusploki abil oma visandit konfigureerida, ja teame, mida joonistusplokk teeb. Seega on aeg saada natuke visuaalset ja õppida tundma töötlemise lõbusaid osi: kuidas kujundeid joonistada.

Enne kui alustame, peaksite sellest aru saama koordinaatide süsteem . Töötlemisel määrate iga ekraanile joonistatud objekti koordinaadid. Koordinaatide süsteem on pikslites. Alguspunkt (st alguspunkt) on vasakus ülanurgas. Peaksite selle punkti suhtes andma oma koordinaadid. Teine asi, mida peaksite teadma, on see, et igal kujundil on erinev võrdluspunkt. Näiteks on rect () võrdluspunktina ülemine vasak nurk. Ellipsi () puhul on see keskpunkt. Neid võrdluspunkte saab muuta selliste meetoditega nagu rectMode () ja ellipseMode (), mida ma selgitan jaotises Omadused ja seaded. Parema mõistmise hõlbustamiseks on toodud näide.

See artikkel on töötlemise põhiülevaade, nii et me ei puuduta ühtegi keerukat kuju, nagu tipud ega 3D-kujundid. Põhilised 2D-vormid on tegelikult enam kui piisavad, et saaksime oma mängu luua. Joonisel näete kujundite joonistamise näiteid. Igal kujundil on oma süntaks, mis tuleb luua, kuid põhiidee on anda kas selle koordinaadid või suurused või mõlemad. Siin on mõned kujundid, mida peaksite tundma (kõigi allpool toodud väärtuste puhul tähendavad ‘x’ ja ’y’ x ja y koordinaate pikslites, ‘w’ ja ’h’ laiuse ja kõrguse väärtusi ka pikslites):

punkt () - Lihtne punkt, vajab ainult ühte koordinaati. Kasutamine:

• punkt (x, y)
• punkt (x, y, z) - kui kasutate kolme mõõdet.

rida () - joone loomiseks. Saate luua joone, millel on ainult algus- ja lõpp-punkt. Kasutamine:

• rida (x1, y1, x2, y2)
• joon (x1, y1, z1, x2, y2, z2) - juhul, kui kasutate kolme mõõdet.

kolmnurk () - Kolmnurga loomiseks. Kasutamine: kolmnurk (x1, y1, x2, y2, x3, y3)

nelik () - nelinurga loomiseks. Kasutamine: quad (x1, y1, x2, y2, x3, y3, x4, y4)

sirge () - ristküliku loomiseks. Võrdluspunkt on vaikimisi vasakus ülanurgas (vt joonist). Siin on kasutus:

• sirge (x, y, w, h)
• rect (x, y, w, h, r) - ‘r’ tähendab raadiust pikslites nurkade ümardamiseks.
• sirge (x, y, w, h, tl, tr, br, bl) - vastavalt ülemise vasaku, ülemise parempoolse, parema alumise, vasaku alaosa nurkade raadius. See on ka pikslites.

ellips () - ellipsi kuju loomiseks. Seda kasutatakse ka ringi loomiseks, tuleks anda samad laiuse ja kõrguse väärtused. Selle kuju võrdluspunkt on vaikimisi keskpunkt (vt joonist). Siin on kasutus:

• ellips (x, y, w, h)

kaar () - Joonista kaar. Kasutamine:

• kaar (x, y, w, h, start, stop) - ‘start’ ja ‘stop’ kasutatakse kaare joonistamise alustamise ja lõpetamise nurga määramiseks. Väärtused on radiaanides. Kasutada saab selliseid konstante nagu PI, HALF_PI, QUARTER_PI ja TWO_PI.
• arc (x, y, w, h, start, stop, mode) - muutuja ‘mode’ määrab kaare (stringi) renderdamisstiili. Saadaolevad valikud on “AVATUD, AKORD, PIE”. OPEN jätab joonistamata osad piirideta. CHORD lõpetab joonistamata osad äärisega. PIE muudab teie kaare välja nagu sektordiagramm.

Tekstide kuvamine ekraanil sarnaneb kujundite kuvamisega, põhiidee on see, et määraksite koordinaadi, mille juures soovite oma teksti kuvada. Tekstide käsitlemisega on siiski rohkem. Teil on oma tekstide üle parem kontroll pärast jaotist Atribuudid ja sätted, kus saate teada, kuidas seadeid ja atribuute objektidele rakendada. Praegu näitan tekstide kuvamise põhitõdesid. Seda saab teha mitmel viisil, ma näitan ainult hädavajalikku.

tekst () - Kuva tekstid. Kasutamine:

• tekst (c, x, y) - ‘c’ tähendab tähemärki, kuvatakse mis tahes tähtnumbriline märk.
• tekst (c, x, y, z) - kui töötate 3 dimensiooniga.
• tekst (str, x, y) - ‘str’ on kuvatav string.
• tekst (str, x, y, z) - kui töötate 3 dimensiooniga.
• tekst (num, x, y) - ‘num’ on kuvatav arvuline väärtus.
• tekst (num, x, y, z) - kui töötate 3 dimensiooniga.

Atribuudid ja seaded

Esimene asi, mida selles osas tuleks selgitada, oleks objektide omaduste seadmise loogika. Nende omaduste mõned näited võiksid olla täitevärv, taustavärv, ääris, piiri laius, äärise värv, kujundite joondamine, äärisstiilid jne.

Atribuudi määramisel peate meeles pidama, et koodi käivitatakse alates ülevalt alla . Oletame, et määrate atribuudi „täitmine“ punaseks, kõik selle joone alla joonistatud objektid täidetakse punasega, kuni selle kirjutab üle mõni teine ​​täitev omadus. Sama kehtib ka teiste omaduste kohta, kuid pange tähele, et mitte kõik omadused ei kirjuta üksteist üle. Näiteks atribuut „insult” ei kirjuta atribuuti „fill” üle, vaid töötavad koos. Siin on visuaalne esitus, mille abil saate loogikast aru saada:

Nagu pildil näha, määrab esimene rida täitevärvi punaseks ja teine ​​rida löögivärvi siniseks. Nüüd on meil kaks aktiivset seadet: täitke punaseid ja siniseid lööke. Nagu arvata võis, on ükskõik milline meie objekt järgmisel real, see täidetud punase ja siniste löökidega (kui see on asjakohane). Võite pilti sel viisil edasi uurida ja saate loogikast aru.

Siin on mõned olulised omadused ja seaded, mida tavaliselt kasutatakse:

Stiiliseaded

täitma () - määrab objektidele täitevärvi. Seda seadet kasutatakse ka tekstide värvimiseks. Praegu peame teadma ainult järgmist kasutamist:

• fill (r, g, b) - punase, rohelise ja sinise väärtused täisarvuna
• täitmine (r, g, b, a) - täiendav alfa väärtus, max on 255

noFill () - määrab täitevärvi läbipaistvaks.

insult () - määrab objektidele löögi värvi. Löögiomadust saab kasutada objektide ümber olevate joonte ja piiride jaoks. Praegu peame teadma ainult järgmist kasutamist:

• insult (r, g, b) - punase, rohelise ja sinise väärtused täisarvuna.
• käik (r, g, b, a) - täiendav alfa väärtus, max on 255

noStroke () - eemaldab löögi.

strokeWeight () - määrab löögi laiuse. Kasutamine:

• strokeWeight (x) - x on täisarv ja tähistab löögi laiust pikslites.

taust () - määrab taustavärvi. Praegu peame teadma ainult järgmist kasutamist:

• taust (r, g, b) - punase, rohelise ja sinise väärtused täisarvuna.
• taust (r, g, b, a) - täiendav alfa väärtus, max on 255

Joondamise seaded

ellipseMode () - määrab ellipside joondamise võrdluspunktiks koha. Kasutamine:

• ellipseMode (mode) - ‘mode’ on parameeter, siin on saadaolevad parameetrid:
  • KESKUS (vaikimisi): võtke võrdluspunktiks kese.
  • RADIUS: See võtab ka keskpunkti võrdluspunktiks, kuid selles režiimis käsitletakse teie määratud w ja h väärtusi poolena (st läbimõõdu asemel raadius)
  • NURK: võtab võrdluspunktiks vasaku ülanurga.
  • NURGAD: määrab kaks esimest parameetrit (x ja y) ülemise vasaku nurga asukohaks ja kaks viimast parameetrit (w ja h) ellipsi vasaku alumise nurga asukohaks. Nii et see režiim, „laius“ ja „kõrgus“ pole asjakohased. Selle ellipsiks (x_tl, y_tl, x_br, y_br) mõtlemine on antud juhul mõttekam.

rectMode () - määrab ristkülikute joondamise koha võrdluspunktiks. Kasutamine:

• rectMode (mode) - parameeter on ‘mode’, siin on saadaolevad parameetrid:
  • KESKUS: võtke keskpunkt võrdluspunktiks.
  • RADIUS: See võtab ka keskpunkti võrdluspunktiks, kuid selles režiimis käsitletakse teie määratud w ja h väärtusi poolena
  • NURK (vaikimisi): võtab võrdluspunktiks vasaku ülanurga.
  • NURGAD: määrab kaks esimest parameetrit (x ja y) ülemise vasaku nurga asukohaks ja kaks viimast parameetrit (w ja h) ellipsi vasaku alumise nurga asukohaks. Nii et see režiim, „laius“ ja „kõrgus“ pole asjakohased. Mõeldes sellele kui sirgele (x_tl, y_tl, x_br, y_br), on sel juhul mõttekam.

Tekstiga seotud seaded

textSize () - määrab teksti fondi suuruse. Kasutamine:

• textSize (suurus) - soovitud suuruse täisarv.

textLeading () - määrab teie tekstide rea kõrguse. Kasutamine:

• textLeading (lineheight) - ridade vahelise ruumi piksliväärtus.

textAlign () - määrab joondavate tekstide võrdluspunktiks võtmise koha. Kasutamine.

• textAlign (alignX) - ‘alignX’ on mõeldud horisontaalseks joondamiseks. Saadaval: VASAK, KESK, PAREM
• textAlign (alignX, alignY) - ‘alignY’ on mõeldud vertikaalseks joondamiseks. Saadaval: TOP, BOTTOM, CENTER, BASELINE.

Animatsioonid

Siiani õppisime esemeid ja tekste joonistama. Kuid nende probleem on see, et nad on staatilised. Kuidas me siis neid liikuma paneme? Lihtne, selle asemel, et anda koordinaadid täisarvudena, kasutame muutujaid, et saaksime neid suurendada / vähendada . On loogiline? Vaadake järgmist koodi:

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

Kas näete, kuidas me animatsiooniga hakkama saime? Määrasime globaalsete muutujatena x ja y ning nende algväärtuseks 0. Loonime oma joonistussilmus ellipsi, määrasime täitevärvi punaseks, löögivärvi siniseks ning koordinaadid x ja y. Kui suurendame x ja y, muudab pall lihtsalt oma asukohta. Kuid selle koodiga on probleem, kas märkate seda? Lihtsa väljakutsena proovige endale selgeks teha, milles probleem on, ja proovige seda. Siin on tulemus:

Minu eesmärk oli lasta sellel juhtuda, et panna teid mõistma, kuidas töötlemise silmuslaadimine töötab. Vaadake jaotise „Joonista plokk” näidet, kas mäletate, miks saime „1 2 1…” asemel „1 1 1…”? Sama põhjus, miks pall jälgi maha jätab. Iga kord, kui loosimisplokk kordub, suurenevad x ja y 5-ga ning seetõttu joonistatakse pall 5-pikseliseks allapoole ja paremale. Ent pall jääb eelmiste iteratsioonide põhjal joonisele. Kuidas panna need minema? Kas on aimusi?

Pallist maha jäänud märkidest eemaldamiseks eemaldame lihtsalt tausta (255) häälestusplokist ja kleepime selle joonistusploki kõige esimeseks reaks. Kui meie taustkood oli häälestusplokis, jooksis see alguses ühe korra, muutes meie tausta valgeks. Kuid sellest ei piisa, vajame seda, et seada meie taust valgeks igas silmuses, et katta eelmistest silmustest tõmmatud pallid. Esimene rida tähendab, et see jookseb kõigepealt, sellest saab aluskiht. Igal silmusel on meie lõuend valgeks värvitud ja valge tausta peale joonistatakse uusi elemente. Nii et meil pole märke.

See on idee protsesside animeerimise taga, objektide koordinaatide programmeerimine nende asukoha muutmiseks. Kuidas aga teha uhkeid asju, näiteks palli ekraanil hoidmist? Või äkki gravitatsiooni rakendamine? Ma õpetan, kuidas seda kraami teha, selle artikli järgmises osas. Õpime proovides ja ehitades. Õpime seda tegema ja rakendame neid kohe oma mängus. Lõpus ootab meid ees täielik, mängitav ja loodetavasti lõbus mäng.

Klaviatuuri ja hiire suhtlus

Klaviatuuri ja hiire suhtlemine töötluses on väga lihtne ja arusaadav. Igale sündmusele saate helistada meetodeid ja see, mida kirjutate, täidetakse üks kord, kui sündmus aset leiab. Samuti on olemas sellised globaalsed muutujad nagu mousePressed ja keyPressed, mida saate kasutada oma loosimisplokis, et tsüklit ära kasutada. Siin on mõned meetodid koos selgitustega:

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

Nagu näete, on üsna lihtne kontrollida, kas hiirel klõpsatakse või millist klahvi vajutatakse. Kuid muutujate mousePressed ja keyCode jaoks on saadaval rohkem võimalusi. Saadaolevad valikud hiirPressitud on VASAK, PAREM ja KESK. Selle jaoks on saadaval palju rohkem keyCode ; ÜLES, ALLA, VASAK, PAREM, ALT, JUHTIMINE, SHIFT, BACKSPACE, TAB, ENTER, TAGASI, ESC ja KUSTUTA.

Üks asi, mida peaksime teadma hiire muutujate kohta ja mida me seda palju kasutame, on see, kuidas saada hiire koordinaadid. Kursori täpsete koordinaatide saamiseks saame seda kasutada hiir X ja hiirY muutujad otse draw () plokis. Viimasena, kuid mitte vähem tähtsana, on palju muid kasulikke meetodeid, mida peaksite vaatama. Need kõik on dokumenteeritud Töötlemise viide .

Järeldus

Te peaksite juba praegu töötlemisega tutvuma. Kuid kui te siin peatute, saavad kõik need teadmised lendama ära. Soovitan tungivalt jätkata harjutamist, õpituga ringi mängimist. Harjutamise hõlbustamiseks pakun teile kaks harjutust. Peaksite kõigest väest seda ise tegema. Kui jänni jääd, Google ja Töötlemise viide peaksid olema su parimad sõbrad. Esitan esimese koodi, kuid nende vaatamine peaks olema viimane asi, mida teete.

Soovitatav harjutus 1

Sa peaksid tegema 4 palli koos erinevad värvid , alates 4 nurka ekraani keskusest läbi rännates koos erineva kiirusega . Kui klõpsate ja hoiate hiire nuppu, peaksid pallid seda tegema külmuma . Ja kui hiir lahti lasta, võivad pallid tagasi oma algasendisse minna ja liikuda edasi. Niisiis, ma otsin midagi sellist seda .

Pärast harjutuse ise proovimist võite koodi üle vaadata siin .

Soovitatav harjutus 2

Pidage meeles kuulsat DVD ekraanisäästja mille DVD logo põrkab ümber ekraani ja me kõik ootasime meeleheitlikult, kuni see nurka jõuab? Ma tahan, et te paljundaksite selle ekraanisäästja, kuid kasutaksite DVD-logo asemel ainult ristkülikut. Rakenduse käivitamisel peaks ekraan olema must ja ristkülik peaks algama juhuslikust kohast. Iga kord, kui ristkülik nurka satub, peaks see muutma oma värvi (ja ilmselt suunda). Kui liigutate hiirt ringi, peaks ristkülik kaduma ja taustavärv peaks muutuma valgeks (see on ju ekraanisäästja, kas pole?). Selles artiklis ma selle harjutuse koodi ei anna. Selle rakendamiseks peaksite proovima kõik endast oleneva ja kood antakse selle artikli teises osas.

Töötlemise lõpliku juhendi teine ​​osa, samm-sammult õpetus lihtsa mängu ehitamiseks, on avaldatud.