Zajímavá programovací příručka pro návrháře-Nechte si obraz spustit (část první): 16 kroků

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

Běh! Běh! Běh!

Programování není tak obtížné. Klíčovým bodem je najít svůj rytmus a dělat to jeden po druhém.

Doufám, že jste se před čtením této kapitoly již seznámili se základní metodou kreslení funkcí, nebo se vám bude točit hlava a budete zmateni dvěma velkými hlavovými funkcemi: nastavením a kreslením.

Protože chceme dělat pohybovou grafiku, musíme vědět, jak vzniká animace.

Výše uvedený obrázek vypadá docela atraktivně a vizuálně odhaluje implementační princip animace.

Animace je magie. Je to kouzlo vizuálního podvádění. Nicméně v těchto informacích explodovala, video zaplavuje věk, už jsme si na to zvykli. Jen málo lidí bude překvapeno, že je úžasné vidět tuto animaci.

Stejný princip lze použít pro kreslení animací pomocí programu. Musíme zvážit, jak do každého rámečku nakreslit jinou grafiku, a program automaticky otočí stránky, zatímco my v hlavě doplníme dokončenou animaci. V následující kapitole si povíme, jak realizovat základní grafický pohyb. Předtím musíme znát několik základních znalostí o proměnných.

Krok 1: Proměnná

Proměnná je kontejner pro data. Lze jej použít opakovaně v rámci programu.

Například:

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

[/cceN_cpp]

Tato část kódu nepoužila žádné proměnné. Na obrazovce nakreslí čtyři kruhy. Zjistili jsme, že mají stejnou šířku a výšku. Nyní, když je stejný, abychom minimalizovali opakované zadávání dat, můžeme definovat znak, který jej bude reprezentovat. Tento znak je variabilní.

Zde je kód po přidání proměnné:

[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); elipsa (400, 250, a, a);

[/cceN_cpp]

Dostáváme naprosto stejný výsledek!

Protože jsme definovali proměnnou a, můžeme pohodlně měnit parametry. Pokud změníme a = 50 na a = 100, pak šířka a výška všech kruhů bude 100 rovnoměrně. Nemusíme tedy měnit parametry jeden po druhém. Proměnná je opravdu dobrý vynález.

Krok 2: Vytvoření proměnné

Před použitím proměnné musíme provést prohlášení a určit její datový typ.

int i;

i ＝ 50;

První věta kódu učinila prohlášení pro proměnnou i. int je symbol, který se používá hlavně k deklaraci proměnné. Při deklaraci ušetří místo v paměti počítače, což je ekvivalentní generování „krabice“, speciálně používané k obnově celočíselných dat. Druhá věta znamená, že přiřazení 50 bude implementováno pomocí proměnné i. Po implementaci této věty budou data uložena v proměnné i stabilně. Nebo můžete být línější kombinovat výše uvedené dvě věty do jedné a dokončit přiřazení při vytváření prohlášení.

int i ＝ 50;

Je poměrně zdarma pojmenovat proměnnou. Někdy ale musíme něčemu věnovat pozornost.

Krok 3: Pojmenování regulace proměnné

• Musí to být kombinace abecedy a podtržení. Může to být symbol nebo slovo.

• Citlivý na velká písmena. Název a název mohou znamenat různé proměnné.

• Zkuste to pojmenovat co nejjednodušeji, abyste to pochopili na jeden pohled. Počáteční znak musí být abeceda místo čísla nebo speciální znak.

• Žádná klíčová slova jako int, float

Následující jsou některá nesprávná tvrzení.

int $ a;

int 89b;

Zde jsou správná tvrzení:

int r;

int super_24;

int openTheDoor;

Krok 4: Typ proměnné

Kromě deklarace celočíselných dat můžeme pro desítková data (nazývaná také data s plovoucí desetinnou čárkou) deklarovat klíčovým slovem float.

float b = 0,5

Musíme mít na paměti, jaký typ dat jsme použili pro naše prohlášení. Pokud jsme použili klíčové slovo int, druhé přiřazení nemůže zapsat ＝ 0,5 nebo něco podobného, nebo se program stane chybou. Pokud ale píšeme opačně, je to v pořádku. Například float i = 5 je správná gramatika, ale program ji rozpozná jako desetinné číslo.

Některé proměnné již byly definovány systémem. Nemusíme je deklarovat sami. Stejně jako dříve uvedená „šířka, výška“automaticky získá šířku a výšku obrazovky počítače. Tak vysoká frekvence používání, že ji designér přímo definuje jako výchozí proměnnou, aby bylo používání pro nás pohodlnější.

Krok 5: Operátor

Operátory zpracování jsou následující:

+ plus

- mínus

* znásobit

rozdělit

％ Modul zbytku

Musíte znát všechny tyto operátory kromě %. Vypadá to docela divně, protože jeho výsledek je zbývající. 9%3 je 0. Zatímco 9%5 je 4.

Mezi přiřazeními a proměnnými lze použít operátory.

[cceN_cpp theme = "dawn"] int a = 1; // deklarujte celočíselnou proměnnou a, přiřazení je 1. int b = 2; // Deklarujte celočíselnou proměnnou b, přiřazení je 2. int c; // Deklarujte celočíselnou proměnnou c. c = a + b; // Plus dvě přiřazení a jeho výsledek přiřaďte c. tisk (c); // Výstupní proměnná c.

[/cceN_cpp]

Krok 6: Výsledek operace:

Výstupní výsledek se nezobrazí v okně, ale v konzole ve spodní části.

Způsob psaní čtvrtého řádku vypadá docela zvláštně. Je to však běžný formát, který se často používá při přiřazování počítače. Levá strana symbolu rovnosti by měla být konečnou přiřazenou proměnnou, zatímco pravá strana by měla být procesem operace.

Funkce tisku v pátém řádku může vytisknout proměnné v konzole, která se často používá k testování stavu výstupu dat.

Krok 7: Regulace provozu

Problémovým bodem zpracování je, že musíme vyjasnit typ proměnné. Zvláštní pozornost musíme věnovat procesu čísla s plovoucí desetinnou čárkou a celočíselného typu.

tisk （6/5）; // výsledek 1

Operace mezi celými čísly bude mít nové celé číslo. 6 děleno 5 je 1,2. Výsledek programu je ale 1. To je v rozporu s naší intuicí. Program se nebude zabývat zaokrouhlením, ale odstraní číslo za desetinnou čárkou.

tisk (6,0 / 5,0); // výsledek 1.2

Operace mezi plovoucí desetinnou čárkou bude mít za následek nové číslo s plovoucí desetinnou čárkou. Pokud je skutečný výsledek 1,2, bude výstupní výsledek programu stejný.

tisk (6 / 5,0); // výsledek 1.2

tisk (6,0 / 5); // výsledek 1.2

Nakonec je to směs celočíselného a čísla s plovoucí desetinnou čárkou. Konečný výstupní výsledek bude 1,2.

• Ve skutečnosti musíte mít na paměti, že cílem tohoto návrhu regulace je neztratit přesnost údajů. Pokud je tedy jedním prvkem číslo s plovoucí desetinnou čárkou, bude výsledkem také číslo s plovoucí desetinnou čárkou.

Krok 8: Nastavení funkce a funkce kreslení

Dříve jsme hovořili o řadě základních znalostí. Nyní konečně hrajeme něco zajímavého. Nastavení funkcí a kreslení jsou ekvivalentní hlavním funkcím zpracování. Tyto dvě funkce jsou velmi zvláštní. Může řídit postup programu. Poměrně komplikovaný program bude zahrnovat tyto dvě funkce, protože jsou základním rámcem programu. Formát:

neplatné nastavení () {

}

void draw () {

}

Speciální použití odlišuje formát jejich vyvolání od ostatních funkcí. Před název funkce musíme přidat „void“, což je zkratka pro „vrácenou hodnotu“. Za název funkce musíme přidat závorky a závorky.

[cceN_cpp theme = "dawn"] neplatné nastavení () {print (1); } void draw () {print (2); } [/cceN_cpp]

Podívejme se na příklad:

Když stisknete ovládací tlačítko, konzola nejprve vydá „1“a pak neustále „2“, dokud nestisknete tlačítko stop nebo nezavřete okno.

Kód v závorkách ve funkci nastavení bude implementován pouze jednou. Zatímco kód v rámci funkce kreslení bude neustále běžet v oběhu (výchozí implementace 60krát za sekundu).

Kvůli tomuto znaku se nastavení obvykle používá k inicializaci vlastnosti prostředí, jako je šířka a výška obrazovky, barva pozadí a přiřazení všech druhů proměnných. Zatímco často kreslíme funkce do kreslení funkcí, abychom generovali průběžně měněnou grafiku.

Krok 9: Kruh ve vodorovném pohybu

S kreslením funkcí můžeme začít vytvářet naše animace. Způsob psaní efektu animace zpracováním je docela „trapný“. Nemá žádný existující příkaz. Například určete určitý tvar pro zakřivení.

Tyto detaily musíme definovat sami. Musíte programu sdělit, jaký druh grafiky každý snímek rozhodně potřebuje.

Napište do něj následující kód (Nyní to začneme dělat rukama):

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

[/cceN_cpp]

Tato část kódu zobrazuje pohybový kruh. Dřívější deklarovaná proměnná x, y se používá k uložení polohy souřadnic. Jeho přiřazení běží v nastavení funkcí. Klíčový kód je následující v rámci kreslení funkcí:

x = x + 1

Nepovažujte to za matematickou rovnici, nebo to bude velmi zvláštní. Zde je „＝“symbolem přiřazení. Představuje umístění správných čísel do levé proměnné. Předpokládejme, že x je 50, jakmile se kód spustí, pravá strana „＝“se rovná 50+1, tj. 51. Konečný výsledek bude přiřazen do proměnné x. Hodnota x se tedy stane 51.

Postupujte podle postupu v programu, pokaždé, když funkce kreslení funguje jednou, hodnota x se zvýší 1. Takže pokaždé, když kreslíme, kruh se ve srovnání s předchozím rámcem posune ve vodorovném směru doprava o pixel. Proto se grafika stane pohybovou.

• Aby kód získal lepší čitelnost, musíme před každým řádkem kódu v závorkách ušetřit určitou místnost. A musí být co nejvíce zarovnaný. Stisknutím klávesy TAB nebo několika prázdných míst se může zasunout.

• Symbol prázdného místa a zalomení řádku v programu program neovlivní. Je tedy v pořádku, pokud napíšeme jeden více nebo méně.

Zde je další jednodušší způsob, jak to vyjádřit. Aby se proměnný kruh automaticky zvýšil o 1, musíme jej zapsat v následujícím formátu.

kruh ＝ kruh ＋1

Docela nepohodlné! Pokud je název proměnné delší, musíme zadat více slov. Naši líní předchůdci tedy vymyslí nápad jako tento.

kruh ＋＋

Není to velmi jednoduché? Znamená to automaticky zvýšit 1. Podobně jako tam je - -, což znamená automaticky snížit 1.

Pokud ale doufáme, že množství automatického nárůstu je jiné číslo jako 2, musíme zkusit jiný výraz.

kruh += 2

To se rovná

kruh = kruh + 2

Podobně existuje - ＝, /=, *=.

Krok 10: Směr pohybu

Směr, kterým se grafika pohybuje, závisí na tom, jak změníte souřadnice. Pokud se změní na y ＝ y ＋ 1, kruh se posune dolů. Pokud se xx y zvýší o 1, kruh se bude pohybovat dolů vpravo dole. Pokud napíšeme, že je to minus symbol, bude se pohybovat opačným směrem.

[cceN_cpp theme = "dawn"] int x, y; // Může deklarovat více proměnných současně, oddělte je čárkou. neplatné nastavení () {velikost (300, 300); x = 0; y = 0; } void draw () {pozadí (234, 113, 107); noStroke (); elipsa (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Pohybová rychlost

Pamatujete na výchozí 60 snímků za sekundu v rámci kreslení funkcí? Podle této rychlosti se kruh výše posune o 60 pixelů za sekundu doprava.

Pokud chceme změnit rychlost grafického pohybu, existují dvě metody: jednou je zvýšit hodnotu x pokaždé, když se změní.

x ＝ x ＋ 10

Ve srovnání s původním vylepšilo rychlost 10krát!

Druhou metodou je změnit frekvenci obnovování plátna. snímková frekvence()

Tato funkce může změnit vysílací frekvenci plátna. Do nastavení funkcí zapište frameRate (10), původní 60 snímků za sekundu se změní na 10 snímků za sekundu. Rychlost je 6krát zpomalena než dříve.

Krok 11: Přehlédnuté pozadí

Všechny předchozí příklady zapisují pozadí do funkce draw. Napadlo vás někdy napsat to do nastavení funkcí? Bude to mít nějaké rozdíly? Nyní aktualizujme příklad horizontálního pohybu.

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

Co se stalo? Možná nedokáže správně pochopit důvod vzniku problému. Vymažte funkci noStroke, znovu přidejte tah a podívejte se na dráhu pohybu kruhu.

Je to kvůli dříve vytvořenému kruhu, který nebyl odstraněn! Protože nastavení funkcí funguje pouze jednou, zapíšeme -li nad něj pozadí, vyplní pozadí pouze jednou a druhé již nebude mít žádný účinek. Pozadí funkce je jako nástroj kbelíku s barvou. Jakmile bude použit, pokryje veškerý obsah na plátně místo nastavení pouze barvy pozadí. Zapíšeme to před nakreslením funkce, aby se bývalý rámeček překryl pokaždé, když vytvoříme nový vzor. Kruh tedy může běžet, jak jsme očekávali. Kromě zapamatování si použití jednotlivých funkcí musíme myslet na pozici kódu. Mnoho času, řádek nahoru nebo dolů pro kodea a jeho zápis do nebo ze závorky vytvoří zcela odlišné efekty. Směr kódu je dvourozměrný. Pokud se objeví chyba, musíme provést kalibraci v této dvou dimenzích.

• Tato neopakovaná metoda kreslení může při správném používání vytvořit velmi zvláštní efekt. Můžete zkopírovat následující kód a zkusit to.

[cceN_cpp theme = "dawn"] neplatné nastavení () {velikost (400, 400); } void draw () {elipsa (šířka/2-mouseX, výška/2-mouseX, mouseY, mouseY); elipsa (šířka/2-mouseX, výška/2+mouseX, mouseY, mouseY); elipsa (šířka/2+mouseX, výška/2-mouseX, mouseY, mouseY); elipsa (šířka/2+myšX, výška/2+myšX, myšY, myšY); } [/cceN_cpp]

Zde jsme použili magickou proměnnou mouseX a mouseY. Později o tom budeme hovořit podrobně.

Krok 12: Třepání kruhu

Co když chci, aby se směr pohybu kruhu stal nepravidelným? S chytře náhodnou funkcí můžete tento efekt realizovat také. Random je často používaná funkce. Lze jej použít ke generování náhodné funkce. Je to jako duch bez stopy. Jakmile se vztahují k proměnným, nedokážete si představit, co bude dál.

Vyvolat formát:

náhodný (vysoký)

Vysoká představuje náhodný horní limit a výchozí spodní limit je 0. Například náhodný (10). Vytvoří náhodně číslo od 0 do 10 (0 je zahrnuto, ale 10 není zahrnuto).

náhodné (nízké, vysoké)

Pokud nastavíme dva parametry, pak se vrátí na náhodnou hodnotu mezi nimi. Například random (5, 10). Vytvoří náhodně číslo od 5 do 10 (5 je zahrnuto, ale 10 není zahrnuto).

Příklad:

[cceN_cpp theme = "dawn"] float x;

x = náhodný (50, 100);

tisk (x); [/cceN_cpp]

Při každém spuštění programu konzola vydá různé hodnoty.

• Poznámka: Hodnoty vytvořené funkcí náhodně patří typu s plovoucí desetinnou čárkou (typ s desítkovým číslem). Pokud chceme přiřadit hodnotu celočíselné proměnné, musíme ji transformovat pomocí funkce int (). Transformace se neřídí zaokrouhlením, ale odstraní přímo desetinnou část. Výstup int (random (5)) má tedy pouze 5 možností: 0, 1, 2, 3, 4.

Poté, co se seznámíme s používáním náhodné funkce, můžeme přejít přímo k níže uvedenému případu.

[cceN_cpp theme = "dawn"] int x, y; neplatné nastavení () {velikost (300, 300); x = šířka/2; y = výška/2; } void draw () {pozadí (234, 113, 107); noStroke (); x += int (náhodný (-5, 5)); y += int (náhodný (-5, 5)); elipsa (x, y, 50, 50); }

[/cceN_cpp]

Předchozí přidané hodnoty souřadnic jsou pevné. Pouze pokud zvýšíme náhodnou hodnotu, kruh se bude pohybovat neurčitým směrem. S větším náhodným rozsahem se třese častěji. Protože je změna hodnoty mezi snímky odrazena, pohyb již nebude plynulý. Zatímco první snímek je na (150, 150), druhý snímek se během letmého pohledu přesune do polohy (170, 170).

Krok 13: Migrace kruhu

Migrující kruh

Vytvoří hladký pohyb? Funkční hluk nám může pomoci. Má lepší rytmus než standardní náhodné. A náhodně generovaná náhodná čísla jsou nepřetržitě.

Vyvolat formát:

hluk （t）

Funkční šum nemůže definovat jeho výstupní rozsah. Program definuje, že může generovat pouze čísla s pohyblivou řádovou čárkou od 0 do 1 a pevný vstup může mít pouze pevný výstup.

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

Protože výše uvedené vstupní parametry jsou 5, takže výstupní výsledky jsou stejné. Jak tedy změnit výsledek? Odpovědí je dynamicky měnit vstupní parametry. Ve skutečnosti můžeme považovat hluk za neomezenou hlasovou stopu, vstupní parametry jsou stejné jako „současnost“. Pokud je vstup parametru spojitý, bude výstup spojitý také.

[cceN_cpp theme = "dawn"] float x, y; neplatné nastavení () {velikost (700, 100); x = 0; pozadí (0); } neplatné kreslení () {x += 1; y = šum (frameCount/100.0)*100; noStroke (); elipsa (x, y, 2, 2); }

[/cceN_cpp]

V tomto případě nakreslíme dráhu změny Y, abychom lépe porozuměli funkčnímu šumu.

• Mezi nimi proměnná frameCount získá aktuální rámec. Na rozdíl od šířky a výšky v předchozím je stabilní beze změny. Kromě toho se začíná zvyšovat od 0. Pokud to chápeme podle naší úvodní zobrazované animované grafiky, ukazuje stránku, na kterou jsme se obrátili (spíše k pojetí času v programu).

• frameCount je celočíselná proměnná. Děleno jinou celočíselnou proměnnou, program ve výchozím nastavení zpracuje výsledek jako celé číslo. Abychom zlepšili přesnost výsledku, musíme změnit 100 na 100,0. Děleno číslem s plovoucí desetinnou čárkou, dostaneme také číslo s plovoucí desetinnou čárkou.

• Abychom mohli změnit osu Y z 0 na 100, musíme výsledek šumu vynásobit 100. Můžeme tedy řídit rozsah náhodných hodnot.

Někteří z vás, kteří dobře uvažují, se mohou ptát „proč musíme rozdělit frameCountby 100? Není v pořádku psát frameCount přímo?“Samozřejmě můžete! Ale zde, abychom lépe zobrazili charakteristiky funkčního šumu, zpomalíme „rychlost vysílání“. Následující příklad ukazuje změny výstupní hodnoty při různé rychlosti změn.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; neplatné nastavení () {velikost (700, 500); x = 0; pozadí (0); } neplatné kreslení () {x += 1; y1 = šum (počet rámců)*100; y2 = šum (frameCount/10.0)*100; y3 = šum (frameCount/100.0)*100; y4 = šum (frameCount/1000.0)*100; y5 = šum (frameCount/10 000,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); mrtvice (80); řádek (0, 100, šířka, 100); řádek (0, 200, šířka, 200); řádek (0, 300, šířka, 300); čára (0, 400, šířka, 400); }

[/cceN_cpp]

Měnící se parametry uvnitř funkčního šumu můžete považovat za indikátor průběhu. Změnit parametr je, jako bychom posunuli ukazatel průběhu. Takže když se měnící se rozsah této „hlasové stopy“bude větší, přední a zadní spojitá charakteristika výstupní hodnoty bude slabší. (Dokážeme si představit, co se stane, pokud budeme vysílat hudbu nebo video s dvojnásobnou rychlostí, 5 krát rychlost, 20 krát rychlost). Když je rozsah větší než určitá hodnota, pak nemá velký rozdíl fungovat náhodně při generování hodnoty.

Pokud porozumíte všem výše uvedeným příkladům, budete mít pocit, že nic nemůže být snazší nakreslit migrující kruh. Můžete také pochopit vnitřní principy.

[cceN_cpp theme = "dawn"] float x, y; neplatné nastavení () {velikost (300, 300); x = 0; } void draw () {pozadí (234, 113, 107); x = šum (počet snímků/100,0 + 100)*300; y = šum (frameCount/100.0)*300; noStroke (); elipsa (x, y, 50, 50); }

[/cceN_cpp]

Pohyb je nyní zajímavější stejně jako rotující gyroskop.

• Důvodem, proč musí mít proměnná x v rámci funkčního šumu plus 100, je to, že je chceme oddělit na vzdálenost. Pokud jsou parametry xy v rámci funkčního šumu stejné nebo docela blízké, změna souřadnice x, y se zavře na stejnou hodnotu. To má zajistit, aby byl pohyb mnohem náhodnější.

Krok 14: Kruh přesunutý myší

Dále se konečně dostáváme ke dvěma proměnným, které mám nejraději: mouseX a mouseY. Při prvním pohledu na tato dvě pojetí se mi oči lesknou světlem. Protože je to nejpřímější způsob interakce s grafikou. Můžeme s ním vytvořit spoustu zajímavého programu.

Případ je celkem jednoduchý:

[cceN_cpp theme = "dawn"] int x, y; neplatné nastavení () {velikost (300, 300); x = 0; y = 0; } void draw () {pozadí (234, 113, 107); noStroke (); x = myšX; y = myšY; elipsa (x, y, 50, 50); }

[/cceN_cpp]

mouseX může získat souřadnici x myši, zatímco mouseY může získat souřadnici y.

• Zkusme změnit kladný a záporný symbol, nebo si vyměňte mouseX a mouseY.

Krok 15: Konec

Z těchto známých příkazů možná budete moci provádět pohyb grafiky. S obsahem poslední kapitoly řádně zapojte svoji fantazii, můžete vytvořit spoustu zajímavých animovaných efektů.

V naší další kapitole můžeme vidět hojnější příklady. Současně budeme používat matematické funkce a kombinovat je s grafickým pohybem.

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

Krok 16: 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

Tento článek pochází z:

Pokud potřebujete pomoc, můžete kontaktovat: [email protected].