Érdekes programozási útmutató tervezőnek-Futtassa a képet (második rész): 8 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

A matematika a legtöbbjük számára haszontalannak tűnik. A leggyakrabban használt mindennapi életünkben csak összeadni, kivonni, szorozni és osztani. Ez azonban egészen más, ha programmal lehet létrehozni. Minél többet tud, annál csodálatosabb eredményt kap.

1. lépés: Mozgás és funkció

Mutatok néhány ismeretlen képet, hogy élénkítse ízlését.

Mi ez? Most csak tartsa meg ezt a kérdést először, és később tudni fogja és használni fogja.

Az utolsó fejezetben megtanultuk a funkcióbeállítást és a függvényrajzolást, amelyek segítségével a statikus grafika dinamikussá válhat. Ez a mozgásformátum azonban túl egyszerű. A korábban elsajátított függvényismeretet arra használjuk, hogy grafikánkat saját karakterünkkel futtassuk.

Hány funkciót ismer fel a fenti képekből? Milyen kapcsolatuk van a mozgással? Most vegyünk fel belőle egy másodfokú függvényt, adjunk hozzá néhány paramétert véletlenszerűen, és nézzük meg, mi fog történni. Például y = x² / 100.

Így néz ki a funkciókép. Másolja ki az alábbi kódot.

[cceN_cpp theme = "hajnal"] float x, y; void setup () {méret (300, 300); háttér (0); x = 0; } void draw () {stroke (255); strokeSúly (2); y = pow (x, 2) / 100,0; // A pow függvény visszatér a kijelölési szám n -edik hatványába. (x, 2) az x négyzetét jelenti. Az első paraméter az alapszám, a második pedig az index. (x, y) pont; x ++; } [/cceN_cpp]

Futó hatás

Ezután válassza a sin funkciót. Képlet: y = 150 + sin (x).

Másolja ki a következő kódot.

[cceN_cpp theme = "hajnal"] float x, y; void setup () {méret (300, 300); háttér (0); x = 0; } void draw () {y = magasság/2 + sin (radián (x)) * 150; // Függvény radián transzformálja x szöget. x ++; ütés (255); strokeSúly (2); (x, y) pont; } [/cceN_cpp]

Futó hatás

Ezt a grafikát kapjuk a kód működtetése után. És ezek a mozgásnyomok. Az előzőhöz képest az eredmény nyilvánvaló. A funkciókép valójában megfelel a mozgáspályának! Elég egyszerű. Csak ki kell cserélni az x, y értékét a koordinátára. Az előbbi sáv, amelyet rajzoltunk, egyenértékű az y = x² / 100 függvény grafikájával. Míg az utóbbi sáv egyenlő az y = 150 + sin (x) függvény grafikájával. De a programban az y tengely iránya ellentétes. Tehát az eredeti grafikához képest a pálya fejjel lefelé lesz. Most azt hiszem, éreznie kell magát abban, hogy néhány nehéz kérdés, amely hosszú ideig kísért a fejében, azonnal megoldódik. Elképesztő, hogy ezek a fantasztikus funkciók, amelyeket korábban megtanultunk, felhasználhatók a grafikus mozgás szabályozására!

2. lépés: Funkció írása

Az alábbiakban felsoroltam néhány gyakran használt funkciót. Reméljük, hogy ezek segíthetnek nekünk a funkciók számítógépre felismerhető kódba történő lefordításában.

Ezért a program alábbi képletét a következőképpen kell írni:

y = x² → y = pow (x, 2) vagy y = sq (x)

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

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

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

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

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

Véletlenszerűen beírhat egy függvényt a programba, és megnézheti, hogyan fog kinézni a mozgáspálya. Ne felejtse el figyelembe venni az értékmező és a definíciótartomány tartományát, különben a grafika elfogy a képernyőn.

Trigonometrikus függvény

Most menjünk tovább, hogy megismerjük a trigonometriai függvények néhány írását.

Figyelnünk kell arra, hogy a programban a függvényparaméter szöghöz viszonyított bemenete radiánt vesz fel. Így a sin90 ° -ot bűnbe kell írni (PI ／ 2). Ha nem ismeri ezt a módszert, akkor a randiánok függvénnyel előzetesen alakíthatja át szöget radiánná, majd írja be a sin （radiánt (90).

A függvényfokozatok használata viszonylag ellentétes. A radiánt szöggé tudja alakítani. Adja meg a nyomtatást (fokok (PI/2)) közvetlenül a szerkesztési területre, és nézze meg, mit fog kapni.

3. lépés: A grafikus mozgás szabályozása trigonometrikus funkcióval

Itt egy példa arra, hogy lássa a grafikus mozgás tényleges hatását.

[cceN_cpp theme = "hajnal"] float x, y; void setup () {méret (700, 300); } void draw () {háttér (234, 113, 107); y = sin (radián (x)) * 150 + 150; x ++; noStroke (); ellipszis (x, y, 50, 50); } [/cceN_cpp]

A sin függvény periodikus függvény. Minimális értéke －1, maximális értéke 1. A képernyő magassága 300. Hivatkozva y = sin (radián (x)) * 150 + 150, ezért az y érték változási tartománya 0 -n belül jól szabályozható 300 -ig.

Forgó kör

Nos, végre elérkeztünk a legfontosabb részhez ebben a fejezetben. Hogyan rajzoljunk körutat egy programban? Hogyan kell megjeleníteni a funkciókat? Hadd mutassam meg ismét azt a két képet, amelyet a cikk elején láttunk.

Valójában vizuálisan felfedték a kerületi koordináta és a trigonometrikus függvény közötti kapcsolatot. A fenti képek mozgását a folyamatosan növekvő független variable változó vezérli. A bal oldali a sin és cos függvény képe, a jobb pedig egy pont, amely körkörös mozgást végez a leképezés után. Nem túl okos? Ez már nem titokzatos. Használhatja a kódot annak megvalósításához.

Egy egyszerű példa:

[cceN_cpp theme = "hajnal"] úszó x, y, r, R, szög; void setup () {méret (300, 300); r = 20; // Kör átmérője R = 100; // A mozgási út sugara x = 0; szög = 0; y = magasság/2; } void draw () {háttér (234, 113, 107); fordítás (szélesség/2, magasság/2); // Az eredeti pont áthelyezése a képernyő közepére. noStroke (); x = R * cos (szög); y = R * sin (szög); ellipszis (x, y, r, r); szög += 0,05; } [/cceN_cpp]

Néz! Pörgő kör jelenik meg! Itt a független változó már nem állandó növekedési bit lesz szög (egyenlő θ -vel a képen). Ez áll a szög. Közülük xy viszonylag megsokszorozott R együtthatóval rendelkezik, ami a kör mozgási sugarának kiterjesztéséhez vezet (R sugár). Ha nem szorozni akarja az R -t, akkor mozgási útvonala -1 és 1 között korlátozódik.

Miért nem használja a növekvő x -et? Maga a függvény tulajdonsága szerint a definíciós tartományon belüli x -eknek csak az y felel meg. Tehát a sík téglalap alakú koordináta -rendszerben nem találhat „egyszerű függvényt” a kör közvetlen rajzolásához. Vagyis nem használhatjuk tovább ezt a formátumot.

y = (x ismeretlen kifejezése?);

x ＋＋;

Tehát változtatnunk kell elképzelésünkön. Válasszon másik szöget független változóként, majd használja a sin és cos függvényt, hogy vízszintes és függőleges koordinátává alakítsa.

x = R * cos (szög);

y = R * sin (szög);

szög += 0,05;

Néhányan elgondolkodhatnak azon, hogy miért tudja megjeleníteni a kör mozgásának útját. A trigonometrikus függvény definíciója szerint könnyen megállapíthatjuk, hogy ez a függvény bűn az ellentétes oldal és a hipotenusz aránya; A cos függvény a szomszédos és a hipotenusz aránya. Nem számít, hol van a körpont, r (sugár) változatlan marad. Ezért levonhatjuk az x koordináta és az y koordináta kifejezését.

Mivel ez nem matematikai útmutató, itt leállítom a trigonometrikus függvényről szóló további ismeretek megjelenítését. Ha tudni akarja, vagy csak elfelejti, megpróbálhatja újra áttekinteni.

Természetesen minden rendben van, ha nem tudja teljesen megérteni. Csak tudnia kell, hogyan használhatja kör rajzolásához. Ez is egyfajta „programozási ötlet”. Később gyakran meghívunk néhány létező modult, amelyeket mások készítettek egy bizonyos funkció megvalósításához. Csak ne erőltesse magát, hogy részletesen tudja.

A sin és cos függvény azonban gyakori. Ha magasabb szintű alkotást szeretne létrehozni, akkor jobb, ha megpróbálja alaposan megismerni. Ha ez a kérdés önmagában is arra késztet, hogy újabb matematikai ismereteket szerezzünk, akkor még érdekesebb dolgok várnak rád.

Ezek a képek szorosan kapcsolódnak a trigonometrikus függvényhez.

4. lépés: Mozgáskoordináta -rendszer

A korábbi effektusok a grafikus koordináta -változtatásokról szólnak. Maga a koordinátarendszer statikus. Valójában meg tudjuk tenni a koordináta mozdulatot a mozgási hatás eléréséhez. Ez olyan, mintha a tengerparton élő emberek figyelnék a csónakban ülő többi embert. A hajón tartózkodók számára a csónak statikus. De mi van, ha maga a csónak mozog, akkor a csónakban lévő emberek vele együtt mozognak. Az előbbi esetek „a hajón futó emberekről” szólnak. Valójában a hajó nem mozog. Az alábbiakban néhány általános funkciót látunk a koordináta -rendszer megváltoztatásához.

Funkció fordítás

A korábban leírt függvényfordítást a grafika koordináta -rendszerének vízszintes mozgatására használjuk.

Meghívási formátum:

lefordítani (a, b)

Az első paraméter az x tengely pozitív irányába való elmozdulást jelenti egy pixel esetén. A második paraméter az y tengely pozitív irányába való elmozdulást jelenti b pixelek esetén.

Hasonlítsa össze a két kódot, és próbálja megtalálni a különbséget. (A kód egyszerűsítése érdekében törölhetjük a funkció méretét, a képernyő szélessége és magassága alapértelmezés szerint 100.)

Használat előtt:

ellipszis (0, 0, 20, 20);

Használatunk után:

lefordítani (50, 50);

ellipszis (0, 0, 20, 20);

Funkció forgatás

Meghívási formátum:

forgatás (a)

A koordináta -rendszer forgatásához használják. Ha a paraméter pozitív, akkor az eredeti pontot választja középpontnak, és az óramutató járásával megegyező irányban forog. A paraméterbevitel megegyezik a trigonometrikus függvénnyel a radián használatához.

Használat előtt:

ellipszis (50, 50, 20, 20);

Használat után:

forgatás (radiánok (30));

ellipszis (50, 50, 20, 20);

A program hatása az, hogy a kört a koordináta középpontja körül az óramutató járásával megegyező irányban el kell forgatni 30 fokkal.

Funkció skála

Meghívási formátum:

skála (a)

Ez a funkció kicsinyítheti a koordinátarendszert. Az érték skálázásra szolgál. Ha a paraméter 1 -nél nagyobb, akkor nagyítson; ha kisebb, mint 1, akkor kicsinyítsen.

Használat előtt:

ellipszis (0, 0, 20, 20);

Használat után:

skála (4);

ellipszis (0, 0, 20, 20);

A fenti képen látható kör az eredeti méret négyszeresére erősödik. Ezenkívül két paraméterrel távolíthatja el az x tengely és az y tengely irányát külön -külön.

skála (4, 2);

ellipszis (0, 0, 20, 20);

A transzformációs függvény szuperpozíciója

Itt a szuperpozíció a jelenlegi koordinátarendszerhez viszonyított változásokról szól. Más szóval, a hatások egymásra helyezhetők.

fordítás (40, 10);

fordítás (10, 40);

ellipszis (0, 0, 20, 20);

Végső hatása megegyezik

lefordítani (50, 50);

ellipszis (0, 0, 20, 20);

Ugyanez a funkció forgatása

forgatás (radiánok (10));

forgatás (radiánok (20));

ellipszis (50, 50, 20, 20);

Egyenlő azzal

forgatás (radiánok (30));

ellipszis (50, 50, 20, 20);

Mind a skálázás, mind a középső forgatás az eredeti ponton a méretezéshez és forgatáshoz. Ha azt akarjuk, hogy a forgatás hatását egy központi pozícióval (50, 50) érjük el, akkor ellenkezőleg kell gondolkodnunk. Először helyezze az eredeti pontot az (50, 50) pozícióba, majd adja hozzá a forgó transzformációs függvényt. Végül rajzolja le a grafikát az eredeti pontra.

Használat előtt:

ellipszis (50, 50, 50, 20);

Használat után:

lefordítani (50, 50);

forgatás (radiánok (45));

ellipszis (0, 0, 50, 20); // Az elforgatási szög változásának megtekintéséhez ovált készítettünk.

Úgy tűnhet, csavaró. Csak gyakorolnod kell többet, aztán megérted. (Megpróbálhatja megváltoztatni a fordítás és forgatás függvénysorozatát is, hogy lássa a különbséget.)

Vízszintes és körkörös mozgás

A következő esetekben a mozgáshatást a koordinátarendszer megváltoztatásával fogjuk megvalósítani. Ugyanakkor azt szeretném kérni, hogy hivatkozzon az előző fejezet példájára. Legtöbbször azt tapasztalja, hogy egy bizonyos hatás eléréséhez teljesen más módszert használhat.

5. lépés: Vízszintes mozgás

[cceN_cpp theme = "hajnal"]

int x, y; void setup () {méret (300, 300); x = 0; y = magasság/2; } void draw () {háttér (234, 113, 107); noStroke (); lefordítani (x, y); ellipszis (0, 0, 50, 50); x ++; } [/cceN_cpp]

A kör koordinátája nem változik, de a koordinátarendszere megváltozik.

Mozgás forgatása

[cceN_cpp theme = "hajnal"] úszó r, R, szög; void setup () {méret (300, 300); r = 20; // Körméret R = 100; // A mozgáspálya sugara} void draw () {háttér (234, 113, 107); fordítás (szélesség/2, magasság/2); // Az eredeti pont áthelyezése a képernyő közepére. forgatás (szög); noStroke (); ellipszis (0, R, r, r); szög += 0,05; } [/cceN_cpp]

Nem sokkal világosabb és egyszerűbb, mint a trigonometrikus függvény? Itt lehet kérdése. Vegyük példaként a forgó kódot. Nyilvánvaló, hogy a fent említett transzformációs függvény relatív, és lehetővé teszi a egymásra helyezést. Ha a fordítást (szélesség/2, magasság/2) függvényrajzba írjuk, ez nem azt jelenti, hogy minden egyes függvényhúzás egyszer működik, a koordináta -rendszer egy távolságot mozgat jobb alsó irányban az eredeti bázistól? Ésszerűen nem marad örökké a képernyő közepén.

Így meg lehet érteni. Amint a függvényhúzás kódja alulról befejezte a műveletet, a koordináta -rendszer visszatér a kezdeti állapotba a második műveletnél. Az eredeti koordináta -rendszer alapértelmezés szerint visszatér a bal felső sarokba. Tehát ha a koordináta -rendszert folyamatosan változtatni akarjuk, akkor a függvényen belüli szögparamétereknek folyamatosan növelniük kell az értékét.

Hozzáférés a koordináta állapotához

Néha nem akarjuk, hogy a koordinátarendszer állapotának megváltoztatása az előbbin alapuljon. Jelenleg a pushMatrix és a popMatrix függvényeket kell használnunk. A két funkció általában párban jelenik meg. A pushMatrix függvény a popMatrix előtt van. Ezeket nem lehet kizárólag használni, különben elromlik.

Példa:

[cceN_cpp theme = "hajnal"] pushMatrix (); // Tárolja a koordinátarendszer állapotát lefordítja (50, 50); ellipszis (0, 0, 20, 20); popMatrix (); // Koordináta -rendszer állapotának olvasása rect (0, 0, 20, 20); [/cceN_cpp]

Ebben a példában a fordítás (50, 50) használata előtt a pushMatrix. függvényt használjuk a koordinátarendszer aktuális állapotának tárolására. Ugyanakkor ez a kezdeti állapot. Miután rajzoltunk egy kört, majd implementáltuk a popMatrix -ot, vissza fog térni ebbe az állapotba. Jelenleg valósítsa meg a függvényt, ha azt tapasztalja, hogy nem szenvedte el a fordítás függvénye, hanem négyzetet rajzol az eredeti pont bal felső sarkába.

Ezenkívül a pushMatrix és a popMatrix függvény lehetővé teszi a beágyazást.

Például

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Annak érdekében, hogy intuitív módon megmutassuk kapcsolatát, a kondenzációs formátumot választjuk.

Kombinált mozgás vagy mozgás a mozgásban?

Most kezdődik a fontos rész második hulláma. Csak próbálj előre lépni. Korábban a hajó és az emberek metaforáját használtuk. Gondolt már arra, mi lenne, ha mind az embereket, mind a csónakot megmozdítanánk, milyen érzéseket éreznének a tengerparton tartózkodók?

Mint a vízszintes mozgás kombinálása a koordináta -rendszer forgó mozgásával. A lényeg itt csak az, hogy csak egy irányba haladjunk.

[cceN_cpp theme = "hajnal"] int x, y; lebegési szög; void setup () {méret (300, 300); háttér (234, 113, 107); noStroke (); x = 0; // Ha x kezdeti értéke 0, akkor figyelmen kívül hagyhatjuk ezt a kódmondatot. A változó deklarálásakor az alapértelmezett érték 0. y = 0; // Ugyanez a fentiekkel. szög = 0; // Ugyanez a fentiekkel. } void draw () {szög += 0,25; y--; fordítás (szélesség/2, magasság/2); pushMatrix (); forgatás (szög); ellipszis (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

És vannak körkörös mozgások és koordináta -rendszer skálázás.

[cceN_cpp theme = "hajnal"] úszó x, y, szög; void setup () {méret (300, 300); háttér (234, 113, 107); noStroke (); } void draw () {szög += 0,01; x = sin (szög) * 100; y = cos (szög) * 100; fordítás (szélesség / 2, magasság / 2); pushMatrix (); skála (1 + 0,1 * sin (szög * 10)); ellipszis (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Ne tévesszen meg tőle! A körpont valójában körkörös mozgást végez. Nem nehéz megérteni, ha összehasonlítjuk a videokamerával való skálázással. A videokamera, amely folyamatosan mozog elöl vagy hátul, körkörös mozgást végez.

Meglepődött? Ezek egyszerű alapfunkciók. De különböző kombinációkkal sokféle hatást tudunk létrehozni. Eddig az expozícióm leáll, hogy helyet hagyjak a felfedezésnek.

6. lépés: Átfogó használat

Ennek a fejezetnek hamarosan vége. Az utolsó két fejezetben a grafikus mozgás alapvető módszerét ismertettem. Úgy gondolom, hogy a kezdeti elképzeléseihez képest mélyebben megértheti ezt. Végül, itt van néhány befejezett példa a referenciaként.

[cceN_cpp theme = "hajnal"] float x1, y1, x2, y2, r, R; úszószög1, szög2; void setup () {méret (300, 300); r = 12; R = 120; szög1 = 0; szög2 = PI/4; } void draw () {háttér (234, 113, 107); noStroke (); fordítás (szélesség / 2, magasság / 2); szög1 += 0,02; szög2 += 0,06; x1 = R *sin (szög1); y1 = R* cos (szög1); x2 = R/2 *sin (szög2); y2 = R/2 *cos (szög2); ellipszis (x1, y1, r/2, r/2); ellipszis (x2, y2, r, r); ellipszis (-x1, -y1, r/2, r/2); ellipszis (-x2, -y2, r, r); ellipszis (x1, -y1, r/2, r/2); ellipszis (x2, -y2, r, r); ellipszis (-x1, y1, r/2, r/2); ellipszis (-x2, y2, r, r); ütés (255); strokeSúly (3); egyenes (x1, y1, x2, y2); vonal (-x1, -y1, -x2, -y2); egyenes (x1, -y1, x2, -y2); egyenes (-x1, y1, -x2, y2); } [/cceN_cpp]

Ez a példa semmiféle ismeretet nem tartalmaz az előző fejezetünkön túl.

Mely pontokért egyezik? Mely sorok egyeznek? Én sem tudok rájönni. De emlékszem, hogy a kód egy kis részéből származik.

Ez a mozgásának természete. A többi vonal csak tükörhatás. Ha továbbra is követi ezt az útmutatást, frissített verziót készíthet, és vezérlőt adhat a grafikához, hogy valós időben megváltoztassa a grafikus mozgás állapotát.

A programozás érdekessége abban rejlik, hogy szabályozásokat tervezhet vagy kombinálhat. A végső program azonban az Ön képességein múlik. A tervezők általában erőteljes grafikus képzelőerővel rendelkeznek. Vázolhat egy képet a fejébe, majd megpróbálhatja kódra fordítani. Ezenkívül magából a kódból és előírásokból, tervezési funkciókból és változókból indulhat ki. Ne feledje, hogy a feldolgozás a vázlata, a kód pedig az ecsetek! Csak szórja szabadon ötleteit!

7. lépés: VÉGE

Fejezetünk utolsó részében térjünk vissza egy kérdéshez, amelyet a kezdetektől fogva sokáig megőriztünk. Mi haszna, ha ennyi erőfeszítést költ egy kép elkészítésére a programmal? Miután megtanulta ezt a fejezetet, azt fogja találni, hogy nagyon sok játékmód vár a felfedezésre.

[cceN_cpp theme = "hajnal"] float browX, earD, eyeD, faceD; void setup () {méret (500, 500); } void draw () {háttér (200, 0, 0); szemöldökX = 150 + sin (frameCount / 30.0) *20; fülD = 180 + sin (frameCount / 10,0) *20; szemD = 60 + sin (frameCount/30,0) *50; arcD = 300; strokeSúly (8); ellipszis (175, 220, fülD, fülD); ellipszis (szélesség - 175, 220, fülD, fülD); rect (100, 100, faceD, faceD); vonal (homlok X, 160, 220, 240); vonal (szélesség-szemöldökX, 160, szélesség-220, 240); kitöltés (random (255), random (255), random (255)); ellipszis (175, 220, eyeD, eyeD); ellipszis (szélesség-175, 220, szemD, szemD); kitöltés (255); pont (szélesség/2, magasság/2); háromszög (170 - cos (frameCount / 10,0) * 20, 300 - sin (frameCount / 10,0) * 20, szélesség - (170 + cos (frameCount / 10,0) * 20), 300 + sin (frameCount / 10,0) * 20, 250, 350); } [/cceN_cpp]

Nem varázslatos a dinamikus grafikához? Itt nem mutatok túl sok esetet. Lehet, hogy sokkal jobb hatást tudsz tervezni, mint én. A programmal való rajzolás előnye, hogy minden képponttal játszhat. Mivel a grafikája nem bitkép, a grafika minden fontos pontja vezérelhető. Olyan hatásokat tud megvalósítani, amelyeket más szoftverek nem.

Ha olyan szíve van, amely mindent meg akar törni és újra egyesíteni, akkor a tanulmányi program nagyban segíti Önt ennek az elképzelésnek a megvalósításában.

Ez a cikk Wenzy tervezőtől származik.

8. lépés: Relatív értékek:

Érdekes programozási útmutató tervezőnek-az első érintés feldolgozása

Érdekes programozási útmutató tervezőnek-Készítse el első feldolgozó programját

Érdekes programozási útmutató tervezőnek - futtassa a képet (első rész)

Ha bármilyen kérdése van, küldjön egy e -mailt a [email protected] címre.

Ez a cikk innen származik: