Zanimiva programska navodila za oblikovalca-Ustvarite svojo sliko (prvi del): 16 korakov

2025 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2025-01-13 06:58

Beži! Beži! Beži!

Programiranje ni tako težko. Ključna točka je najti svoj ritem in to narediti enega za drugim.

Preden berete to poglavje, upam, da ste že seznanjeni z osnovnim načinom risanja funkcij ali pa se vam bo zaradi dveh funkcij velike glave: namestitve in risanja vrtelo in zmedelo.

Ker želimo ustvarjati gibljivo grafiko, moramo vedeti, kako nastane animacija.

Zgornja slika se zdi precej privlačna in vizualno razkriva izvedbeno načelo animacije.

Animacija je čarovnija. To je čarovnija o vizualnem goljufanju. Vendar pa je v teh informacijah eksplodirala, video je poplavila starost, tega smo že navajeni. Malo ljudi bo presenečenih, da je neverjetno, da si lahko ogledate animacijo.

Isti princip lahko uporabimo pri risanju animacije s programom. Razmisliti moramo, kako v vsak okvir narisati različne grafike, program pa samodejno obrne strani, medtem ko v glavi dopolnimo dokončano animacijo. V naslednjem poglavju bomo govorili o tem, kako uresničiti osnovno grafično gibanje. Pred tem moramo poznati nekaj osnovnih znanj o spremenljivkah.

1. korak: spremenljivo

Spremenljivka je vsebnik za podatke. V programu se lahko večkrat uporablja.

Na primer:

[cceN_cpp theme = "dawn"] velikost (500, 500); elipsa (100, 250, 50, 50); elipse (200, 250, 50, 50); elipse (300, 250, 50, 50); elipse (400, 250, 50, 50);

[/cceN_cpp]

Ta del kode ni uporabljal nobenih spremenljivk. Na zaslonu nariše štiri kroge. Ugotovimo lahko, da imajo enako širino in višino. Zdaj, ko je isto, da bi zmanjšali ponavljajoči se vnos podatkov, lahko definiramo znak, ki ga predstavlja. Ta znak je spremenljiv.

Tukaj je koda, potem ko ste dodali spremenljivko:

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

[/cceN_cpp]

Dobimo popolnoma enak rezultat!

Ker smo definirali spremenljivko a, lahko priročno spremenimo parametre. Če a = 50 spremenimo v a = 100, bosta širina in višina vseh krogov enakomerno postali 100. Tako nam parametrov ni treba spreminjati enega za drugim. Spremenljivka je res dober izum.

2. korak: Ustvarjanje spremenljivke

Pred uporabo spremenljivke moramo narediti izjavo in določiti njen podatkovni tip.

int i;

i 50;

Prvi stavek kode je dal izjavo za spremenljivko i. int je simbol, ki se večinoma uporablja za razglasitev spremenljivke. Pri deklariranju bo prihranil prostor v računalniškem pomnilniku, kar je enako ustvarjanju "škatle", ki se posebej uporablja za obnovo celoštevilskih podatkov. Drugi stavek pomeni, da je treba dodelitev 50 izvesti s spremenljivko i. Po izvajanju tega stavka bodo podatki stabilno shranjeni v spremenljivki i. Ali pa ste lahko bolj leni, če zgornja dva stavka združite v enega in dokončate nalogo, medtem ko dajete izjavo.

int i ＝ 50;

Relativno prosto je imenovati spremenljivko. Včasih pa moramo biti na kaj pozorni.

3. korak: Poimenovanje regulacije spremenljivke

• To mora biti kombinacija abecede in podčrtaja. Lahko je simbol ali beseda.

• Velike in male črke. Ime in ime lahko označujeta različne spremenljivke.

• Poskusite ga poimenovati čim lažje, da boste razumeli na en pogled. Začetni znak mora biti abeceda namesto številke ali posebnega znaka.

• Ni ključnih besed, kot je int, float

Sledi nekaj napačnih trditev.

int $ a;

int 89b;

Tu so pravilne izjave:

int r;

int super_24;

int openTheDoor;

4. korak: Vrsta spremenljivke

Razen razglasitve celobrojnih podatkov lahko za decimalne podatke (imenovane tudi podatki s plavajočo vejico) deklariramo s ključno besedo float.

plovec b = 0,5

Upoštevati moramo, kakšen tip podatkov smo uporabili za svojo izjavo. Če smo uporabili ključno besedo int, slednja dodelitev ne more zapisati 0,5 ＝ ali kaj podobnega, ali pa bo program postal napaka. Če pa pišemo nasprotno, je vse v redu. Na primer, float i = 5 je prava slovnica, vendar jo program prepozna kot decimalno število.

Nekatere spremenljivke je sistem že definiral. Ni nam jih treba prijaviti sami. Tako kot prej omenjena "širina, višina", bo samodejno pridobila širino in višino računalniškega zaslona. Tako visoka frekvenca uporabe, da jo oblikovalec neposredno opredeli kot privzeto spremenljivko, da nam bo olajšala uporabo.

5. korak: Operater

Operaterji obdelave so naslednji:

+ plus

- minus

* pomnožite

razdeli

％ Modul ostanka

Morate poznati vse te operaterje, razen %. Zdi se precej čudno, ker je njegov rezultat ostanek. 9%3 je 0. Medtem ko je 9%5 4.

Operaterje lahko uporabljate med dodelitvami in spremenljivkami.

[cceN_cpp theme = "dawn"] int a = 1; // razglasimo celoštevilsko spremenljivko a, dodelitev je 1. int b = 2; // razglasi celoštevilsko spremenljivko b, dodelitev je 2. int c; // Razglasi celoštevilsko spremenljivko c. c = a + b; // Plus dve dodelitvi in njen rezultat dodeli c. tisk (c); // Izhodna spremenljivka c.

[/cceN_cpp]

6. korak: rezultat operacije:

Izhodni rezultat ne bo prikazan v oknu, ampak v konzoli na dnu.

Način pisanja četrte vrstice je videti precej čuden. Je pa pogosta oblika, ki se pogosto uporablja pri dodeljevanju računalnika. Leva stran enakega simbola mora biti zadnja dodeljena spremenljivka, desna stran pa postopek delovanja.

Funkcija tiskanja v peti vrstici lahko natisne spremenljivke v konzoli, ki se pogosto uporablja za preverjanje stanja izhoda podatkov.

7. korak: Uredba o delovanju

Moteča točka pri obdelavi je, da moramo pojasniti vrsto spremenljivke. Posebno pozornost moramo posvetiti procesu števila s plavajočo vejico in vrsti celega števila.

tiskanje （6/5）; // rezultat 1

Operacija med celimi števili bo imela novo celo število. 6 deljeno s 5 je 1,2. Toda izhod programa je 1. To je v nasprotju z našo intuicijo. Program ne bo obravnaval kroga, ampak bo izbrisal številko za decimalno vejico.

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

Delovanje med plavajočimi točkami bo povzročilo novo številko plavajoče vejice. Če je dejanski rezultat 1,2, bo izhod programa enak.

tisk (6 / 5.0); // rezultat 1.2

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

Končno je mešanica celega števila in števila s plavajočo vejico. Končni rezultat bo 1,2.

• Pravzaprav morate upoštevati, da cilj te uredbe ni izgubiti točnosti podatkov. Če je torej en element številka s plavajočo vejico, bo rezultat tudi številka s plavajočo vejico.

8. korak: Nastavitvena funkcija in funkcija risanja

Prej smo govorili o kopici temeljnega znanja. Zdaj smo končno prišli odigrati nekaj zanimivega. Nastavitev in risanje funkcij sta enakovredni glavni funkciji obdelave. Ti dve funkciji sta zelo posebni. Lahko nadzoruje postopek programa. Sorazmerno zapleten program bo vključeval ti dve funkciji, ker sta osnovni okvir programa. Oblika:

void setup () {

}

void draw () {

}

Zaradi posebne uporabe se njihova oblika priklica razlikuje od drugih funkcij. Pred imenom funkcije moramo dodati "void", ki ne pomeni "vrnjene vrednosti". Za imenom funkcije moramo dodati oklepaje in oklepaje.

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

Poglejmo primer:

Ko pritisnete gumb za upravljanje, bo konzola najprej prikazala "1" in nato nenehno izpisala "2", dokler ne pritisnete gumba za zaustavitev ali zaprete okna.

Koda v oklepajih v namestitveni funkciji bo izvedena samo enkrat, medtem ko se bo koda v funkciji draw neprestano izvajala v obtoku (privzeta izvedba 60 -krat na sekundo).

Zaradi tega znaka se nastavitve običajno uporabljajo za inicializirane lastnosti okolja, kot so širina in višina zaslona, barva ozadja in vse vrste dodelitev spremenljivk. Čeprav funkcije risanja pogosto umeščamo v risanje funkcij, da ustvarimo neprestano spremenjene grafike.

9. korak: Krog v vodoravnem gibanju

S funkcijo draw lahko začnemo ustvarjati naše animacije. Način pisanja animacijskega učinka z obdelavo je precej "neroden". Nima nobenega obstoječega ukaza. Na primer, določite določeno obliko za ukrivljenost.

Te podrobnosti moramo določiti sami. Programu morate povedati, kakšno grafiko vsekakor potrebuje vsak okvir.

Vanj vnesite naslednjo kodo (zdaj začnimo to početi z rokami):

[cceN_cpp theme = "dawn"] int x; int y; void setup () {velikost (300, 300); x = 0; y = višina/2; } void draw () {ozadje (234, 113, 107); noStroke (); elipsa (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Ta del kode prikazuje gibljiv krog. Nekdanja deklarirana spremenljivka x, y se uporablja za shranjevanje položaja koordinate. Njegove naloge se izvajajo pri nastavitvi funkcije. Koda ključa je naslednja v žrebanju funkcij:

x = x + 1

Ne glejte na to kot na matematično enačbo, sicer bo zelo čudno. Tukaj je "＝" simbol za dodelitev. Predstavlja umestitev desnih številk v levo spremenljivko. Recimo, da je x 50, ko se koda zažene, je desna stran "＝" enaka 50+1, torej 51. Končni rezultat bo dodeljen spremenljivki x. Tako vrednost x postane 51.

Sledite postopku programa, vsakič, ko funkcija risanja enkrat deluje, se vrednost x poveča 1. Tako bo vsakič, ko rišemo, krog premaknil smer pikslov vodoravno v desno v primerjavi s prejšnjim okvirjem. Zato grafika postane gibljiva.

• Za boljšo berljivost kode moramo pred vsako vrstico kode v oklepaju rezervirati določeno sobo. In mora biti čim bolj usklajeno. Pritisnite tipko TAB ali več praznega prostora, lahko se umaknete.

• Simbol praznega prostora in prelom vrstice v programu ne bo vplival na program. Zato je v redu, če enega vnesemo več ali manj.

Tukaj je še enostavnejši način, kako to izraziti. Če želimo, da se spremenljiv krog samodejno poveča za 1, ga moramo zapisati v naslednji obliki.

krog ＝ krog ＋1

Precej neprijetno! Če je ime spremenljivke daljše, moramo vnesti več besed. Zato naši leni predhodniki razmišljajo o takšni zamisli.

krog ＋＋

Ali ni zelo preprosto? To pomeni samodejno povečanje 1. Podobno je tudi - -, kar pomeni samodejno zmanjšanje 1.

Če pa upamo, da je količina samodejnega povečanja drugo število, na primer 2, moramo poskusiti z drugim izrazom.

krog += 2

To je enako

krog = krog + 2

Podobno obstaja - ＝, /=, *=.

10. korak: Smer gibanja

V katero smer se grafika premakne, je odvisno od tega, kako spremenite svojo koordinato. Če ga spremenite v y ＝ y ＋ 1, se bo krog premaknil navzdol. Če oba x in y povečate 1, se bo krog pomaknil navzdol desno spodaj. Če napišemo, da je simbol minus, se bo pomaknil v nasprotni smeri.

[cceN_cpp theme = "dawn"] int x, y; // Lahko hkrati razglasim več spremenljivk, za ločevanje uporabite vejice. void setup () {velikost (300, 300); x = 0; y = 0; } void draw () {ozadje (234, 113, 107); noStroke (); elipsa (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Stopnja gibanja

Se spomnite privzetih 60 sličic na sekundo v okviru risanja funkcij? Glede na to hitrost se bo zgornji krog premaknil 60 pik na sekundo v desno.

Če želimo spremeniti hitrost grafičnega gibanja, obstajata dva načina: eden je, da vsakič, ko se bo spremenil, povečamo vrednost x.

x ＝ x ＋ 10

Hitrost je v primerjavi s prvotno izboljšala za 10 -krat!

Druga metoda je spreminjanje pogostosti osveževanja platna. frameRate ()

Ta funkcija lahko spremeni frekvenco oddajanja platna. FrameRate (10) vpišite v funkcijsko nastavitev in spremeni prvotnih 60 sličic na sekundo na 10 sličic na sekundo. Hitrost se upočasni za 6 -krat kot prej.

11. korak: spregledano ozadje

Vsi prejšnji primeri zapišejo ozadje v funkcijo draw. Ste kdaj pomislili, da bi to zapisali v nastavitve funkcij? Bo imela kakšne razlike? Posodobimo primer horizontalnega gibanja.

[cceN_cpp theme = "dawn"] int x, y; void setup () {velikost (300, 300); ozadje (234, 113, 107); x = 0; y = višina/2; } void draw () {noStroke (); elipsa (x, y, 50, 50); x += 1; } [/cceN_cpp]

Kaj se je zgodilo? Mogoče ne razume pravilno vzroka za nastanek težave. Izbrišite funkcijo noStroke, znova dodajte potezo in si oglejte pot gibanja kroga.

Oh, to je zato, ker predhodno ustvarjen krog ni bil izbrisan! Ker nastavitev funkcije deluje le enkrat, če nad njo napišemo ozadje, bo le enkrat zapolnila ozadje, nato pa ne bo več imela učinka. Ozadje funkcije je kot orodje za vedro barve. Ko bo enkrat uporabljen, bo zajemal vso vsebino na platnu, namesto da nastavi samo barvo ozadja. Zapišemo ga pred risanjem funkcije, tako da bo prejšnji okvir pokrit vsakič, ko ustvarimo nov vzorec. Zato lahko krog teče, kot smo pričakovali. Razen spominjanja na uporabo vsake funkcije moramo razmišljati o položaju kode. Veliko časa, vrstica navzgor ali navzdol za kodo in za njeno zapisovanje v oklepaju ali iz njega, bo ustvarilo precej različne učinke. Smer kode je dvodimenzionalna. Če se pojavi napaka, se moramo umeriti v tej dve dimenziji.

• Ta pravilna uporaba risbe, ki se ne ponavlja, lahko ustvari prav poseben učinek. Lahko kopirate naslednjo kodo in poskusite.

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

Tu smo uporabili čarobno spremenljivko mouseX in mouseY. Kasneje bomo o tem podrobneje govorili.

12. korak: Tresenje kroga

Kaj pa, če želim, da smer gibanja kroga postane nepravilna? S pametno naključno funkcijo lahko uresničite tudi ta učinek. Naključno je pogosto uporabljena funkcija. Uporablja se lahko za ustvarjanje naključne funkcije. To je kot duh brez sledi. Ko ste povezani s spremenljivkami, si ne morete predstavljati, kaj bo naslednje.

Oblika klica:

naključno (visoko)

Visoka predstavlja naključno zgornjo mejo, privzeta spodnja meja pa je 0. Na primer naključna (10). Naključno bo proizvedlo število od 0 do 10 (0 je vključeno, 10 pa ni vključeno).

naključno (nizko, visoko)

Če nastavimo dva parametra, se bo vrnil na naključno vrednost med njima. Na primer naključno (5, 10). Naključno bo proizvedlo število od 5 do 10 (5 je vključenih, 10 pa ni vključenih).

Primer:

[cceN_cpp theme = "dawn"] float x;

x = naključno (50, 100);

tisk (x); [/cceN_cpp]

Vsakič, ko zaženete program, bo konzola prikazala različne vrednosti.

• Opomba: Vrednosti, ki jih ustvari funkcija naključno, pripadajo tipu s plavajočo vejico (tip decimalnega števila). Če želimo vrednosti pripisati celoštevilsko spremenljivko, jo moramo pretvoriti s funkcijo int (). Pretvorba se ne upošteva okroglo, ampak neposredno izbriše decimalni del. Tako ima izhod int (naključno (5)) le 5 možnosti: 0, 1, 2, 3, 4.

Ko se seznanimo z uporabo naključne funkcije, lahko pridemo neposredno v spodnji primer.

[cceN_cpp theme = "dawn"] int x, y; void setup () {velikost (300, 300); x = širina/2; y = višina/2; } void draw () {ozadje (234, 113, 107); noStroke (); x += int (naključno (-5, 5)); y += int (naključno (-5, 5)); elipsa (x, y, 50, 50); }

[/cceN_cpp]

Dosedanje dodane vrednosti koordinat so fiksne. Samo če povečamo naključno vrednost, se bo krog premaknil v nedoločeno smer. Z večjim naključnim razponom se pogosteje trese. Ker se sprememba vrednosti med okvirji odbija, premikanje ne bo več gladko. Medtem ko je prvi okvir pri (150, 150), se bo drugi okvir za trenutek premaknil v položaj (170, 170).

13. korak: Selitveni krog

Selitveni krog

Bo ustvaril nemoteno gibanje? Funkcijski hrup nam lahko pomaga. Ima boljši ritem kot standardni naključni. In naključno ustvarjene naključne številke so neprekinjeno.

Oblika klica:

hrup （t）

Funkcijski šum ne more opredeliti svojega izhodnega območja. Program definira, da lahko generira samo številke s plavajočo vejico od 0 do 1, fiksni vhod pa ima lahko samo stalen izhod.

[cceN_cpp theme = "dawn"] float x = hrup (5); float y = hrup (5); tiskanje (x, y); [/cceN_cpp]

Ker so zgornji vhodni parametri 5, so izhodni rezultati enaki. Kako potem spremeniti rezultat? Odgovor je, da dinamično spremenite vhodne parametre. Pravzaprav lahko šum obravnavamo kot neomejen glasovni posnetek, vhodni parametri so podobni "sedanjemu času". Če je vnos parametra neprekinjen, bo tudi izhod neprekinjen.

[cceN_cpp theme = "dawn"] float x, y; void setup () {velikost (700, 100); x = 0; ozadje (0); } void draw () {x += 1; y = hrup (frameCount/100.0)*100; noStroke (); elipsa (x, y, 2, 2); }

[/cceN_cpp]

V tem primeru narišemo pot spreminjanja Y, da bomo bolje razumeli funkcijski šum.

• Med njimi bo spremenljiv frameCount pridobil sedanji okvir. Za razliko od širine in višine v prejšnjem je stabilen brez kakršnih koli sprememb. Poleg tega se začne povečevati od 0. Če ga razumemo z začetno animacijo, prikazuje stran, na katero smo se obrnili (namesto časovne zasnove v programu).

• frameCount je celoštevilska spremenljivka. Program, deljen z drugo celoštevilsko spremenljivko, privzeto obdela rezultat v celo število. Da bi izboljšali natančnost rezultata, moramo spremeniti 100 na 100,0. Razdeljeno s številom s plavajočo vejico bomo dobili tudi število s plavajočo vejico.

• Za spremembo osi Y z 0 na 100 moramo rezultat hrupa pomnožiti s 100. Tako lahko nadzorujemo območje naključnih vrednosti.

Nekateri izmed vas, ki dobro razmišljate, bi se lahko vprašali "zakaj moramo frameCountby 100 razdeliti? Ali ni v redu, da frameCount napišete neposredno?" Seveda lahko! Toda tukaj, da bi bolje prikazali značilnosti funkcijskega šuma, upočasnimo "hitrost oddajanja". Spodnji primer prikazuje spremembe izhodne vrednosti pri različnih stopnjah sprememb.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; void setup () {velikost (700, 500); x = 0; ozadje (0); } void draw () {x += 1; y1 = hrup (frameCount)*100; y2 = hrup (frameCount/10.0)*100; y3 = hrup (frameCount/100.0)*100; y4 = hrup (frameCount/1000.0)*100; y5 = hrup (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); kap (80); vrstica (0, 100, širina, 100); vrstica (0, 200, širina, 200); vrstica (0, 300, širina, 300); vrstica (0, 400, širina, 400); }

[/cceN_cpp]

Spreminjanje parametrov znotraj hrupa funkcije lahko obravnavate kot vrstico napredka. Sprememba parametra je podobna premiku vrstice napredka. Torej, ko je obseg spreminjanja tega "glasovnega posnetka" večji, bodo sprednje in zadnje neprekinjene lastnosti izhodne vrednosti šibkejše. (Lahko si predstavljamo, kaj se bo zgodilo, če predvajamo skladbo ali video z 2 -kratno hitrostjo, 5 krat hitrost, 20 -kratna hitrost). Ko je obseg večji od določene vrednosti, potem pri ustvarjanju vrednosti nima velike razlike pri naključnem delovanju.

Če razumete vse zgornje primere, se vam bo zdelo, da ni lažje narisati selitvenega kroga. Razumete lahko tudi notranja načela.

[cceN_cpp theme = "dawn"] float x, y; void setup () {velikost (300, 300); x = 0; } void draw () {ozadje (234, 113, 107); x = hrup (frameCount/100.0 + 100)*300; y = hrup (frameCount/100.0)*300; noStroke (); elipsa (x, y, 50, 50); }

[/cceN_cpp]

Zdaj je gibanje bolj zanimivo tako kot vrtljivi žiroskop.

• Razlog, zakaj mora spremenljivka x v funkcijskem šumu biti plus 100, je zato, da jih ločimo na razdaljo. Če so parametri xy znotraj šuma funkcije enaki ali precej blizu, se bo sprememba koordinate x, y približala enaki. To pomeni, da bo gibanje postalo veliko bolj naključno.

14. korak: Krog premakne miška

Nato končno pridemo do dveh spremenljivk, ki so mi najbolj všeč: mouseX in mouseY. Ob prvem pogledu na oba spočetja mi oči blešči od svetlobe. Ker je to najbolj neposreden način interakcije z grafiko. Z njim lahko ustvarimo veliko zanimivih programov.

Primer je precej preprost:

[cceN_cpp theme = "dawn"] int x, y; void setup () {velikost (300, 300); x = 0; y = 0; } void draw () {ozadje (234, 113, 107); noStroke (); x = mišX; y = miš Y; elipsa (x, y, 50, 50); }

[/cceN_cpp]

mouseX lahko pridobi x koordinato miške, medtem ko mouseY lahko dobi y koordinato.

• Poskusimo spremeniti pozitivni in negativni simbol ali zamenjati mouseX in mouseY.

Korak 15: Konec

Iz teh znanih ukazov boste morda lahko vodili premikanje grafike. Z vsebino zadnjega poglavja, pravilno uporabite svojo domišljijo, lahko ustvarite veliko zanimivih animiranih učinkov.

V naslednjem poglavju lahko vidimo obilnejše primere. Hkrati bomo uporabili matematične funkcije in jih združili z grafičnim gibanjem.

Ta članek prihaja od oblikovalca Wenzyja.

16. korak: Relativni odčitki:

Zanimiv programski vodnik za oblikovalca-obdelava začetnega dotika

Zanimiva programska navodila za oblikovalca-ustvarite svoj prvi program za obdelavo

Ta članek je iz:

Če potrebujete pomoč, se lahko obrnete na: [email protected].