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

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

Trči! Trči! Trči!

Programiranje nije tako teško. Ključna stvar 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 ćete osjetiti vrtoglavicu i zbunjenost zbog 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 magija. To je magija o vizuelnom varanju. Međutim, u ovim informacijama je 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 i na crtanje animacije s programom. Moramo razmisliti o tome kako nacrtati različite grafike u svakom okviru, a program će automatski okretati stranice dok mi u glavi dopunjujemo kompletnu 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. Crta četiri kruga na ekranu. 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 promenljiv.

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]

Dobijamo 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 jednolično. 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 njen tip podataka.

int i;

i ＝ 50;

Prva rečenica koda je dala izjavu za varijablu i. int je simbol koji se uglavnom koristi za deklaraciju varijable. Prilikom deklariranja poštedjet će se prostor u memoriji računara, što je ekvivalentno generiranju "kutije", posebno korištene za vraćanje cjelobrojnih podataka. Druga rečenica označava da se zadatak 50 implementira varijablom i. Nakon implementacije ove rečenice, podaci će biti stabilno pohranjeni u varijabli i. Ili možete biti lijeniji da spojite gornje dvije rečenice u jednu i dovršite zadatak dok dajete izjavu.

int i ＝ 50;

Relativno je slobodno imenovati varijablu. Ali ponekad moramo na nešto obratiti pažnju.

Korak 3: Imenovanje regulacije varijable

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

• Osetljivo na velika i mala slova. Ime i ime mogu značiti različite varijable.

• Pokušajte ga nazvati što je lakše moguće kako biste razumjeli iz jednog pogleda. 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 tačnih izjava:

int r;

int super_24;

int openTheDoor;

Korak 4: Tip 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 našu izjavu. Ako smo koristili ključnu riječ int, potonji zadatak ne može pisati 0,5 ＝ ili nešto slično, ili će program postati greš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 su već definirane sistemom. Ne moramo ih sami prijaviti. Baš kao i prethodno spomenuta "širina, visina", ona će automatski steći širinu i visinu ekrana računara. Toliko visoke frekvencije u upotrebi da ih dizajner izravno definira kao zadanu varijablu kako bi nam bilo prikladnije za upotrebu.

Korak 5: Operater

Sljedeći su operatori obrade:

+ plus

- oduzeti

* množiti

podijeli

U Modul ostatka

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

Operatori se mogu koristiti među dodjelama i varijablama.

[cceN_cpp theme = "dawn"] int a = 1; // deklariramo cjelobrojnu varijablu a, dodjela je 1. int b = 2; // Proglašavamo cjelobrojnu varijablu b, dodjela je 2. int c; // Deklarira cjelobrojnu varijablu c. c = a + b; // Plus dva dodjeljivanja i dodijeli njegov rezultat c. ispis (c); // Izlazna varijabla c.

[/cceN_cpp]

Korak 6: Rezultat operacije:

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

Način pisanja četvrtog reda izgleda prilično čudno. Ali to je uobičajen format koji se često koristi tokom dodjeljivanja računara. 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 testiranje stanja izlaza podataka.

Korak 7: Regulacija rada

Problematična tačka u procesuiranju je što moramo razjasniti tip varijable. Moramo obratiti posebnu pažnju 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 sa 5 je 1,2. Ali rezultat programskog izlaza je 1. To je protivno našoj intuiciji. Program se neće baviti zaokruživanjem, već briše broj iza decimalnog zareza.

ispis (6.0 / 5.0); // rezultat 1.2

Operacija između plutajućih tačaka rezultiraće novim brojem plutajuće tačke. Ako je stvarni rezultat 1,2, rezultat programa bit će isti.

ispis (6 / 5.0); // rezultat 1.2

štampa (6,0 / 5); // rezultat 1.2

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

• Zapravo, morate imati na umu da cilj ovog pravilnika nije izgubiti tač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 gomili temeljnog znanja. Konačno smo došli odigrati nešto zanimljivo. Podešavanje i crtanje funkcija ekvivalentni su glavnim funkcijama obrade. Ove dvije funkcije su vrlo posebne. Može kontrolirati postupak programa. Relativno komplikovan program će uključivati 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 dugme za upravljanje, konzola će prvo prikazati "1", a zatim će konstantno izlaziti "2" sve dok ne pritisnete dugme 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 ovog znaka, postavljanje se obično koristi za inicijalizirana svojstva okruženja, kao što su širina i visina ekrana, boja pozadine i sve vrste dodjeljivanja varijabli. Iako često stavljamo funkcije crtanja u crtanje funkcija kako bismo generirali grafiku koja se stalno mijenja.

Korak 9: Krug u horizontalnom kretanju

Pomoću crtanja funkcija možemo početi stvarati naše animacije. Način pisanja efekta animacije obradom prilično je „nezgodan“. Nema nikakve naredbe. Na primjer, označite određeni oblik za izvođenje krivolinijskog oblika.

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

Upišite u njega sljedeći kôd (počnimo to raditi rukama):

[cceN_cpp theme = "dawn"] 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 u postavkama funkcija. Kod ključa je sljedeći u okviru crteža funkcija:

x = x + 1

Ne promatrajte to 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 "＝" je jednaka 50+1, tj. 51. Konačni rezultat bit će dodijeljen varijabli x. Tako vrijednost x postaje 51.

Slijedite proceduru programa, svaki put kada funkcija crtanja operira jednom, vrijednost x će se povećati 1. Dakle, svaki put kada crtamo, krug će se pomicati smjer piksela vodoravno udesno, u odnosu na prethodni okvir. Zbog toga grafika postaje pokretna.

• Kako bi kod postigao bolju čitljivost, moramo osloboditi određenu sobu prije svakog reda 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 napisati u sljedećem formatu.

krug ＝ krug ＋1

Prilično nezgodno! Ako je naziv varijable duži, 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 smanjenje 1 automatski.

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

kružnica += 2

Ovo je jednako

krug = krug + 2

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

Korak 10: Smjer kretanja

U kojem smjeru se grafika kreće ovisi o tome kako promijenite koordinatu. Ako se promijeni u y ＝ y ＋ 1, krug će se pomaknuti prema dolje. Ako oba 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 = "dawn"] int x, y; // Može deklarirati više varijabli istovremeno, koristiti zarez 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 će se pomaknuti 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 originalnu!

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

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: Pozadina koja se zanemaruje

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

[cceN_cpp theme = "dawn"] 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]

Šta se desilo? Možda ne može pravilno razumjeti razlog za nastanak problema. Izbrišite funkciju noStroke, ponovo dodajte potez i pogledajte putanju kretanja kruga.

Oh, to je zato što prethodno kreirani krug nije izbrisan! Budući da postavljanje funkcija radi samo jednom, ako iznad njega napišemo pozadinu, ona će samo jednom ispuniti pozadinu, a kasnije više neće imati učinka. Pozadina funkcija je poput alata za kantu s bojom. Kada se jednom upotrebi, pokrivat će sav sadržaj na platnu umjesto postavljanja samo boje pozadine. Zapisujemo ga prije iscrtavanja funkcije, tako da će prethodni okvir biti prekriven svaki put kada stvorimo novi uzorak. Dakle, krug može raditi kako smo očekivali. Osim pamćenja upotrebe 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 može stvoriti poseban efekat ako se pravilno koristi. Možete kopirati sljedeći kod i isprobati.

[cceN_cpp theme = "dawn"] void setup () {veličina (400, 400); } void draw () {ellipse (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+miš X, visina/2+miš X, miš Y, miš Y); } [/cceN_cpp]

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

Korak 12: Protresite krug

Šta 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 pozivanja:

slučajno (visoko)

High predstavlja slučajnu gornju granicu, a zadana donja granicu je 0. Na primjer, random (10). On će proizvesti broj od 0 do 10 nasumično (0 je uključeno, ali 10 nije uključeno).

nasumično (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 nasumično broj od 5 do 10 (5 je uključeno, ali 10 nije uključeno).

Primjer:

[cceN_cpp theme = "dawn"] 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 briše 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 direktno preći na donji slučaj.

[cceN_cpp theme = "dawn"] 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 dodate 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), drugi okvir će se u jednom trenutku 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 kontinuirani.

Format pozivanja:

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 posmatrati kao neograničeni glasovni zapis, ulazni parametri su poput "sadašnjeg vremena". Ako je ulaz parametra kontinuiran, izlaz će također biti kontinuiran.

[cceN_cpp theme = "dawn"] float 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 će dobiti 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četnoj animiranoj grafici prikaza, ona 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 osovinu Y promijenili 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 zapitati "zašto moramo podijeliti frameCountby 100? Nije li u redu pisati frameCount izravno?" Naravno da 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"] float 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); hod (80); linija (0, 100, širina, 100); linija (0, 200, širina, 200); linija (0, 300, širina, 300); linija (0, 400, širina, 400); }

[/cceN_cpp]

Promjenjive parametre 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 muzičko djelo ili video s 2 puta većom brzinom, 5 puta brzina, 20 puta brzina). Kada je opseg veći od određene vrijednosti, onda 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 interne principe.

[cceN_cpp theme = "dawn"] float 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 je potrebno razdvojiti na udaljenost. Ako su parametri xy unutar šuma funkcije isti ili prilično bliski, promjena koordinate x, y će se približiti istoj. Ovo čini da pokret postane 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 ova dva začeća, moje oči svjetlucaju. Zato što je to najdirektniji način interakcije sa grafikom. Pomoću njega možemo stvoriti mnogo zanimljivih programa.

Slučaj je prilično jednostavan:

[cceN_cpp theme = "dawn"] 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: Završite

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. Istovremeno ćemo koristiti matematičke funkcije i kombinirati ih s grafičkim kretanjem.

Ovaj članak dolazi od dizajnera Wenzyja.

Korak 16: Relativna očitavanja:

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

Zanimljiv vodič za programiranje za dizajnera-Kreirajte svoj prvi program za obradu

Ovaj članak je sa:

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