Zajímavé programovací pokyny pro designéra-Nechte si obraz spustit (část druhá): 8 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:18

Matematika se pro většinu z vás zdá zbytečná. V našem každodenním životě se nejčastěji používá pouze sčítání, odčítání, násobení a dělení. Je však zcela jiné, pokud můžete vytvářet pomocí programu. Čím více toho budete vědět, tím úžasnějšího výsledku dosáhnete.

Krok 1: Pohyb a funkce

Ukážu vám několik neznámých obrázků, které povzbudí váš vkus.

Co to je? Nyní si ponechte tuto otázku jako první a druhou ji budete znát a používat.

V poslední kapitole jsme se naučili nastavení funkcí a kreslení funkcí, díky kterým se statická grafika může stát dynamickou. Tento formát pohybu je však příliš jednoduchý. Znalosti funkcí, které jsme si předtím osvojili, použijeme ke spuštění naší grafiky s jejich vlastním charakterem.

Kolik funkcí poznáte z výše uvedených obrázků? Jaký mají vztah k pohybu? Nyní z něj vybereme kvadratickou funkci, přidáme náhodně některé parametry a uvidíme, co se stane. Například y = x² / 100.

Takto vypadá obrázek funkce. Zkopírujte níže uvedený kód.

[cceN_cpp theme = "dawn"] float x, y; neplatné nastavení () {velikost (300, 300); pozadí (0); x = 0; } void draw () {tah (255); strokeWeight (2); y = prášek (x, 2) / 100,0; // Funkce pow se vrátí k n -té mocnině čísla označení. (x, 2) představuje druhou mocninu x. První parametr je základní číslo a druhý je index. bod (x, y); x ++; } [/cceN_cpp]

Efekt běhu

Dále zvolte funkci sin. Vzorec: y = 150 + sin (x).

Zkopírujte následující kód.

[cceN_cpp theme = "dawn"] float x, y; neplatné nastavení () {velikost (300, 300); pozadí (0); x = 0; } neplatné kreslení () {y = výška/2 + hřích (radiány (x)) * 150; // Funkční radián transformuje x na úhel. x ++; mrtvice (255); strokeWeight (2); bod (x, y); } [/cceN_cpp]

Efekt běhu

Toto je obrázek, který získáme po ovládání kódu. A to jsou jejich pohybové stopy. Ve srovnání s předchozím je výsledek zřejmý. Funkční obraz ve skutečnosti odpovídá pohybové stopě! Je to dost jednoduché. Stačí nahradit hodnotu x, y do souřadnic. První stopa, kterou jsme nakreslili, je ekvivalentní grafice funkce y = x² / 100. Zatímco druhá stopa se rovná grafice funkce y = 150 + sin (x). V programu je však směr osy y opačný. Ve srovnání s původní grafikou tedy bude trať vzhůru nohama. Myslím, že teď musíte mít pocit, že některé obtížné otázky, které vám dlouho pronikají do hlavy, jsou vyřešeny okamžitě. Je úžasné, že tyto fantastické funkce, které jsme se dříve naučili, lze použít k ovládání grafického pohybu!

Krok 2: Funkce zápisu

Níže jsem uvedl několik často používaných funkcí. Doufám, že nám to může pomoci přeložit funkce do kódu, který může počítač rozpoznat.

Proto vzorec níže v programu bude napsán takto:

y = x² → y = prášek (x, 2) nebo y = sq (x)

y = x³ → y = pow (x, 3)

y = xⁿ → y = pow (x, n)

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

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

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

Můžete také náhodně napsat funkci do programu a zjistit, jak bude vypadat její pohybová stopa. Nezapomeňte vzít v úvahu rozsah hodnotového pole a definiční domény, jinak vaše grafika dojde z obrazovky.

Trigonometrická funkce

Nyní pojďme dále, abychom poznali některé spisy goniometrických funkcí.

Musíme věnovat pozornost tomu, že v programu vstup funkčního parametru vzhledem k úhlu přijímá radián. Sin90 ° se tedy zapíše do sin (PI ／ 2). Pokud tuto metodu neznáte, můžete pomocí funkce randian předem převést úhel na radián a poté zapsat sin （radiány (90)).

Použití stupňů funkcí je poměrně opačné. Dokáže transformovat radián na úhel. Zadejte tisk (stupně (PI/2)) přímo do oblasti úprav a uvidíte, co získáte.

Krok 3: Ovládejte grafický pohyb s trigonometrickou funkcí

Zde je případ, kdy můžete vidět skutečný efekt grafického pohybu.

[cceN_cpp theme = "dawn"] float x, y; neplatné nastavení () {velikost (700, 300); } void draw () {pozadí (234, 113, 107); y = hřích (radiány (x)) * 150 + 150; x ++; noStroke (); elipsa (x, y, 50, 50); } [/cceN_cpp]

Funkce sin je periodická funkce. Jeho minimální hodnota je －1 a maximální hodnota je 1. Výška obrazovky je 300. Vztahuje se k y = sin (radiány (x)) * 150 + 150, proto bude rozsah změny hodnoty y dobře kontrolován do 0 do 300.

Rotující kruh

Konečně jsme se dostali k nejdůležitější části této kapitoly. Jak nakreslit kruhovou cestu v programu? Jak používat funkce k jeho zobrazení? Ukážu vám znovu dva obrázky, které jsme viděli na začátku tohoto článku.

Ve skutečnosti vizuálně odhalili vztah mezi obvodovou souřadnicí a goniometrickou funkcí. Pohyb na výše uvedených obrázcích je řízen neustále rostoucí nezávislou proměnnou θ. Vlevo je obraz funkce sin a cos a vpravo znamená bod, který po mapování provádí kruhový pohyb. Není to moc chytré? Už to není tajemné. K jeho realizaci můžete použít kód.

Jednoduchý příklad:

[cceN_cpp theme = "dawn"] float x, y, r, R, úhel; neplatné nastavení () {velikost (300, 300); r = 20; // Průměr kruhu R = 100; // Poloměr dráhy pohybu x = 0; úhel = 0; y = výška/2; } void draw () {pozadí (234, 113, 107); překládat (šířka/2, výška/2); // Přesuňte původní bod do středu obrazovky. noStroke (); x = R * cos (úhel); y = R * sin (úhel); elipsa (x, y, r, r); úhel += 0,05; } [/cceN_cpp]

Koukni se! Objeví se rotující kruh! Zde nezávislá proměnná již není v konstantním nárůstu bit se stane úhlem (odpovídá θ na obrázku). Je to zkratka pro úhel. Mezi nimi má xy relativně vynásobený koeficient R, což vede k prodloužení poloměru pohybu kruhu (R je pro poloměr). Pokud nemá znásobit R, bude jeho pohybová cesta omezena v rozsahu od -1 do 1.

Proč nepoužít rostoucí x? Podle vlastnosti samotné funkce má jakékoli x v definiční doméně jediné y, které jí odpovídá. Takže v rovinném obdélníkovém souřadnicovém systému nemůžete najít „jednoduchou funkci“pro přímé kreslení kruhu. To znamená, že tento formát již nemůžeme používat.

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

x ＋＋;

Musíme tedy změnit naši představu. Vyberte jiný úhel jako nezávislou proměnnou a poté pomocí funkce sin a cos jej transformujte do vodorovných a svislých souřadnic.

x = R * cos (úhel);

y = R * sin (úhel);

úhel += 0,05;

Někteří z vás by se mohli divit, proč může zobrazovat dráhu pohybu kruhu. Podle definice goniometrické funkce můžeme tuto funkci snadno zdůvodnit poměrem opačné strany k přeponě; funkce cos je poměr přilehlé k přeponě. Bez ohledu na to, kde je bod kruhu, r (poloměr) zůstane beze změny. Můžeme tedy uzavřít výraz souřadnice x a souřadnice y.

Protože toto není matematické vedení, zde vám přestanu zobrazovat více znalostí o goniometrické funkci. Pokud to chcete vědět nebo na to jen zapomenete, můžete to zkusit zopakovat sami.

Samozřejmě je to v pořádku, pokud tomu nemůžete plně porozumět. Musíte jen vědět, jak jej použít k nakreslení kruhu. Je to také druh „programovací myšlenky“. Později budeme často vyvolávat některé z existujících modulů vytvořených jinými k realizaci určitého druhu funkce. Netlačte na to, abyste to věděli podrobně.

Funkce sin a cos je však běžná. Pokud chcete vytvořit tvorbu na vyšší úrovni, zkuste to důkladně poznat. Pokud nás tato otázka může sama přimět k tomu, abychom se naučili více matematických znalostí, čekají na vás další zajímavé věci.

Jedná se o obrázky úzce související s goniometrickou funkcí.

Krok 4: Pohybový souřadnicový systém

Předchozí efekty se týkají změn grafických souřadnic. Samotný souřadný systém je statický. Ve skutečnosti můžeme provést pohyb souřadnic, abychom dosáhli pohybového účinku. Je to stejné, jako když lidé na pláži sledují ostatní lidi na lodi. Pro lidi na lodi je loď statická. Ale co když se loď sama pohybuje, pak se s ní pohybují lidé v lodi. První případy se týkají „lidí běžících na lodi“. Ve skutečnosti se loď nepohybuje. Následuje několik běžných funkcí pro změnu souřadného systému.

Překlad funkcí

Funkční překlad, o kterém jsme hovořili dříve, slouží k horizontálnímu pohybu souřadnicového systému grafiky.

Vyvolat formát:

přeložit (a, b)

První parametr znamená přesun do kladného směru osy x pro pixely. Druhý parametr znamená přesun do kladného směru osy y pro b pixelů.

Porovnejte dva kódy a zkuste najít rozdíl. (Abychom zjednodušili kód, můžeme odstranit velikost funkce, šířka a výška obrazovky jsou standardně nastaveny na 100.)

Než použijeme:

elipsa (0, 0, 20, 20);

Poté, co použijeme:

translate (50, 50);

elipsa (0, 0, 20, 20);

Otočení funkce

Vyvolat formát:

otočit (a)

Slouží k otáčení souřadného systému. Když je parametr kladný, vybere původní bod jako středový bod a otočí se ve směru hodinových ručiček. Zadání parametru je stejné jako u goniometrické funkce pro použití radiánu.

Před použitím:

elipsa (50, 50, 20, 20);

Po použití:

otočit (radiány (30));

elipsa (50, 50, 20, 20);

Účinek v programu je, že se kruh otočí kolem středu souřadnic ve směru hodinových ručiček o 30 stupňů.

Funkční měřítko

Vyvolat formát:

měřítko (a)

Tato funkce může oddálit souřadnicový systém. Hodnota je pro škálování. Pokud je parametr nad 1, zvětšete jej; pokud je nižší než 1, oddalte zobrazení.

Před použitím:

elipsa (0, 0, 20, 20);

Po použití:

stupnice (4);

elipsa (0, 0, 20, 20);

Kruh na výše uvedeném obrázku je zesílen na čtyřnásobek původní velikosti. Můžete také použít dva parametry k oddálení ve směru osy x a osy y samostatně.

měřítko (4, 2);

elipsa (0, 0, 20, 20);

Superpozice transformační funkce

Zde je superpozice o změnách vzhledem k současnému souřadnému systému. Jinými slovy, efekty lze překrývat.

translate (40, 10);

translate (10, 40);

elipsa (0, 0, 20, 20);

Jeho konečný efekt bude roven

translate (50, 50);

elipsa (0, 0, 20, 20);

Stejné jako rotace funkce

otočit (radiány (10));

otočit (radiány (20));

elipsa (50, 50, 20, 20);

Rovná se

otočit (radiány (30));

elipsa (50, 50, 20, 20);

Jak funkce měřítka, tak střed otáčení v původním bodě slouží ke změně měřítka a otočení. Pokud chceme dosáhnout efektu rotace s centrální polohou na (50, 50), musíme uvažovat opačně. Nejprve přesuňte původní bod do polohy (50, 50) a poté přidejte rotační transformační funkci. Nakonec grafiku namalujte na původní bod.

Před použitím:

elipsa (50, 50, 50, 20);

Po použití:

translate (50, 50);

otočit (radiány (45));

elipsa (0, 0, 50, 20); // Abychom viděli změnu úhlu otočení, vytvořili jsme ovál.

Může se to zdát zkroucené. Jen musíš víc cvičit, pak to pochopíš. (Můžete také zkusit změnit posloupnost překládání funkcí a otáčení, abyste viděli rozdíl.)

Horizontální pohyb a kruhový pohyb

V následujících případech budeme realizovat pohybový efekt prostřednictvím změny souřadnicového systému. Současně bych vás chtěl požádat, abyste se obrátili na příklad předchozí kapitoly. Většinu času zjistíte, že k realizaci určitého druhu efektu můžete použít úplně jinou metodu.

Krok 5: Horizontální pohyb

[cceN_cpp theme = "úsvit"]

int x, y; neplatné nastavení () {velikost (300, 300); x = 0; y = výška/2; } void draw () {pozadí (234, 113, 107); noStroke (); translate (x, y); elipsa (0, 0, 50, 50); x ++; } [/cceN_cpp]

Souřadnice kruhu se nezmění, ale změní se jeho souřadnicový systém.

Otočit pohyb

[cceN_cpp theme = "dawn"] float r, R, úhel; neplatné nastavení () {velikost (300, 300); r = 20; // Rozměr kruhu R = 100; // Poloměr stopy pohybu} void draw () {pozadí (234, 113, 107); překládat (šířka/2, výška/2); // Přesune původní bod do středu obrazovky. otočit (úhel); noStroke (); elipsa (0, R, r, r); úhel += 0,05; } [/cceN_cpp]

Není to mnohem jasnější a jednodušší než goniometrická funkce? Zde můžete mít otázku. Jako příklad si vezměte rotující kód. Výše uvedená transformační funkce je zjevně relativní a umožňuje superpozici. Pokud do kreslení funkcí napíšeme překlad (šířka/2, výška/2), neznamená to, že pokaždé, když funkce kreslení funguje jednou, souřadný systém se přesune o vzdálenost ve správném dolním směru od původní základny? Rozumně nezůstane ve středu obrazovky navždy.

Můžete to pochopit takto. Jakmile kód ve funkci draw dokončí operaci shora dolů, souřadnicový systém se při druhé operaci vrátí do počátečního stavu. Původní bod souřadného systému se vrátí do výchozího stavu, aby se vrátil zpět do levého horního rohu. Pokud tedy chceme, aby se souřadný systém průběžně měnil, parametry úhlu v rámci funkce rotace budou neustále zvyšovat jeho hodnotu.

Přístup ke stavu souřadnic

Někdy nechceme, aby změna stavu systému souřadnic byla založena na předchozím. V tuto chvíli musíme použít funkci pushMatrix a popMatrix. Tyto dvě funkce se obvykle objevují v páru. Funkce pushMatrix je před popMatrix. Nelze je použít výhradně, nebo se pokazí.

Příklad:

[cceN_cpp theme = "dawn"] pushMatrix (); // Uložit překlad stavu souřadnicového systému (50, 50); elipsa (0, 0, 20, 20); popMatrix (); // Přečíst stav souřadnicového systému rect (0, 0, 20, 20); [/cceN_cpp]

V tomto příkladu před použitím translate (50, 50) použijeme funkci pushMatrix.pro uložení aktuálního stavu souřadného systému. Toto je zároveň počáteční stav. Poté, co nakreslíme kruh, poté implementujeme popMatrix, se vrátí do tohoto stavu. V tuto chvíli implementujte funkci rect, zjistíte, že neutrpěla vlivem překladu funkcí, místo toho nakreslí čtverec v levém horním rohu původního bodu.

Kromě toho funkce pushMatrix a popMatrix umožňují vnořování.

Například

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Abychom intuitivně ukázali jeho vztah, volíme formát kondenzátu.

Kombinovaný pohyb nebo pohyb v pohybu?

Nyní začíná druhá vlna důležité části. Jen se snažte tlačit dopředu. Dříve jsme používali metaforu lodí a lidí. Přemýšleli jste někdy o tom, co když přimíme lidi i loď k pohybu, jaký pocit budou mít lidé na pláži?

Jako spojit horizontální pohyb s rotačním pohybem souřadného systému. Jde zde vlastně o pohyb pouze ve směru.

[cceN_cpp theme = "dawn"] int x, y; plovoucí úhel; neplatné nastavení () {velikost (300, 300); pozadí (234, 113, 107); noStroke (); x = 0; // Když je počáteční hodnota x 0, můžeme tuto větu kódu zanedbat. Při deklaraci proměnné je výchozí hodnota 0. y = 0; // Stejné jako výše. úhel = 0; // Stejné jako výše. } neplatné kreslení () {úhel += 0,25; y--; překládat (šířka/2, výška/2); pushMatrix (); otočit (úhel); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

A existují kruhové pohyby a škálování souřadnicového systému.

[cceN_cpp theme = "dawn"] float x, y, angle; neplatné nastavení () {velikost (300, 300); pozadí (234, 113, 107); noStroke (); } neplatné kreslení () {úhel += 0,01; x = sin (úhel) * 100; y = cos (úhel) * 100; překládat (šířka / 2, výška / 2); pushMatrix (); stupnice (1 + 0,1 * sin (úhel * 10)); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Nenechte se tím ošidit! Bod kruhu ve skutečnosti provádí kruhový pohyb. Není těžké to pochopit, pokud to porovnáme se škálováním pomocí videokamery. Videokamera, která se neustále pohybuje vpřed nebo vzad, snímá bod kruhovým pohybem.

Překvapený? Jedná se o jednoduché základní funkce. Ale s různou kombinací můžeme vytvořit tolik různých efektů. Až do teď se moje expozice zastavila, aby mi zbylo místo pro vaše zkoumání.

Krok 6: Komplexní použití

U této kapitoly se brzy končí. Poslední dvě kapitoly jsem představil základní metodu grafického pohybu. Věřím, že pro to můžete mít hlubší porozumění ve srovnání s vašimi původními nápady. V neposlední řadě je zde několik dokončených příkladů pro vaši referenci.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; plovoucí úhel1, úhel2; neplatné nastavení () {velikost (300, 300); r = 12; R = 120; úhel1 = 0; úhel2 = PI/4; } void draw () {pozadí (234, 113, 107); noStroke (); překládat (šířka / 2, výška / 2); úhel1 += 0,02; úhel2 += 0,06; x1 = R *sin (úhel1); y1 = R* cos (úhel1); x2 = R/2 *sin (úhel2); y2 = R/2 *cos (úhel2); 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); mrtvice (255); strokeWeight (3); řádek (x1, y1, x2, y2); řádek (-x1, -y1, -x2, -y2); řádek (x1, -y1, x2, -y2); řádek (-x1, y1, -x2, y2); } [/cceN_cpp]

Tento příklad neobsahuje žádné znalosti nad rámec naší předchozí kapitoly.

Za které body odpovídá? Které řádky odpovídají? Taky na to nemůžu přijít. Ale pamatuji si, že to pochází z malé části kódu.

To je povaha jeho pohybu. Zbytek řádků je pouze zrcadlový efekt. Pokud budete i nadále postupovat podle těchto pokynů, můžete vytvořit aktualizovanou verzi a přidat do grafiky ovladač, abyste mohli v reálném čase měnit stav grafického pohybu.

Zajímavý bod programování spočívá v tom, že můžete navrhovat nebo kombinovat předpisy. Jaký bude konečný program, však závisí na vašich schopnostech. Obvykle mají designéři silnou grafickou představivost. Můžete si v hlavě načrtnout obrázek a poté ho zkusit přeložit do kódu. Také můžete začít od samotného kódu a předpisů, návrhových funkcí a proměnných podle libosti. Pamatujte Zpracování je vaše skica a kód jsou vaše štětce! Jen volně stříkejte své nápady!

Krok 7: KONEC

Poslední v naší kapitole se vraťme k otázce, kterou jsme si uchovávali dlouhou dobu od začátku. K čemu je vynaložení tolik úsilí na vytvoření obrázku s programem? Poté, co se naučíte tuto kapitolu, zjistíte, že na prozkoumání čeká tolik herních metod.

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; neplatné nastavení () {velikost (500, 500); } void draw () {pozadí (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; ucho D = 180 + sin (frameCount / 10,0) *20; okoD = 60 + sin (frameCount/30.0) *50; obličejD = 300; strokeWeight (8); elipsa (175, 220, ucho D, ucho D); elipsa (šířka - 175, 220, ucho D, ucho D); přímý (100, 100, faceD, faceD); řádek (browX, 160, 220, 240); řádek (width-browX, 160, width-220, 240); fill (random (255), random (255), random (255)); elipsa (175, 220, okoD, okoD); elipsa (šířka-175, 220, okoD, okoD); výplň (255); bod (šířka/2, výška/2); trojúhelník (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, width - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Není to kouzlo pro dynamickou grafiku? Zde vám neukazuji příliš mnoho případů. Možná dokážete navrhnout mnohem lepší efekt než já. Výhodou kreslení pomocí programu je, že můžete hrát s každým pixelem. Protože vaše grafika není bitmapová, každý klíčový bod vaší grafiky je ovladatelný. Může realizovat některé efekty, které jiný software nedokáže realizovat.

Pokud máte srdce, které chce všechno zlomit a znovu to spojit, studijní program vám k naplnění této myšlenky velmi pomůže.

Tento článek pochází od návrháře Wenzyho.

Krok 8: Relativní hodnoty:

Zajímavé programovací pokyny pro návrháře-zpracování úvodního dotyku

Zajímavé programovací pokyny pro návrháře-vytvořte svůj první zpracovatelský program

Zajímavé programovací pokyny pro návrháře - nechte si obraz běžet (první část)

Pokud máte nějaké dotazy, můžete poslat e -mail na adresu [email protected].

Tento článek pochází z: