Mielenkiintoisia ohjelmointioppaita suunnittelijalle-saat kuvan toimimaan (osa 1): 16 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:04

Juosta! Juosta! Juosta!

Ohjelmointi ei ole niin vaikeaa. Tärkeintä on löytää rytmi ja tehdä se yksi kerrallaan.

Ennen kuin luet tämän luvun, toivon, että olet jo tutustunut perustoimintojen piirtomenetelmään, tai sinua huimaa ja hämmentää kaksi suurta päätoimintoa: asennus ja piirtäminen.

Koska haluamme tehdä liikegrafiikkaa, meidän on tiedettävä, miten animaatio tuotetaan.

Yllä oleva kuva vaikuttaa varsin houkuttelevalta ja paljastaa visuaalisesti animaation toteuttamisperiaatteen.

Animaatio on taikuutta. Se on taikuutta visuaalisessa huijaamisessa. Kuitenkin, kun tämä tieto räjähti, videotulvien ikä, olemme jo tottuneet siihen. Harvat ihmettelevät, että animaation näkeminen on hämmästyttävää.

Samaa periaatetta voidaan soveltaa piirustusanimaatioon ohjelman avulla. Meidän on pohdittava eri grafiikoiden piirtämistä kuhunkin kehykseen, ja ohjelma kääntää sivut automaattisesti, kun täydennämme päättynyttä animaatiota. Seuraavassa luvussa puhumme graafisen perusliikkeen toteuttamisesta. Ennen sitä meidän on tiedettävä muuttujien perustiedot.

Vaihe 1: Muuttuja

Muuttuja on datasäilö. Sitä voidaan käyttää toistuvasti ohjelman sisällä.

Esimerkiksi:

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

[/cceN_cpp]

Tässä koodiosassa ei ole käytetty muuttujia. Se piirtää ruudulle neljä ympyrää. Voimme havaita, että niillä on sama leveys ja korkeus. Nyt kun se on sama, toistuvien tietojen syöttämisen minimoimiseksi voimme määritellä sen edustavan merkin. Tämä merkki on vaihteleva.

Tässä koodi muuttujan lisäämisen jälkeen:

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

[/cceN_cpp]

Saamme täysin saman tuloksen!

Koska olemme määritelleet muuttujan a, voimme muuttaa parametreja kätevästi. Jos muutamme a = 50 arvoksi a = 100, kaikkien ympyröiden leveydestä ja korkeudesta tulee tasaisesti 100. Joten meidän ei tarvitse muuttaa parametreja yksitellen. Muuttuja on todella hyvä keksintö.

Vaihe 2: Muuttujan luominen

Ennen muuttujan käyttöä meidän on tehtävä lausunto ja määritettävä sen tietotyyppi.

int i;

i ＝ 50;

Koodin ensimmäinen virke on tehnyt lausunnon muuttujalle i. int on symboli, jota käytetään pääasiassa muuttujan ilmoittamiseen. Ilmoitettaessa se säästää tilaa tietokoneen muistissa, mikä vastaa "laatikon" luomista, jota käytetään erityisesti kokonaislukutietojen palauttamiseen. Toinen virke tarkoittaa, että tehtävä 50 pannaan täytäntöön muuttujalla i. Tämän lauseen toteuttamisen jälkeen tiedot tallennetaan muuttujaan i vakaasti. Tai voit olla laiskempi yhdistämään yllä olevat kaksi virkettä yhdeksi ja suorittamaan tehtävän lausetta tehdessäsi.

int i ＝ 50;

Muuttujan nimeäminen on suhteellisen ilmaista. Mutta joskus meidän on kiinnitettävä huomiota johonkin.

Vaihe 3: Muuttujan nimeämissääntö

• Sen on oltava aakkosten ja alleviivausten yhdistelmä. Se voi olla symboli tai sana.

• Kirjainkoolla on merkitystä. Nimi ja nimi voivat edustaa erilaisia muuttujia.

• Yritä nimetä se mahdollisimman helpoksi, jotta ymmärrät yhdellä silmäyksellä. Ensimmäisen merkin on oltava aakkosnumero numeron tai erikoismerkin sijasta.

• Ei avainsanoja, kuten int, float

Seuraavassa on joitain vääriä lausuntoja.

int $ a;

int 89b;

Tässä oikeat väitteet:

int r;

int super_24;

int openTheDoor;

Vaihe 4: Muuttujan tyyppi

Lukuun ottamatta kokonaislukutietojen ilmoittamista, voimme ilmoittaa desimaalitiedoista (joita kutsutaan myös liukulukutiedoiksi) avainsanalla float.

kelluva b = 0,5

Meidän on pidettävä mielessä, millaista tietotyyppiä käytimme lausunnossamme. Jos olemme käyttäneet avainsanaa int, jälkimmäinen tehtävä ei voi kirjoittaa i ＝ 0.5 tai jotain sellaista, tai ohjelmasta tulee virhe. Mutta jos kirjoitamme vastakkain, kaikki on kunnossa. Esimerkiksi kelluva i = 5 on oikea kielioppi, mutta ohjelma tunnistaa sen desimaalilukuna.

Jotkut muuttujat ovat jo järjestelmän määrittämiä. Meidän ei tarvitse ilmoittaa niitä itse. Aivan kuten aiemmin mainittu "leveys, korkeus", se hankkii automaattisesti tietokoneen näytön leveyden ja korkeuden. Käyttö on niin suurta, että suunnittelija määrittelee sen suoraan oletusmuuttujaksi, jotta se olisi helpompi käyttää.

Vaihe 5: Käyttäjä

Seuraavat ovat käsittelyoperaattoreita:

+ plus

- miinus

* moninkertaistaa

jakaa

％ Jäljellä oleva moduuli

Sinun on tunnettava kaikki nämä operaattorit paitsi %. Se näyttää melko oudolta, koska sen tulos on jäljellä. 9%3 on 0. Vaikka 9%5 on 4.

Operaattoreita voidaan käyttää tehtävien ja muuttujien joukossa.

[cceN_cpp theme = "dawn"] int a = 1; // ilmoittaa kokonaisluku muuttuja a, tehtävä on 1. int b = 2; // Ilmoita kokonaislukumuuttuja b, tehtävä on 2. int c; // Ilmoita kokonaislukumuuttuja c. c = a + b; // Plus kaksi tehtävää ja määritä sen tulos c: lle. tulosta (c); // Lähtömuuttuja c.

[/cceN_cpp]

Vaihe 6: Toiminnan tulos:

Tulos ei näy ikkunassa, vaan konsolin alareunassa.

Neljännen rivin kirjoitusmenetelmä näyttää varsin oudolta. Mutta se on yleinen muoto, jota käytetään usein tietokoneen määrityksen aikana. Yhtäsymbolin vasemmanpuoleisen tulee olla viimeinen osoitettu muuttuja, ja oikeanpuoleisen pitäisi olla toimintaprosessi.

Viidennen rivin tulostustoiminto voi tulostaa muuttujia konsolista, jota käytetään usein testatun datan kunnon testaamiseen.

Vaihe 7: Käyttöasetus

Käsittelyn ongelmallinen kohta on selvittää muuttujan tyyppi. Meidän on kiinnitettävä erityistä huomiota liukuluku- ja kokonaislukutyypin prosessiin.

tulosta （6/5）; // tulos 1

Toiminta kokonaislukujen välillä saa uuden kokonaisluvun. 6 jaettuna 5: llä on 1,2. Mutta ohjelman tulos on 1. Tämä on vastoin intuitiotamme. Ohjelma ei käsittele kierrosta, mutta poistaa desimaalipilkun takana olevan numeron.

tulostus (6.0 / 5.0); // tulos 1.2

Liukulukujen välinen toiminta johtaa uuteen liukulukuun. Jos todellinen tulos on 1,2, ohjelman tulos on sama.

tulostus (6 / 5.0); // tulos 1.2

tulostus (6,0 / 5); // tulos 1.2

Lopuksi se on sekoitus kokonaislukua ja liukuluku. Lopputulos on 1,2.

• Itse asiassa sinun on pidettävä mielessä, että tämän sääntelyrakenteen tavoitteena ei ole menettää tietojen tarkkuutta. Joten jos yksi elementti on liukuluku, tulos on myös liukuluku.

Vaihe 8: Asetustoiminto ja piirtotoiminto

Aiemmin olemme keskustelleet joukosta maadoitustietoa. Nyt päästään vihdoin pelaamaan jotain mielenkiintoista. Toimintojen asetus ja piirtäminen vastaavat käsittelyn päätoimintoja. Nämä kaksi toimintoa ovat hyvin erityisiä. Se voi hallita ohjelman toimintaa. Suhteellisen monimutkainen ohjelma sisältää nämä kaksi toimintoa, koska ne ovat ohjelman peruskehys. Muoto:

void setup () {

}

void draw () {

}

Erikoiskäytön vuoksi niiden kutsumismuoto eroaa muista toiminnoista. Meidän on lisättävä "void" ennen funktion nimeä, joka tarkoittaa "palautettua arvoa". Funktion nimen taakse meidän on lisättävä sulkuja ja aaltosulkeita.

[cceN_cpp theme = "dawn"] void setup () {print (1); } mitätön draw () {print (2); } [/cceN_cpp]

Katsotaanpa esimerkkiä:

Kun painat käyttöpainiketta, konsoli antaa ensin "1" ja sitten jatkuvasti "2", kunnes olet painanut pysäytyspainiketta tai sulkenut ikkunan.

Asennustoiminnon suluissa oleva koodi otetaan käyttöön vain kerran.

Tämän luonteen vuoksi asetuksia käytetään yleensä ympäristön ominaisuuksien, kuten näytön leveyden ja korkeuden, taustavärin ja kaikenlaisten muuttujien määrityksen, alustamiseen. Vaikka me usein sijoitamme piirtotoimintoja funktion piirtämiseen jatkuvasti muuttuvan grafiikan luomiseksi.

Vaihe 9: Ympyrä vaakasuunnassa

Funktion piirtämisen avulla voimme aloittaa animaatioiden luomisen. Menetelmä animaatiotehosteen kirjoittamiseksi Processingilla on melko "hankala". Sillä ei ole olemassa mitään komentoa. Määritä esimerkiksi tietty muoto kaarevaksi.

Meidän on määriteltävä nämä yksityiskohdat itse. Sinun on kerrottava ohjelmalle, millaista grafiikkaa kukin kehys tarvitsee ehdottomasti.

Kirjoita siihen seuraava koodi (Aloitetaan nyt käsin tekeminen):

[cceN_cpp theme = "dawn"] int x; int y; void setup () {koko (300, 300); x = 0; y = korkeus/2; } void draw () {tausta (234, 113, 107); noStroke (); ellipsi (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Tämä koodiosa näyttää liikeympyrän. Entistä ilmoitettua muuttujaa x, y käytetään koordinaatin sijainnin tallentamiseen. Sen tehtävät suoritetaan toimintojen asetuksissa. Avainkoodi on seuraava funktion piirtämisessä:

x = x + 1

Älä pidä sitä matemaattisena yhtälönä, tai se on hyvin outoa. Tässä "＝" on tehtävän symboli. Se edustaa oikeiden numeroiden sijoittamista vasempaan muuttujaan. Oletetaan, että x on 50, kun koodi on käynnissä, "＝": n oikea puoli on 50+1, eli 51. Lopputulos osoitetaan muuttujaan x. Joten x: n arvoksi tulee 51.

Noudata ohjelman menettelytapaa, aina kun funktion piirtäminen toimii kerran, x: n arvo kasvaa 1. Joten joka kerta kun piirtämme, ympyrä siirtää pikselin suunnan vaakasuoraan oikealle verrattuna edelliseen kehykseen. Siksi grafiikasta tulee liikkuva.

• Jotta koodi olisi luettavampi, meidän on varattava tietty huone ennen jokaista suluissa olevaa koodiriviä. Ja sen tulee olla mahdollisimman linjassa. Paina SARKAINTA tai useita tyhjiä välilyöntejä, se voi vetäytyä sisään.

• Tyhjän tilan ja rivinvaihdon symboli ohjelmassa ei vaikuta ohjelmaan. Joten on ok, jos kirjoitamme yhden enemmän tai vähemmän.

Tässä on toinen yksinkertaisempi tapa ilmaista se. Jotta muuttuva ympyrä kasvaisi automaattisesti 1, meidän on kirjoitettava se seuraavassa muodossa.

ympyrä ＝ ympyrä ＋1

Aika hankalaa! Jos muuttujan nimi on pidempi, meidän on kirjoitettava lisää sanoja. Joten laiskoilla edeltäjillämme on tällainen idea.

ympyrä ＋＋

Eikö se ole hyvin yksinkertaista? Se tarkoittaa, että lisää 1 automaattisesti. Samanlainen on - -, mikä tarkoittaa pienentämistä automaattisesti 1.

Mutta jos toivomme, että automaattisen lisäyksen määrä on muu kuin 2, meidän on kokeiltava toista lauseketta.

ympyrä += 2

Tämä vastaa

ympyrä = ympyrä + 2

Samoin on - ＝, /=, *=.

Vaihe 10: Liikkeen suunta

Graafisen liikkeen suunta riippuu siitä, miten muutat koordinaattiasi. Jos se muutetaan arvoksi y ＝ y ＋ 1, ympyrä siirtyy alaspäin. Jos sekä x että y lisää 1, ympyrä siirtyy alaspäin oikeaa alareunaa. Jos kirjoitamme sen olevan miinus -symboli, se liikkuu vastakkaiseen suuntaan.

[cceN_cpp theme = "dawn"] int x, y; // Voi ilmoittaa useita muuttujia samanaikaisesti, erota toisistaan pilkulla. void setup () {koko (300, 300); x = 0; y = 0; } void draw () {tausta (234, 113, 107); noStroke (); ellipsi (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Liikkumisnopeus

Muistatko oletusarvon 60 kuvaa sekunnissa funktion arvonnassa? Tämän nopeuden mukaan yllä oleva ympyrä liikkuu 60 pikseliä sekunnissa oikealle.

Jos haluamme muuttaa graafista liikenopeutta, on kaksi tapaa: yksi on lisätä x -arvoa joka kerta, kun sitä muutetaan.

x ＝ x ＋ 10

Se on parantanut nopeutta 10 kertaa alkuperäiseen verrattuna!

Toinen tapa on muuttaa kankaan päivitystiheyttä. ruudunpäivitysnopeus()

Tämä toiminto voi muuttaa kankaan lähetystaajuutta. Kirjoita frameRate (10) toimintoasetuksiin, se muuttaa alkuperäiset 60 kuvaa sekunnissa 10 kuvaan sekunnissa. Nopeus hidastuu 6 kertaa aikaisemmin.

Vaihe 11: Ohitettu tausta

Kaikki edelliset esimerkit kirjoittavat taustan funktion piirtämiseen. Oletko koskaan ajatellut kirjoittaa sen toimintojen asetuksiin? Onko siinä eroja? Päivitetään nyt esimerkki vaakasuorasta liikkeestä.

[cceN_cpp theme = "dawn"] int x, y; void setup () {koko (300, 300); tausta (234, 113, 107); x = 0; y = korkeus/2; } void draw () {noStroke (); ellipsi (x, y, 50, 50); x += 1; } [/cceN_cpp]

Mitä on tapahtunut? Ehkä se ei voi ymmärtää ongelman syntymisen syytä oikein. Poista toiminto noStroke, lisää isku uudelleen ja katso ympyrän liikerata.

Voi, koska aiemmin luotua piiriä ei ole poistettu! Koska toimintojen asennus toimii vain kerran, jos kirjoitamme taustan sen yläpuolelle, se täyttää taustan vain kerran ja jälkimmäisellä sillä ei ole enää vaikutusta. Toiminnon tausta on kuin maalikauha. Käytön jälkeen se kattaa koko kankaan sisällön vain taustavärin asettamisen sijaan. Kirjoitamme sen ennen funktion piirtämistä, jotta edellinen kehys peitetään joka kerta, kun luomme uuden kuvion. Siksi ympyrä voi toimia odotetusti. Lukuun ottamatta kunkin toiminnon käyttötapojen muistamista, meidän on ajateltava koodin sijaintia. Paljon aikaa, ylös- tai alaspäin oleva rivi koodalle ja sen kirjoittaminen hakasulkeeseen tai sen ulkopuolelle, se luo aivan erilaisia vaikutuksia. Koodin suunta on kaksiulotteinen. Jos virhe ilmenee, meidän on kalibroitava tämä kaksi ulottuvuutta.

• Tämä toistumaton piirtomenetelmä voi luoda hyvin erityisiä vaikutuksia, jos sitä käytetään oikein. Voit kopioida seuraavan koodin ja kokeilla.

[cceN_cpp theme = "dawn"] void setup () {koko (400, 400); } void draw () {ellipsi (leveys/2-mouseX, height/2-mouseX, mouseY, mouseY); ellipsi (leveys/2-hiiriX, korkeus/2+hiiriX, hiiriY, hiiriY); ellipsi (leveys/2+hiiriX, korkeus/2-hiiriX, hiiriY, hiiriY); ellipsi (leveys/2+hiiriX, korkeus/2+hiiriX, hiiriY, hiiriY); } [/cceN_cpp]

Tässä olemme käyttäneet maagista muuttujaa mouseX ja mouseY. Myöhemmin puhumme siitä yksityiskohtaisesti.

Vaihe 12: Pyörittävä ympyrä

Mitä jos haluan tehdä ympyrän liikesuunnan epäsäännölliseksi? Funktion satunnaisella älykkäällä toiminnolla voit myös ymmärtää tämän vaikutuksen. Satunnainen on usein käytetty toiminto. Sitä voidaan käyttää satunnaisfunktion luomiseen. Se on kuin jäljetön henki. Kun olet liittynyt muuttujiin, et voi kuvitella, mitä tulee seuraavaksi.

Kutsumuoto:

satunnainen (korkea)

Korkea edustaa satunnaista ylärajaa ja oletusarvoinen alaraja on 0. Esimerkiksi satunnainen (10). Se tuottaa luvun 0-10 satunnaisesti (0 sisältyy, mutta 10 ei sisälly).

satunnainen (matala, korkea)

Jos asetamme kaksi parametria, se palaa satunnaiseen arvoon niiden välillä, esimerkiksi satunnainen (5, 10). Se tuottaa luvun 5-10 satunnaisesti (5 sisältyy, mutta 10 ei sisälly).

Esimerkki:

[cceN_cpp theme = "dawn"] float x;

x = satunnainen (50, 100);

tulosta (x); [/cceN_cpp]

Joka kerta kun suoritamme ohjelman, konsoli antaa erilaisia arvoja.

• Huomautus: Satunnaisfunktion luomat arvot kuuluvat liukulukutyyppiin (desimaalilukutyyppi). Jos haluamme antaa arvon kokonaislukumuuttujalle, meidän on muutettava se funktion int () avulla. Muunnos ei noudata kierrosta, vaan poistaa desimaaliosan suoraan. Näin ollen int (satunnainen (5)) -ulostulolla on vain 5 mahdollisuutta: 0, 1, 2, 3, 4.

Kun olemme tutustuneet funktion satunnaiseen käyttöön, voimme siirtyä suoraan alla olevaan tapaukseen.

[cceN_cpp theme = "dawn"] int x, y; void setup () {koko (300, 300); x = leveys/2; y = korkeus/2; } void draw () {tausta (234, 113, 107); noStroke (); x += int (satunnainen (-5, 5)); y += int (satunnainen (-5, 5)); ellipsi (x, y, 50, 50); }

[/cceN_cpp]

Aiemmat lisätty koordinaattiarvot ovat kiinteitä. Vain jos lisäämme satunnaisarvoa, ympyrä liikkuu määrittelemättömään suuntaan. Suuremmalla satunnaisalueella se tärisee useammin. Koska arvojen muutos kehysten välillä on palautunut, liike ei ole enää tasaista. Vaikka edellinen kehys on (150, 150), jälkimmäinen kehys siirtyy (170, 170) asentoon vilauksen sisällä.

Vaihe 13: Siirtymisympyrä

Siirtymäpiiri

Saako se aikaan sujuvan liikkeen? Toimintamelu voi auttaa meitä. Sillä on parempi rytmi kuin tavallisella satunnaisella. Ja satunnaisesti luodut satunnaisluvut ovat jatkuvasti.

Kutsumuoto:

melu （t）

Toimintokohina ei voi määrittää sen lähtöaluetta. Ohjelma määrittelee sen, että se voi generoida vain liukulukuarvoja 0-1 ja kiinteällä tulolla voi olla vain kiinteä lähtö.

[cceN_cpp theme = "dawn"] float x = kohina (5); float y = melu (5); tulosta (x, y); [/cceN_cpp]

Koska yllä olevat syöttöparametrit ovat 5, joten tulostulokset ovat samat. Miten sitten muuttaa tulosta? Vastaus on muuttaa syöttöparametreja dynaamisesti. Itse asiassa voimme pitää kohinaa rajattomana ääniraidana, tuloparametrit ovat aivan kuin "nykyhetki". Jos parametritulo on jatkuvaa, myös lähtö on jatkuvaa.

[cceN_cpp theme = "dawn"] float x, y; void setup () {koko (700, 100); x = 0; tausta (0); } mitätön draw () {x += 1; y = kohina (frameCount/100.0)*100; noStroke (); ellipsi (x, y, 2, 2); }

[/cceN_cpp]

Tässä tapauksessa piirrämme Y: n muutospolun, jotta voimme ymmärtää toimintokohinan paremmin.

• Niistä muuttuva frameCount saa nykyisen kehyksen. Erilainen kuin leveys, korkeus edellisessä, se on vakaa ilman muutoksia. Lisäksi se alkaa kasvaa nollasta. Jos ymmärrämme sen alkuperäisellä näytön animoidulla grafiikalla, se näyttää sivun, jolle olemme kääntyneet (pikemminkin ohjelman aikakäsitykseen).

• frameCount on kokonaislukumuuttuja. Jaettuna toisella kokonaislukumuuttujalla, ohjelma käsittelee tuloksen kokonaislukuna. Tuloksen tarkkuuden parantamiseksi meidän on muutettava 100 arvoon 100.0. Jaettuna liukulukuluvulla saamme myös liukuluvun numeron.

• Jotta Y -akseli vaihdettaisiin 0: sta 100: een, meidän on kerrottava kohinan tulos 100: lla. Näin voimme hallita satunnaisarvoaluetta.

Jotkut teistä, jotka ajattelevat hyvin, saattavat kysyä "miksi meidän on jaettava frameCountby 100? Eikö ole ok kirjoittaa frameCount suoraan?" Voit tietysti! Mutta tässä, jotta voimme paremmin näyttää toimintokohinan ominaisuudet, hidastamme "lähetysnopeutta". Alla oleva esimerkki näyttää lähtöarvon muutokset eri muutosnopeuksilla.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; void setup () {koko (700, 500); x = 0; tausta (0); } mitätön draw () {x += 1; y1 = kohina (frameCount)*100; y2 = kohina (frameCount/10.0)*100; y3 = kohina (frameCount/100.0)*100; y4 = kohina (frameCount/1000.0)*100; y5 = kohina (frameCount/10000.0)*100; noStroke (); ellipsi (x, y1, 2, 2); ellipsi (x, y2+100, 2, 2); ellipsi (x, y3+200, 2, 2); ellipsi (x, y4+300, 2, 2); ellipsi (x, y5+400, 2, 2); aivohalvaus (80); viiva (0, 100, leveys, 100); viiva (0, 200, leveys, 200); viiva (0, 300, leveys, 300); viiva (0, 400, leveys, 400); }

[/cceN_cpp]

Voit pitää toimintokohinan muuttuvia parametreja edistymispalkkina. Parametrin muuttaminen on kuin siirrämme edistymispalkkia. Joten kun tämän "ääniraidan" muuttuva laajuus on suurempi, lähtöarvon etu- ja takaominaisuudet ovat heikompia. (Voimme kuvitella, mitä tapahtuu, jos lähetämme musiikkikappaleen tai videon kaksinkertaisella nopeudella, 5 kertaa nopeutta, 20 kertaa nopeutta). Kun laajuus on suurempi kuin tietty arvo, ei ole suurta eroa toimia satunnaisesti arvon luomisessa.

Jos ymmärrät kaikki yllä olevat esimerkit, sinusta tuntuu, ettei mikään voi olla helpompaa piirtää muuttopiiri. Voit myös ymmärtää sisäiset periaatteet.

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

[/cceN_cpp]

Nyt liike on mielenkiintoisempi kuin pyörivä gyro.

• Syy siihen, miksi funktion kohinan muuttujien x on lisättävä 100: een, johtuu niiden erottamisesta toisistaan. Jos funktion kohinan xy -parametrit ovat samat tai melko lähellä, x-, y -koordinaatin muutos lähestyy samaa. Tämä tekee liikkeestä paljon satunnaisempaa.

Vaihe 14: Hiiren siirtämä ympyrä

Seuraavaksi tulemme vihdoin kahteen muuttujasta, joista pidän eniten: mouseX ja mouseY. Näiden kahden käsityksen ensisilmäyksellä silmäni loistavat valosta. Koska se on suorin tapa olla vuorovaikutuksessa grafiikan kanssa. Sen avulla voimme luoda paljon mielenkiintoista ohjelmaa.

Tapaus on melko yksinkertainen:

[cceN_cpp theme = "dawn"] int x, y; void setup () {koko (300, 300); x = 0; y = 0; } void draw () {tausta (234, 113, 107); noStroke (); x = hiiriX; y = hiiriY; ellipsi (x, y, 50, 50); }

[/cceN_cpp]

mouseX voi hankkia hiiren x -koordinaatin, kun taas mouseY voi saada y -koordinaatin.

• Yritetään vaihtaa positiivinen ja negatiivinen symboli tai vaihtaa mouseX ja mouseY.

Vaihe 15: Lopeta

Näistä tutuista komennoista saatat pystyä suorittamaan grafiikan liikkeen. Käytä viimeisen luvun sisältöä, käytä mielikuvitustasi oikein, voit luoda paljon mielenkiintoisia animoituja tehosteita.

Seuraavassa luvussa voimme nähdä enemmän esimerkkejä. Samaan aikaan käytämme matemaattisia funktioita ja yhdistämme ne graafiseen liikkeeseen.

Tämä artikkeli tulee suunnittelija Wenzyltä.

Vaihe 16: Suhteelliset lukemat:

Mielenkiintoisia ohjelmointiohjeita suunnittelijalle-ensimmäisen kosketuksen käsittely

Mielenkiintoisia ohjelmointiohjeita suunnittelijalle-Luo ensimmäinen käsittelyohjelma

Tämä artikkeli on osoitteesta

Jos tarvitset apua, voit ottaa yhteyttä: [email protected].