Zanimljiv vodič za programiranje za dizajnera-pokrenite svoju sliku (prvi dio): 16 koraka

2025 Autor: John Day | [email protected]. Zadnja promjena: 2025-01-13 06:57

Trčanje! Trčanje! Trčanje!

Programiranje nije tako teško. Ključna točka je pronaći svoj ritam i raditi to jedan po jedan.

Nadam se da ste prije čitanja ovog poglavlja već bili upoznati s osnovnim načinom crtanja funkcija ili će vam se vrtjeti i zbuniti dvije velike funkcije glave: postavljanje i crtanje.

Budući da želimo stvarati pokretne grafike, moramo znati kako se animacija proizvodi.

Gornja slika djeluje prilično atraktivno i vizualno otkriva implementacijski princip animacije.

Animacija je čarolija. To je čarolija o vizualnom varanju. Međutim, u tim je informacijama eksplodiralo, video je preplavio doba, na to smo već navikli. Malo će se ljudi iznenaditi da je nevjerojatna stvar vidjeti animaciju.

Isti princip može se primijeniti u animaciji crtanja s programom. Moramo razmisliti o tome kako nacrtati različite grafike u svakom okviru, a program će automatski okretati stranice dok mi u glavi nadopunjujemo dovršenu animaciju. U sljedećem poglavlju govorit ćemo o tome kako realizirati osnovni grafički pokret. Prije toga moramo znati osnovno znanje o varijablama.

Korak 1: Promjenjivo

Varijabla je spremnik podataka. Može se više puta koristiti unutar programa.

Na primjer:

[cceN_cpp theme = "dawn"] veličina (500, 500); elipsa (100, 250, 50, 50); elipsa (200, 250, 50, 50); elipsa (300, 250, 50, 50); elipsa (400, 250, 50, 50);

[/cceN_cpp]

Ovaj odjeljak koda nije koristio nikakve varijable. Na ekranu iscrtava četiri kruga. Možemo otkriti da imaju istu širinu i visinu. Sada kada je isto, kako bismo smanjili ponovljeni unos podataka, možemo definirati znak koji će ga predstavljati. Ovaj znak je promjenjiv.

Evo koda nakon dodavanja varijable:

[cceN_cpp theme = "dawn"] veličina (500, 500); int a = 50; elipsa (100, 250, a, a); elipsa (200, 250, a, a); elipsa (300, 250, a, a); elipsa (400, 250, a, a);

[/cceN_cpp]

Dobivamo potpuno isti rezultat!

Budući da smo definirali varijablu a, možemo prikladno promijeniti parametre. Ako promijenimo a = 50 u a = 100, tada će širina i visina svih krugova postati 100 jednoliko. Dakle, ne moramo mijenjati parametre jedan po jedan. Varijabla je zaista dobar izum.

Korak 2: Stvaranje varijable

Prije korištenja varijable moramo napraviti izjavu i odrediti njezin tip podataka.

int i;

i ＝ 50;

Prva rečenica koda dala je iskaz za varijablu i. int je simbol koji se uglavnom koristi za deklaraciju varijable. Prilikom deklariranja poštedjet će prostor u memoriji računala, što je ekvivalentno generiranju "kutije", posebno korištene za vraćanje cjelobrojnih podataka. Druga rečenica označava da se zadatak 50 treba implementirati varijablom i. Nakon provedbe ove rečenice, podaci će se stabilno pohranjivati u varijablu i. Ili možete biti ljenji kombinirati gornje dvije rečenice u jednu i dovršiti zadatak dok dajete izjavu.

int i ＝ 50;

Relativno je slobodno imenovati varijablu. No ponekad moramo na nešto obratiti pozornost.

Korak 3: Imenovanje regulacije varijable

• Mora biti kombinacija abecede i podcrtavanja. To može biti simbol ili riječ.

• Osjetljivo na velika i mala slova. Ime i naziv mogu označavati različite varijable.

• Pokušajte ga imenovati što je lakše moguće kako biste razumjeli u jednom pogledu. Početni znak mora biti abeceda umjesto broja ili poseban znak.

• Nema ključnih riječi poput int, float

Slijede neke pogrešne izjave.

int $ a;

int 89b;

Evo točnih tvrdnji:

int r;

int super_24;

int openTheDoor;

Korak 4: Vrsta varijable

Osim za deklariranje cjelobrojnih podataka, možemo se deklarirati za decimalne podatke (koji se nazivaju i podaci s pomičnim zarezom) s ključnom riječi float.

plovak b = 0,5

Moramo imati na umu kakvu smo vrstu podataka koristili za svoju izjavu. Ako smo upotrijebili ključnu riječ int, posljednja dodjela ne može pisati 0,5 ＝ ili nešto slično, ili će program postati pogreška. Ali ako pišemo suprotno, sve je u redu. Na primjer, float i = 5 je prava gramatika, ali program će je prepoznati kao decimalni broj.

Neke od varijabli sustav je već definirao. Ne moramo ih sami deklarirati. Baš kao i prethodno spomenuta "širina, visina", automatski će steći širinu i visinu zaslona računala. Toliko visoke frekvencije u uporabi da ih dizajner izravno definira kao zadanu varijablu kako bi nam bilo prikladnije za korištenje.

Korak 5: Operater

Sljedeći su operatori obrade:

+ plus

- minus

* množiti

podijeli

％ Modul ostatka

Morate biti upoznati sa svim ovim operatorima osim %. Čini se prilično čudno jer je njegov rezultat ostatak. 9%3 je 0. Dok je 9%5 4.

Operatori se mogu koristiti među dodjelama i varijablama.

[cceN_cpp theme = "svitanje"] int a = 1; // deklarirati cjelobrojnu varijablu a, dodjela je 1. int b = 2; // Deklariraj cjelobrojnu varijablu b, dodjela je 2. int c; // Deklariraj cjelobrojnu varijablu c. c = a + b; // Dodijelite dva dodjeljivanja i dodijelite njegov rezultat c. ispis (c); // Izlazna varijabla c.

[/cceN_cpp]

Korak 6: Rezultat operacije:

Izlazni rezultat neće biti prikazan na prozoru, već na konzoli pri dnu.

Način pisanja četvrtog retka izgleda prilično čudno. No, to je uobičajen format koji se često koristi tijekom dodjeljivanja računala. Lijeva strana jednakog simbola trebala bi biti konačna dodijeljena varijabla, dok bi desna strana trebala biti operativni proces.

Funkcija ispisa u petom retku može ispisati varijable u konzoli, što se često koristi za provjeru stanja izlaznih podataka.

Korak 7: Uredba o radu

Problematična točka u obradi je što moramo pojasniti vrstu varijable. Moramo obratiti posebnu pozornost na proces broja s pomičnim zarezom i tipa cijelog broja.

ispis （6/5）; // rezultat 1

Operacija između cijelih brojeva imat će novi cijeli broj. 6 podijeljeno s 5 je 1,2. No, izlazni rezultat programa je 1. To je protivno našoj intuiciji. Program se neće baviti zaokruživanjem već briše broj iza decimalne točke.

ispis (6,0 / 5,0); // rezultat 1.2

Rad između pokretnih točaka rezultirat će novim brojem pokretnog zareza. Ako je stvarni rezultat 1,2, rezultat izlaza programa bit će isti.

ispis (6 / 5.0); // rezultat 1.2

ispis (6,0 / 5); // rezultat 1.2

Konačno, to je mješavina cijelog broja i broja s pomičnim zarezom. Konačni rezultat bit će 1,2.

• Zapravo, morate imati na umu da cilj ovog pravilnika nije izgubiti točnost podataka. Dakle, ako je jedan element broj s pomičnim zarezom, rezultat će biti i broj s pomičnim zarezom.

Korak 8: Funkcija postavljanja i funkcija crtanja

Ranije smo govorili o hrpi temeljnih znanja. Konačno smo došli odigrati nešto zanimljivo. Postavljanje i crtanje funkcija jednaki su glavnim funkcijama obrade. Ove dvije funkcije su vrlo posebne. Može kontrolirati postupak programa. Usporedno komplicirani program uključivat će ove dvije funkcije jer su one osnovni okvir programa. Format:

void setup () {

}

void draw () {

}

Posebna upotreba čini njihov format poziva drugačijim od ostalih funkcija. Moramo dodati "void" prije naziva funkcije, što znači da nema "vraćene vrijednosti". Iza naziva funkcije moramo dodati zagrade i zagrade.

[cceN_cpp theme = "dawn"] void setup () {print (1); } void draw () {print (2); } [/cceN_cpp]

Pogledajmo primjer:

Kada pritisnete gumb za upravljanje, konzola će prvo ispisati "1", a zatim će konstantno izlaziti "2" sve dok ne pritisnete tipku za zaustavljanje ili zatvorite prozor.

Kôd unutar zagrada u funkciji postavljanja bit će implementiran samo jednom. Dok će kôd unutar crtanja funkcije stalno raditi u opticaju (zadana implementacija 60 puta/sekundi).

Zbog tog se znaka postavljanje obično koristi za inicijalizirana svojstva okruženja, kao što su širina i visina zaslona, boja pozadine i sve vrste dodjeljivanja varijabli. Iako često stavljamo funkcije crtanja u crtanje funkcija kako bismo generirali kontinuirano mijenjane grafike.

Korak 9: Krug u vodoravnom kretanju

Pomoću crtanja funkcija možemo početi stvarati naše animacije. Način pisanja animacijskog učinka obradom prilično je "neugodan". Nema nikakve naredbe. Na primjer, označite određeni oblik za izvođenje krivuljastog oblika.

Te detalje moramo sami definirati. Morate programu reći kakvu grafiku svakom okviru definitivno treba.

Upišite u njega sljedeći kod (Sada počnimo to raditi rukama):

[cceN_cpp theme = "svitanje"] int x; int y; void setup () {veličina (300, 300); x = 0; y = visina/2; } void draw () {background (234, 113, 107); noStroke (); elipsa (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Ovaj odjeljak koda prikazuje krug kretanja. Prethodno deklarirane varijable x, y koriste se za spremanje položaja koordinata. Njegovi se zadaci izvode pri postavljanju funkcija. Kod ključa je sljedeći u okviru crteža funkcija:

x = x + 1

Nemojte to promatrati kao matematičku jednadžbu ili će to biti vrlo čudno. Ovdje je "＝" simbol za dodjelu. Predstavlja postavljanje desnih brojeva u lijevu varijablu. Pretpostavimo da je x 50, nakon što se kôd pokrene, desna strana "＝" jednaka je 50+1, tj. 51. Konačni rezultat bit će dodijeljen varijabli x. Tako vrijednost x postaje 51.

Slijedite postupak programa, svaki put kad funkcija crtanja operira jednom, vrijednost x će se povećati 1. Dakle, svaki put kada crtamo, krug će se pomaknuti u smjeru piksela vodoravno udesno, u usporedbi s prijašnjim okvirom. Stoga grafika postaje pokretna.

• Kako bismo postigli bolju čitljivost koda, moramo osloboditi određenu sobu prije svakog retka koda unutar zagrada. I mora biti usklađeno što je više moguće. Pritisnite TAB ili nekoliko praznih mjesta, može se povući.

• Simbol praznog prostora i prijelom retka u programu neće utjecati na program. Dakle, u redu je ako upišemo jedan više ili manje.

Evo još jednog jednostavnijeg načina da to izrazite. Da bi se promjenjivi krug automatski povećao 1, moramo ga zapisati u sljedeći format.

krug ＝ krug ＋1

Prilično nezgodno! Ako je naziv varijable duži, tada moramo upisati više riječi. Tako naši lijeni prethodnici smišljaju ovakvu ideju.

krug ＋＋

Nije li to vrlo jednostavno? To znači automatski povećati 1. Slično, postoji - -, što znači automatski smanjiti 1.

Ali ako se nadamo da je količina automatskog povećanja drugi broj poput 2, moramo pokušati s drugim izrazom.

kružnica += 2

To je jednako

krug = krug + 2

Slično postoji - ＝, /=, *=.

Korak 10: Smjer kretanja

U kojem se smjeru grafika pomiče ovisi o tome kako promijenite koordinatu. Ako se promijeni u y ＝ y ＋ 1, krug će se pomaknuti prema dolje. Ako i x i y povećaju 1, krug će se pomaknuti prema dolje desno dolje. Ako napišemo da je to minus simbol, pomaknut će se u suprotnom smjeru.

[cceN_cpp theme = "svitanje"] int x, y; // Može deklarirati više varijabli u isto vrijeme, koristiti zareze za odvajanje. void setup () {veličina (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); elipsa (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Brzina kretanja

Sjećate li se zadanih 60 sličica u sekundi unutar crtanja funkcija? Prema ovoj brzini, gornji krug pomaknut će se 60 piksela u sekundi udesno.

Ako želimo promijeniti brzinu grafičkog kretanja, postoje dvije metode: jedna je povećanje vrijednosti x svaki put nakon što će se promijeniti.

x ＝ x ＋ 10

Poboljšao je brzinu 10 puta u odnosu na izvornu!

Druga metoda je promjena učestalosti osvježavanja platna. okvirna stopa()

Ova funkcija može promijeniti frekvenciju emitiranja platna. Upišite frameRate (10) u postavku funkcije, promijenit će izvornih 60 sličica u sekundi u 10 sličica u sekundi. Brzina se usporava 6 puta nego prije.

Korak 11: Previđena pozadina

Svi prethodni primjeri pišu pozadinu u funkciju draw. Jeste li ikada razmišljali da to upišete u postavku funkcija? Hoće li to imati neke razlike? Ažurirajmo primjer horizontalnog kretanja.

[cceN_cpp theme = "svitanje"] int x, y; void setup () {veličina (300, 300); pozadina (234, 113, 107); x = 0; y = visina/2; } void draw () {noStroke (); elipsa (x, y, 50, 50); x += 1; } [/cceN_cpp]

Što se dogodilo? Možda ne može ispravno razumjeti razlog proizvodnje problema. Izbrišite funkciju noStroke, ponovno dodajte potez i pogledajte putanju kretanja kruga.

Oh, to je zato što prethodno stvoreni krug nije izbrisan! Budući da postavljanje funkcija radi samo jednom, ako iznad njega napišemo pozadinu, ono će samo jednom ispuniti pozadinu, a kasnije više neće imati učinka. Pozadina funkcija je poput alata za kantu s bojom. Kad se jednom upotrebi, pokriti će sav sadržaj na platnu umjesto postavljanja samo boje pozadine. Zapisujemo ga prije iscrtavanja funkcije tako da će bivši okvir biti prekriven svaki put kada stvorimo novi uzorak. Stoga se krug može odvijati kako smo očekivali. Osim pamćenja uporabe svake funkcije, moramo razmišljati o položaju koda. Puno vremena, linija prema gore ili dolje za kodu i za pisanje unutar ili izvan zagrade, stvorit će sasvim različite efekte. Smjer koda je dvodimenzionalan. Ako se pojavi greška, moramo kalibrirati u ove dvije dimenzije.

• Ova metoda koja se ne ponavlja ne može se ponoviti ako se pravilno koristi. Možete kopirati sljedeći kôd i isprobati.

[cceN_cpp theme = "dawn"] void setup () {veličina (400, 400); } void draw () {elipse (width/2-mouseX, height/2-mouseX, mouseY, mouseY); elipsa (širina/2 mišaX, visina/2+miš X, miš Y, miš Y); elipsa (širina/2+mouseX, visina/2-mouseX, mouseY, mouseY); elipsa (širina/2+mouseX, visina/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

Ovdje smo koristili čarobnu varijablu mouseX i mouseY. Poslije ćemo o tome detaljno govoriti.

Korak 12: Krug koji se trese

Što ako želim učiniti da smjer kretanja kruga postane nepravilan? Pametnom slučajnom funkcijom možete postići i ovaj učinak. Slučajnost je često korištena funkcija. Može se koristiti za generiranje slučajnih funkcija. To je poput duha bez traga. Kad se jednom povežu s varijablama, ne možete zamisliti što će sljedeće biti.

Format poziva:

slučajno (visoko)

Visoko predstavlja slučajnu gornju granicu, a zadana donja granica je 0. Na primjer, slučajna (10). Nasumično će proizvesti broj od 0 do 10 (0 je uključeno, ali 10 nije uključeno).

slučajno (nisko, visoko)

Ako postavimo dva parametra, tada će se vratiti na slučajnu vrijednost između njih. Na primjer, slučajni (5, 10). Proizvest će slučajni broj od 5 do 10 (5 je uključeno, ali 10 nije uključeno).

Primjer:

[cceN_cpp theme = "svitanje"] float x;

x = slučajno (50, 100);

ispis (x); [/cceN_cpp]

Svaki put kada pokrenemo program, konzola će ispisati različite vrijednosti.

• Napomena: Vrijednosti stvorene funkcijom random pripadaju tipu s pomičnim zarezom (tip decimalnog broja). Ako želimo dodijeliti vrijednost cjelobrojnoj varijabli, moramo je transformirati kroz funkciju int (). Transformacija se ne pridržava zaokruživanja, već izravno izbrišite decimalni dio. Tako izlaz int (random (5)) ima samo 5 mogućnosti: 0, 1, 2, 3, 4.

Nakon što se upoznamo s korištenjem funkcije random, možemo izravno pristupiti dolje navedenom slučaju.

[cceN_cpp theme = "svitanje"] int x, y; void setup () {veličina (300, 300); x = širina/2; y = visina/2; } void draw () {background (234, 113, 107); noStroke (); x += int (slučajno (-5, 5)); y += int (slučajno (-5, 5)); elipsa (x, y, 50, 50); }

[/cceN_cpp]

Prethodne dodane vrijednosti koordinata su fiksne. Samo ako povećamo slučajnu vrijednost, krug će se kretati u neodređenom smjeru. S većim slučajnim rasponom, češće se trese. Budući da se promjena vrijednosti između okvira odbija, kretanje više neće biti glatko. Dok je prvi okvir na (150, 150), potonji će se okvir pomaknuti na položaj (170, 170).

Korak 13: Migracijski krug

Migracijski krug

Hoće li to stvoriti glatko kretanje? Buka funkcija može nam pomoći. Ima bolji ritam od standardnog slučajnog. A nasumično generirani slučajni brojevi su kontinuirano.

Format poziva:

buka （t）

Šum funkcije ne može definirati njegov izlazni raspon. Program definira da može generirati samo brojeve s pomičnim zarezom od 0 do 1, a fiksni ulaz može imati samo fiksni izlaz.

[cceN_cpp theme = "dawn"] pluta x = buka (5); plovak y = šum (5); ispis (x, y); [/cceN_cpp]

Budući da su gornji ulazni parametri 5, pa su i izlazni rezultati isti. Kako onda promijeniti rezultat? Odgovor je dinamička promjena ulaznih parametara. Zapravo, šum možemo smatrati neograničenim glasovnim zapisom, ulazni parametri su poput "sadašnjeg vremena". Ako je ulaz parametra kontinuiran, i izlaz će biti kontinuiran.

[cceN_cpp theme = "dawn"] plutaju x, y; void setup () {veličina (700, 100); x = 0; pozadina (0); } void draw () {x += 1; y = šum (frameCount/100.0)*100; noStroke (); elipsa (x, y, 2, 2); }

[/cceN_cpp]

U ovom slučaju nacrtamo putanju promjene Y tako da možemo bolje razumjeti šum funkcije.

• Među njima, varijabilni frameCount dobit će sadašnji okvir. Za razliku od širine i visine u prethodnom, stabilan je bez ikakvih promjena. Osim toga, počinje se povećavati od 0. Ako to razumijemo prema početnom animiranom grafičkom prikazu, on prikazuje stranicu na koju smo se okrenuli (radije do vremenske koncepcije u programu).

• frameCount je cjelobrojna varijabla. Podijeljen drugom cjelobrojnom varijablom, program će zadano obraditi rezultat u cijeli broj. Kako bismo poboljšali točnost rezultata, moramo promijeniti 100 na 100,0. Podijeljeno brojem s pomičnim zarezom, dobit ćemo i broj s pomičnim zarezom.

• Da bismo promijenili osovinu Y s 0 na 100, moramo rezultat buke pomnožiti sa 100. Tako možemo kontrolirati raspon slučajnih vrijednosti.

Neki od vas koji dobro razmišljaju mogli bi se upitati "zašto moramo podijeliti frameCountby 100? Nije li u redu napisati frameCount izravno?" Naravno, možete! Ali ovdje, kako bismo bolje prikazali karakteristike šuma funkcije, usporavamo "brzinu emitiranja". Primjer ispod prikazuje promjene izlazne vrijednosti pod različitim stopama promjena.

[cceN_cpp theme = "dawn"] plutaju x, y1, y2, y3, y4, y5; void setup () {veličina (700, 500); x = 0; pozadina (0); } void draw () {x += 1; y1 = šum (frameCount)*100; y2 = šum (frameCount/10.0)*100; y3 = šum (frameCount/100.0)*100; y4 = šum (frameCount/1000.0)*100; y5 = šum (frameCount/10000.0)*100; noStroke (); elipsa (x, y1, 2, 2); elipsa (x, y2+100, 2, 2); elipsa (x, y3+200, 2, 2); elipsa (x, y4+300, 2, 2); elipsa (x, y5+400, 2, 2); moždani udar (80); linija (0, 100, širina, 100); linija (0, 200, širina, 200); linija (0, 300, širina, 300); linija (0, 400, širina, 400); }

[/cceN_cpp]

Promjene parametara unutar šuma funkcije možete promatrati kao traku napretka. Promjena parametra je kao da pomičemo traku napretka. Dakle, kada je promjenjivi opseg ovog "glasovnog zapisa" veći, prednje i stražnje neprekidne karakteristike izlazne vrijednosti bit će slabije. (Možemo zamisliti što će se dogoditi ako emitiramo glazbeno djelo ili video s 2 puta većom brzinom, 5 puta brzina, 20 puta brzina). Kad je opseg veći od određene vrijednosti, tada nema velike razlike u funkcioniranju slučajno pri stvaranju vrijednosti.

Ako možete razumjeti sve gore navedene primjere, osjećat ćete da ništa ne može biti lakše nacrtati krug koji se seli. Možete razumjeti i unutarnja načela.

[cceN_cpp theme = "dawn"] plutaju x, y; void setup () {veličina (300, 300); x = 0; } void draw () {background (234, 113, 107); x = šum (frameCount/100.0 + 100)*300; y = šum (frameCount/100.0)*300; noStroke (); elipsa (x, y, 50, 50); }

[/cceN_cpp]

Sada je pokret zanimljiviji baš poput rotirajućeg žiroskopa.

• Razlog zašto varijabla x unutar šuma funkcije mora biti plus 100 je zato što ih se razdvaja na udaljenost. Ako su parametri xy unutar šuma funkcije isti ili prilično bliski, promjena koordinate x, y bit će blizu iste. Time se pokret postaje mnogo nasumičniji.

Korak 14: Krug se pomiče mišem

Zatim konačno dolazimo do dvije varijable koje mi se najviše sviđaju: mouseX i mouseY. Na prvi pogled dva začeća, moje oči svjetlucaju. Budući da je to najdirektniji način interakcije s grafikom. Pomoću njega možemo stvoriti mnogo zanimljivih programa.

Slučaj je vrlo jednostavan:

[cceN_cpp theme = "svitanje"] int x, y; void setup () {veličina (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); x = mišX; y = mišY; elipsa (x, y, 50, 50); }

[/cceN_cpp]

mouseX može dobiti x koordinatu miša, dok mouseY može dobiti y koordinatu.

• Pokušajmo promijeniti pozitivni i negativni simbol ili zamijeniti mouseX i mouseY.

Korak 15: Kraj

Pomoću ovih poznatih naredbi možda ćete moći upravljati kretanjem grafike. Sa sadržajem posljednjeg poglavlja, pravilno upotrijebite maštu, možete stvoriti mnogo zanimljivih animiranih efekata.

U sljedećem poglavlju možemo vidjeti obilnije primjere. Istodobno ćemo koristiti matematičke funkcije i kombinirati ih s grafičkim kretanjem.

Ovaj članak dolazi od dizajnera Wenzyja.

Korak 16: Relativna očitanja:

Zanimljiv vodič za programiranje za dizajnera-obrada početnog dodira

Zanimljive programske upute za dizajnera-izradite svoj prvi program za obradu

Ovaj članak je sa:

Ako vam je potrebna pomoć, možete se obratiti: [email protected].