Zaujímavé programovacie pokyny pre dizajnéra-urobte si predstavu (druhá časť): 8 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

Matematika sa pre väčšinu z vás zdá zbytočná. V našom každodennom živote sa najčastejšie používa iba sčítanie, odčítanie, násobenie a delenie. Je však úplne iné, ak môžete vytvárať pomocou programu. Čím viac budete vedieť, tým úžasnejší výsledok dosiahnete.

Krok 1: Pohyb a funkcie

Ukážem vám niekoľko neznámych obrázkov na stimuláciu chuti.

Čo je toto? Teraz si najskôr ponechajte túto otázku a potom ju budete vedieť a používať.

V poslednej kapitole sme sa naučili nastavenie funkcií a kreslenie funkcií, vďaka ktorým sa statická grafika môže stať dynamickou. Tento formát pohybu je však príliš jednoduchý. Znalosti funkcií, ktoré sme predtým ovládali, použijeme na spustenie grafiky s vlastným charakterom.

Koľko funkcií poznáte z vyššie uvedených obrázkov? Aký majú vzťah k pohybu? Teraz z toho vyberieme kvadratickú funkciu, náhodne pridáme niektoré parametre a uvidíme, čo sa stane. Napríklad y = x² / 100.

Takto vyzerá obrázok funkcie. Skopírujte kód nižšie.

[cceN_cpp theme = "dawn"] float x, y; void setup () {veľkosť (300, 300); pozadie (0); x = 0; } void draw () {zdvih (255); zdvihová hmotnosť (2); y = prášok (x, 2) / 100,0; // Funkcia pow sa vráti k n -tej mocnine čísla označenia. (x, 2) predstavuje štvorec x. Prvý parameter je základné číslo a druhý je index. bod (x, y); x ++; } [/cceN_cpp]

Efekt behu

Ďalej zvoľte funkciu hriech. Vzorec: y = 150 + hriech (x).

Skopírujte nasledujúci kód.

[cceN_cpp theme = "dawn"] float x, y; void setup () {veľkosť (300, 300); pozadie (0); x = 0; } neplatné kreslenie () {y = výška/2 + hriech (radiány (x)) * 150; // Funkčná radián transformuje x na uhol. x ++; mŕtvica (255); zdvihová hmotnosť (2); bod (x, y); } [/cceN_cpp]

Efekt behu

Toto je grafika, ktorú dostaneme po použití kódu. A to sú ich pohybové stopy. V porovnaní s predchádzajúcim je výsledok zrejmý. Funkčný obraz skutočne zodpovedá pohybovej stope! Je to dosť jednoduché. Stačí nahradiť hodnotu x, y do súradnice. Prvá stopa, ktorú sme nakreslili, je ekvivalentná grafike funkcie y = x² / 100. Zatiaľ čo druhá stopa sa rovná grafike funkcie y = 150 + sin (x). V programe je však smer osi y opačný. V porovnaní s pôvodnou grafikou teda bude trať hore nohami. Teraz hádam musíte mať pocit, že niektoré ťažké otázky, ktoré vám v hlave už dlho kolujú, sú okamžite vyriešené. Je úžasné, že tieto fantastické funkcie, ktoré sme sa predtým naučili, môžu byť použité na ovládanie grafického pohybu!

Krok 2: Napíšte funkciu

Nasleduje zoznam niekoľkých často používaných funkcií. Dúfam, že nám to môže pomôcť pri preklade funkcií do kódu, ktorý môže počítač rozpoznať.

Preto nasledujúci vzorec v programe bude napísaný takto:

y = x² → y = prášok (x, 2) alebo y = sq (x)

y = x³ → y = prášok (x, 3)

y = xⁿ → y = prášok (x, n)

y = 4ⁿ → y = prášok (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

Môžete tiež náhodne napísať funkciu do programu a zistiť, ako bude vyzerať jej pohybová stopa. Nezabudnite vziať do úvahy rozsah hodnotového poľa a definičnej domény, inak sa vám grafika bude zobrazovať mimo obrazovku.

Trigonometrická funkcia

Teraz poďme ďalej poznať niektoré spisy trigonometrických funkcií.

Musíme dbať na to, aby v programe vstup funkčného parametra vzhľadom na uhol prijal radián. Sin90 ° sa teda zapíše do sin (PI ／ 2). Ak nie ste oboznámení s touto metódou, môžete pomocou funkcie randian vopred transformovať uhol na radián a potom napísať sin （radiány (90)).

Použitie stupňov funkcií je pomerne opačné. Dokáže transformovať radián na uhol. Zadajte tlač (v stupňoch (PI/2)) priamo do oblasti úprav a uvidíte, čo získate.

Krok 3: Ovládajte grafický pohyb s trigonometrickou funkciou

Tu je prípad, keď chcete vidieť skutočný efekt grafického pohybu.

[cceN_cpp theme = "dawn"] float x, y; void setup () {veľkosť (700, 300); } void draw () {pozadie (234, 113, 107); y = hriech (radiány (x)) * 150 + 150; x ++; noStroke (); elipsa (x, y, 50, 50); } [/cceN_cpp]

Funkcia hriech je periodická funkcia. Jeho minimálna hodnota je －1 a maximálna hodnota je 1. Výška obrazovky je 300. Vzťahuje sa na y = sin (radiány (x)) * 150 + 150, preto bude rozsah zmeny hodnoty y dobre kontrolovaný do 0 do 300.

Rotujúci kruh

Nakoniec sme sa dostali k najdôležitejšej časti tejto kapitoly. Ako nakresliť kruhovú cestu v programe? Ako používať funkcie na jeho zobrazenie? Ukážem vám opäť dva obrázky, ktoré sme videli na začiatku tohto článku.

V skutočnosti vizuálne odhalili vzťah medzi obvodovými súradnicami a goniometrickou funkciou. Pohyb na vyššie uvedených obrázkoch je poháňaný neustále rastúcou nezávislou premennou θ. Vľavo je obraz funkcie sin a cos a vpravo predstavuje bod, ktorý po mapovaní robí kruhový pohyb. Nie je to veľmi múdre? Už to nie je také tajomné. Na jeho realizáciu môžete použiť kód.

Jednoduchý príklad:

[cceN_cpp theme = "dawn"] float x, y, r, R, uhol; void setup () {veľkosť (300, 300); r = 20; // priemer kruhu R = 100; // Polomer dráhy pohybu x = 0; uhol = 0; y = výška/2; } void draw () {pozadie (234, 113, 107); prekladať (šírka/2, výška/2); // Presunutie pôvodného bodu do stredu obrazovky. noStroke (); x = R * cos (uhol); y = R * sin (uhol); elipsa (x, y, r, r); uhol += 0,05; } [/cceN_cpp]

Pozrite sa! Objaví sa rotujúci kruh! Tu nezávislá premenná už nie je v konštantnom náraste bitu do uhla (rovná sa θ na obrázku). Je to skratka pre uhol. Medzi nimi xy majú relatívne vynásobený koeficient R, čo vedie k predĺženiu polomeru pohybu kruhu (R je pre polomer). Ak nemá znásobovať R, jeho dráha pohybu bude obmedzená v rozsahu od -1 do 1.

Prečo nepoužiť zväčšujúce sa x? Podľa vlastnosti samotnej funkcie má akékoľvek x v definičnej doméne jediné y, ktoré sa jej zhoduje. V rovinnom obdĺžnikovom súradnicovom systéme nemôžete nájsť „jednoduchú funkciu“na priame kreslenie kruhu. To znamená, že tento formát už nemôžeme používať.

y = (Neznámy výraz x?);

x ＋＋;

Musíme teda zmeniť svoju predstavu. Vyberte iný uhol ako nezávislú premennú a potom ho pomocou funkcie sin a cos transformujte do horizontálnych a vertikálnych súradníc.

x = R * cos (uhol);

y = R * sin (uhol);

uhol += 0,05;

Niektorí z vás sa môžu čudovať, prečo môže zobrazovať cestu kruhového pohybu. Podľa definície goniometrickej funkcie môžeme túto funkciu ľahko zdôvodniť pomerom opačnej strany k prepone; funkcia cos je pomer susedných k preponám. Bez ohľadu na to, kde je bod kruhu, r (polomer) zostane nezmenený. Preto môžeme uzavrieť vyjadrenie súradnice x a súradnice y.

Pretože to nie je matematické vedenie, tu vám prestanem zobrazovať viac znalostí o goniometrickej funkcii. Ak to chcete vedieť alebo na to zabudnete, môžete to skúsiť zopakovať sami.

Samozrejme, je to v poriadku, ak tomu nemôžete úplne porozumieť. Musíte len vedieť, ako ho použiť na nakreslenie kruhu. Je to tiež druh „programovacej myšlienky“. Neskôr budeme často vyvolávať niektoré z existujúcich modulov vytvorených inými na realizáciu určitého druhu funkcie. Netlačte na to, aby ste to vedeli podrobne.

Funkcia hriech a cos je však bežná. Ak chcete vytvoriť tvorbu na vyššej úrovni, pokúste sa to dôkladne poznať. Ak vás táto otázka sama osebe môže prinútiť naučiť sa viac matematických znalostí, čakajú vás ďalšie zaujímavé veci.

Toto sú obrázky úzko súvisiace s goniometrickou funkciou.

Krok 4: Pohybový súradnicový systém

Predchádzajúce efekty sa týkajú predovšetkým zmeny grafických súradníc. Samotný súradnicový systém je statický. V skutočnosti môžeme urobiť súradnicový pohyb, aby sme dosiahli pohybový efekt. Je to podobné, ako keby ľudia na pláži sledovali ostatných ľudí na lodi. Pre ľudí na lodi je čln statický. Ale čo keď sa pohybuje samotný čln, tak s ním pohybujú aj ľudia v člne. V prvých prípadoch ide o „ľudí behajúcich na lodi“. V skutočnosti sa čln nehýbe. Nasledujú niektoré bežné funkcie na zmenu súradnicového systému.

Preklad funkcií

Funkčný preklad, o ktorom sme už hovorili, slúži na horizontálny pohyb súradnicového systému grafiky.

Vyvolať formát:

preložiť (a, b)

Prvý parameter znamená posun v kladnom smere osi x pre pixely. Druhý parameter znamená posun do kladného smeru osi y pre b pixelov.

Porovnajte tieto dva kódy a pokúste sa nájsť nejaký rozdiel. (Aby sme zjednodušili kód, môžeme odstrániť veľkosť funkcie, šírka a výška obrazovky sú predvolene 100.)

Pred použitím:

elipsa (0, 0, 20, 20);

Potom, čo použijeme:

translate (50, 50);

elipsa (0, 0, 20, 20);

Otočenie funkcie

Vyvolať formát:

otočiť (a)

Používa sa na otáčanie súradnicového systému. Keď je parameter kladný, vyberie pôvodný bod ako stredový bod a bude sa otáčať v smere hodinových ručičiek. Vstup parametrov je rovnaký ako pre goniometrickú funkciu na použitie radiánu.

Pred použitím:

elipsa (50, 50, 20, 20);

Po použití:

rotácia (radiány (30));

elipsa (50, 50, 20, 20);

Účinok v programe je, že kruh sa otáča okolo stredového bodu súradnice v smere hodinových ručičiek o 30 stupňov.

Funkčná škála

Vyvolať formát:

mierka (a)

Táto funkcia môže oddialiť súradnicový systém. Hodnota je pre zmenu mierky. Ak je parameter vyšší ako 1, priblížte zobrazenie; ak je nižšia ako 1, oddialte zobrazenie.

Pred použitím:

elipsa (0, 0, 20, 20);

Po použití:

stupnica (4);

elipsa (0, 0, 20, 20);

Kruh na obrázku vyššie je zosilnený na štyrikrát pôvodnej veľkosti. Môžete tiež použiť dva parametre na oddialenie v smere x nápravy a osi y oddelene.

stupnica (4, 2);

elipsa (0, 0, 20, 20);

Superpozícia transformačnej funkcie

Superpozícia je tu predovšetkým o zmenách v porovnaní so súčasným súradnicovým systémom. Inými slovami, efekty je možné prekrývať.

translate (40, 10);

translate (10, 40);

elipsa (0, 0, 20, 20);

Jeho konečný efekt sa bude rovnať

translate (50, 50);

elipsa (0, 0, 20, 20);

Rovnaké ako pri otáčaní

rotácia (radiány (10));

rotácia (radiány (20));

elipsa (50, 50, 20, 20);

Rovná sa

rotácia (radiány (30));

elipsa (50, 50, 20, 20);

Fungujú ako mierka, tak aj stred otáčania v pôvodnom bode na zmenu mierky a otočenie. Ak chceme dosiahnuť efekt rotácie so stredovou polohou na (50, 50), musíme uvažovať opačne. Najprv posuňte pôvodný bod do polohy (50, 50) a potom pridajte rotačnú transformačnú funkciu. Nakoniec urobte grafiku namaľovanú na pôvodnom bode.

Pred použitím:

elipsa (50, 50, 50, 20);

Po použití:

translate (50, 50);

rotovať (radiány (45));

elipsa (0, 0, 50, 20); // Aby sme videli zmenu uhla otočenia, urobili sme ovál.

Mohlo by sa to zdať krútiace. Musíte viac cvičiť, potom to pochopíte. (Môžete tiež skúsiť zmeniť postupnosť prekladania a otáčania funkcií, aby ste videli rozdiel.)

Horizontálny pohyb a kruhový pohyb

V nasledujúcich prípadoch budeme realizovať pohybový efekt prostredníctvom zmeny súradnicového systému. Zároveň by som vás chcel požiadať, aby ste sa odvolali na príklad predchádzajúcej kapitoly. Väčšinu času zistíte, že na dosiahnutie určitého druhu účinku môžete použiť úplne inú metódu.

Krok 5: Horizontálny pohyb

[cceN_cpp theme = "úsvit"]

int x, y; void setup () {veľkosť (300, 300); x = 0; y = výška/2; } void draw () {pozadie (234, 113, 107); noStroke (); translate (x, y); elipsa (0, 0, 50, 50); x ++; } [/cceN_cpp]

Súradnica kruhu sa nezmení, ale zmení sa jeho súradnicový systém.

Otočiť pohyb

[cceN_cpp theme = "dawn"] float r, R, uhol; void setup () {veľkosť (300, 300); r = 20; // Rozmer kruhu R = 100; // polomer pohybovej stopy} neplatne draw () {pozadie (234, 113, 107); prekladať (šírka/2, výška/2); // Presunutie pôvodného bodu do stredu obrazovky. otočiť (uhol); noStroke (); elipsa (0, R, r, r); uhol += 0,05; } [/cceN_cpp]

Nie je to oveľa jasnejšie a jednoduchšie ako trigonometrická funkcia? Tu môžete mať otázku. Vezmite ako príklad rotačný kód. Vyššie uvedená transformačná funkcia je evidentne relatívna a umožňuje superpozíciu. Ak do kreslenia funkcií napíšeme preklad (šírka/2, výška/2), neznamená to, že zakaždým, keď sa kreslenie funkcií spustí raz, súradnicový systém posunie vzdialenosť v pravom dolnom smere od pôvodnej základne? Rozumne nezostane v strede obrazovky navždy.

Môžete to pochopiť týmto spôsobom. Akonáhle kód v kreslení funkcií dokončí operáciu zhora nadol, súradnicový systém sa vráti do počiatočného stavu pri druhej operácii. Pôvodný bod súradnicového systému bude predvolený, aby sa vrátil späť do ľavého horného rohu. Ak teda chceme, aby sa súradnicový systém kontinuálne menil, parametre uhla v rámci funkcie rotácie budú neustále zvyšovať jeho hodnotu.

Prístup k stavu súradníc

Niekedy nechceme, aby zmena stavu súradnicového systému bola založená na predchádzajúcom. V súčasnej dobe musíme používať funkciu pushMatrix a popMatrix. Tieto dve funkcie sa zvyčajne objavujú v páre. Funkcia pushMatrix je pred popMatrix. Nemôžu byť použité výlučne, inak sa pokazí.

Príklad:

[cceN_cpp theme = "dawn"] pushMatrix (); // Preklad stavu súradnicového systému (50, 50); elipsa (0, 0, 20, 20); popMatrix (); // Prečítajte stav súradnicového systému rect (0, 0, 20, 20); [/cceN_cpp]

V tomto prípade pred použitím funkcie translate (50, 50) použijeme funkciu pushMatrix.na uloženie aktuálneho stavu súradnicového systému. Toto je zároveň počiatočný stav. Potom, čo nakreslíme kruh, potom implementujeme popMatrix, sa vráti do tohto stavu. V súčasnej dobe implementujte funkciu rect, zistíte, že neutrpela vplyvom prekladača funkcií, namiesto toho nakreslí štvorec v ľavom hornom rohu pôvodného bodu.

Okrem toho funkcie pushMatrix a popMatrix umožňujú vnorenie.

Napríklad

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Aby sme jeho vzťah intuitívne ukázali, zvolili sme formát kondenzácie.

Kombinovaný pohyb alebo pohyb v pohybe?

Teraz začína druhá vlna dôležitej časti. Skúste sa len tlačiť dopredu. Predtým sme používali metaforu lodí a ľudí. Rozmýšľali ste niekedy nad tým, čo keď prinútime ľudí aj loď k pohybu, aký pocit budú mať ľudia na pláži?

Rovnako ako kombinovať horizontálny pohyb s rotujúcim pohybom súradnicového systému. Ide tu vlastne o pohyb iba v smere.

[cceN_cpp theme = "dawn"] int x, y; plavákový uhol; void setup () {veľkosť (300, 300); pozadie (234, 113, 107); noStroke (); x = 0; // Keď je počiatočná hodnota x 0, môžeme túto vetu kódu zanedbať. Pri deklarovaní premennej je predvolená hodnota 0. y = 0; // To isté ako vyššie. uhol = 0; // To isté ako vyššie. } neplatné kreslenie () {uhol += 0,25; y--; preložiť (šírka/2, výška/2); pushMatrix (); otočiť (uhol); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

A existujú kruhový pohyb a škálovanie súradnicového systému.

[cceN_cpp theme = "dawn"] float x, y, uhol; void setup () {veľkosť (300, 300); pozadie (234, 113, 107); noStroke (); } neplatné kreslenie () {uhol += 0,01; x = hriech (uhol) * 100; y = cos (uhol) * 100; preložiť (šírka / 2, výška / 2); pushMatrix (); mierka (1 + 0,1 * sin (uhol * 10)); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Nenechajte sa tým oklamať! Bod kruhu v skutočnosti robí kruhový pohyb. Nie je ťažké pochopiť, ak to porovnáme so škálovaním pomocou videokamery. Videokamera, ktorá sa neustále pohybuje dopredu alebo dozadu, sníma bod kruhovým pohybom.

Prekvapený? Ide o jednoduché základné funkcie. Ale pomocou rôznych kombinácií môžeme vytvoriť toľko rôznych efektov. Doteraz sa moje pôsobenie zastavilo, aby mi uvoľnilo miesto na skúmanie.

Krok 6: Komplexné použitie

V tejto kapitole sa čoskoro končí. V posledných dvoch kapitolách som predstavil základný spôsob grafického pohybu. Verím, že v porovnaní s vašimi pôvodnými predstavami by ste to mohli pochopiť hlbšie. Nakoniec, tu je niekoľko dokončených príkladov pre vašu referenciu.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; uhol plávania1, uhol2; void setup () {veľkosť (300, 300); r = 12; R = 120; uhol1 = 0; uhol2 = PI/4; } void draw () {pozadie (234, 113, 107); noStroke (); prekladať (šírka / 2, výška / 2); uhol1 += 0,02; uhol2 += 0,06; x1 = R *sin (uhol1); y1 = R* cos (uhol1); x2 = R/2 *sin (uhol2); y2 = R/2 *cos (uhol2); elipsa (x1, y1, r/2, r/2); elipsa (x2, y2, r, r); elipsa (-x1, -y1, r/2, r/2); elipsa (-x2, -y2, r, r); elipsa (x1, -y1, r/2, r/2); elipsa (x2, -y2, r, r); elipsa (-x1, y1, r/2, r/2); elipsa (-x2, y2, r, r); mŕtvica (255); zdvihová hmotnosť (3); riadok (x1, y1, x2, y2); riadok (-x1, -y1, -x2, -y2); riadok (x1, -y1, x2, -y2); riadok (-x1, y1, -x2, y2); } [/cceN_cpp]

Tento príklad neobsahuje žiadne znalosti presahujúce našu predchádzajúcu uvedenú kapitolu.

O ktoré bodové zápasy? Ktoré riadky sa zhodujú? Tiež na to nemôžem prísť. Ale pamätám si, že to pochádza z malej časti kódu.

Toto je povaha jeho pohybu. Ostatné čiary sú len zrkadlovým efektom. Ak budete naďalej postupovať podľa týchto pokynov, môžete vytvoriť aktualizovanú verziu a pridať do grafiky ovládač, aby ste v reálnom čase zmenili stav svojho grafického pohybu.

Zaujímavý bod programovania spočíva v tom, že môžete navrhovať alebo kombinovať predpisy. Aký bude konečný program, však závisí od vašich schopností. Dizajnéri majú zvyčajne silnú grafickú predstavivosť. Môžete si nakresliť obrázok v hlave a potom sa ho pokúsiť preložiť do kódu. Môžete tiež začať od samotného kódu a predpisov, návrhov funkcií a premenných podľa vlastného uváženia. Pamätajte si, že spracovanie je váš náčrt a kód sú vaše štetce! Jednoducho sprejujte svoje nápady voľne!

Krok 7: KONIEC

Nakoniec v našej kapitole sa vráťme k otázke, ktorú sme si dlho uchovávali od začiatku. Čo je to použitie vynaloženého toľkého úsilia na vytvorenie obrázku s programom? Potom, čo ste sa naučili túto kapitolu, zistíte, že existuje toľko spôsobov hrania, ktoré čakáte na preskúmanie.

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; void setup () {veľkosť (500, 500); } void draw () {pozadie (200, 0, 0); browX = 150 + sin (frameCount / 30,0) *20; uchoD = 180 + hriech (frameCount / 10,0) *20; okoD = 60 + hriech (počet snímok/30,0) *50; tvárD = 300; zdvihová hmotnosť (8); elipsa (175, 220, ucho D, ucho D); elipsa (šírka - 175, 220, ucho D, ucho D); rect (100, 100, faceD, faceD); riadok (browX, 160, 220, 240); riadok (width-browX, 160, width-220, 240); fill (random (255), random (255), random (255)); elipsa (175, 220, okoD, okoD); elipsa (šírka-175, 220, okoD, okoD); výplň (255); bod (šírka/2, výška/2); trojuholník (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, šírka - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Nie je to mágia pre dynamickú grafiku? Tu vám neukazujem príliš veľa prípadov. Možno dokážete navrhnúť oveľa lepší efekt ako ja. Výhodou kreslenia pomocou programu je, že môžete hrať s každým pixelom. Pretože vaša grafika nie je bitmapová, každý kľúčový bod vašej grafiky je možné ovládať. Môže realizovať niektoré efekty, ktoré iný softvér nedokáže realizovať.

Ak máte srdce, ktoré chce všetko zlomiť a znova skombinovať, študijný program vám k naplneniu tejto myšlienky veľmi pomôže.

Tento článok pochádza od návrhára Wenzyho.

Krok 8: Relatívne hodnoty:

Zaujímavé programovacie pokyny pre návrhára-úvodný dotyk spracovania

Zaujímavé programovacie pokyny pre návrhára-vytvorte si svoj prvý program spracovania

Zaujímavé programovacie pokyny pre návrhára - urobte si predstavu (prvá časť)

V prípade akýchkoľvek otázok môžete poslať e -mail na adresu [email protected].

Tento článok pochádza z: