Interessant programmeringsveiledning for designer-Få bildet ditt til å kjøre (del to): 8 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:20

Matematikk, for de fleste av dere, virker ubrukelig. Det mest brukte i vårt daglige liv er bare å legge til, trekke fra, multiplisere og dele. Det er imidlertid ganske annerledes hvis du kan lage med program. Jo mer du vet, jo mer fantastisk resultat vil du få.

Trinn 1: Bevegelse og funksjon

La meg vise deg flere ukjente bilder for å stimulere smaken din.

Hva er dette? Bare behold dette spørsmålet først og sistnevnte vil du vite og bruke det.

I det siste kapitlet har vi lært funksjonsoppsett og funksjonstegning, noe som kan få den statiske grafikken til å bli dynamisk. Imidlertid er dette bevegelsesformatet bare for enkelt. Vi skal bruke funksjonskunnskap vi mestret før for å kjøre grafikken vår med sin egen karakter.

Hvor mange funksjoner kan du kjenne igjen fra bildene ovenfor? Hva slags forhold har de til bevegelse? La oss nå hente en kvadratisk funksjon fra den, legge til noen parametere tilfeldig og se hva som vil skje. For eksempel, y = x² / 100.

Slik ser funksjonsbildet ut. Kopier koden nedenfor.

[cceN_cpp theme = "dawn"] float x, y; ugyldig oppsett () {størrelse (300, 300); bakgrunn (0); x = 0; } void draw () {stroke (255); slagvekt (2); y = pow (x, 2) / 100,0; // Funksjon pow vil gå tilbake til den niende kraften i betegnelsesnummeret. (x, 2) representerer kvadratet av x. Den første parameteren er basenummeret og den andre er indeksen. punkt (x, y); x ++; } [/cceN_cpp]

Løpeeffekt

Deretter velger du funksjon synd. Formel: y = 150 + sin (x).

Kopier følgende kode.

[cceN_cpp theme = "dawn"] float x, y; ugyldig oppsett () {størrelse (300, 300); bakgrunn (0); x = 0; } void draw () {y = høyde/2 + sin (radianer (x)) * 150; // Funksjonsradian transformerer x til vinkel. x ++; slag (255); slagvekt (2); punkt (x, y); } [/cceN_cpp]

Løpeeffekt

Dette er grafikken vi får etter bruk av koden. Og det er bevegelsessporene deres. Sammenlignet med den tidligere er resultatet åpenbart. Funksjonsbilde tilsvarer faktisk bevegelsessporet! Det er ganske enkelt nok. Du må bare erstatte verdien av x, y til koordinat. Det tidligere sporet vi tegnet tilsvarer grafikken til funksjonen y = x² / 100. Mens det siste sporet er lik grafikken til funksjonen y = 150 + sin (x). Men i programmet er retningen til y -akselen motsatt. Så, i forhold til den originale grafikken, vil sporet være opp ned. Nå antar jeg at du må ha en følelse av at noen vanskelige spørsmål hjemsøkt i hodet ditt lenge blir løst umiddelbart. Det er utrolig at disse fantastiske funksjonene vi lærte før kan brukes til å kontrollere grafisk bevegelse!

Trinn 2: For å skrive funksjon

Jeg har listet opp flere ofte brukte funksjoner nedenfor. Håper disse kan hjelpe oss med å oversette funksjoner til kode som kan gjenkjennes av datamaskinen.

Derfor skal formelen nedenfor i programmet skrives slik:

y = x² → y = pow (x, 2) eller 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)

Du kan også tilfeldig skrive en funksjon inn i programmet og se hvordan bevegelsessporet vil se ut. Husk å vurdere verdifeltet og definisjonsdomenet, ellers vil grafikken gå tom for skjermen.

Trigonometrisk funksjon

La oss nå gå videre for å kjenne noen skrifter av trigonometriske funksjoner.

Vi må være oppmerksom på at i programmet tar input av funksjonsparameteren i forhold til vinkel radian. Dermed skal sin90 ° skrives til synd (PI ／ 2). Hvis du ikke er kjent med denne metoden, kan du bruke funksjonsrandianer til å forvandle vinkel til radian på forhånd, og deretter skrive sin （radianer (90)).

Bruken av funksjonsgrader er relativt motsatt. Det kan forvandle radian til vinkel. Legg inn utskrift (grader (PI/2)) direkte i redigeringsområdet, og se hva du får.

Trinn 3: Kontroller grafisk bevegelse med trigonometrisk funksjon

Her er en sak for deg å se den faktiske effekten av grafisk bevegelse.

[cceN_cpp theme = "dawn"] float x, y; ugyldig oppsett () {størrelse (700, 300); } void draw () {bakgrunn (234, 113, 107); y = sin (radianer (x)) * 150 + 150; x ++; noStroke (); ellips (x, y, 50, 50); } [/cceN_cpp]

Funksjon synd er en periodisk funksjon. Minste verdi er －1, og maksimalverdi er 1. Skjermens høyde er 300. Referert til y = sin (radianer (x)) * 150 + 150, derfor vil endringsområdet for verdien y bli godt kontrollert innen 0 til 300.

Snurresirkel

Vel, vi har endelig kommet inn på den mest viktige delen i dette kapitlet. Hvordan tegne en sirkelbane i et program? Hvordan bruke funksjoner for å vise den? La meg vise deg de to bildene vi så i begynnelsen av denne artikkelen igjen.

Faktisk har de visuelt avslørt forholdet mellom omkretskoordinat og trigonometrisk funksjon. Bevegelsen i bildene ovenfor er drevet av den stadig økende uavhengige variabelen θ. Venstre er bildet av funksjon sin og cos, og høyre står for et punkt som gjør sirkulære bevegelser etter å ha blitt kartlagt. Er det ikke veldig smart? Det er ikke mystisk lenger. Du kan bruke kode for å innse det.

Et enkelt eksempel:

[cceN_cpp theme = "dawn"] float x, y, r, R, vinkel; ugyldig oppsett () {størrelse (300, 300); r = 20; // Sirkeldiameter R = 100; // Bevegelsesradius x = 0; vinkel = 0; y = høyde/2; } void draw () {bakgrunn (234, 113, 107); translate (bredde/2, høyde/2); // Flytt det opprinnelige punktet til skjermens senter. noStroke (); x = R * cos (vinkel); y = R * sin (vinkel); ellipse (x, y, r, r); vinkel += 0,05; } [/cceN_cpp]

Se! En spinnende sirkel dukker opp! Her er den uavhengige variabelen ikke mer i konstant økning bit blir vinkel (tilsvarer θ på bildet). Det er stå for vinkel. Blant den har xy relativt multiplisert koeffisient R, noe som fører til forlengelsen av sirkelbevegelsesradius (R er for radius). Hvis den ikke skal multiplisere R, vil bevegelsesbanen være begrenset innenfor området fra -1 til 1.

Hvorfor ikke bruke den økende x? I henhold til egenskapen til selve funksjonen har alle x innenfor definisjonsdomenet den eneste yen som samsvarer med den. Så i et plan rektangulært dimensjonskoordinatsystem kan du ikke finne ut en "enkel funksjon" for å tegne sirkel direkte. Det vil si at vi ikke kan bruke dette formatet lenger.

y = (Det ukjente uttrykket for x?);

x ＋＋;

Så vi må endre ideen vår. Velg en annen vinkel som uavhengig variabel, og bruk deretter funksjonen sin og cos til å transformere den til horisontal og vertikal koordinat.

x = R * cos (vinkel);

y = R * sin (vinkel);

vinkel += 0,05;

Noen av dere lurer kanskje på hvorfor den kan vise sirkelbevegelsens vei. I henhold til definisjonen av trigonometrisk funksjon, kan vi enkelt resonnere ut at funksjonen synder forholdet mellom den motsatte siden og hypotenusen; funksjon cos er forholdet mellom tilstøtende til hypotenuse. Uansett hvor sirkelpunktet er, vil r (radius) forbli uendret. Derfor kan vi avslutte uttrykket for x -koordinat og y -koordinat.

På grunn av at dette ikke er en matematisk veiledning, her skal jeg slutte å vise mer kunnskap om trigonometrisk funksjon til deg. Hvis du vil vite det eller bare glemmer det, kan du prøve å vurdere det igjen.

Selvfølgelig er det greit hvis du ikke helt kan forstå det. Du trenger bare å vite hvordan du bruker den til å tegne en sirkel. Dette er også en slags "programmeringside". Senere vil vi ofte påkalle noen av de eksisterende modulene som er laget av andre for å realisere en bestemt type funksjon. Bare ikke press deg selv til å vite det i detalj.

Funksjon synd og cos er imidlertid vanlig. Hvis du vil lage et høyere nivå, bør du prøve å kjenne det grundig. Hvis dette spørsmålet i seg selv kan drive oss til å lære mer matematisk kunnskap, er det flere interessante ting som venter på at du skal grave ut.

Dette er bilder nært knyttet til trigonometrisk funksjon.

Trinn 4: Bevegelseskoordinatsystem

De tidligere effektene handler om grafiske koordinatendringer. Selve koordinatsystemet er statisk. Egentlig kan vi gjøre koordinatbevegelsen for å realisere bevegelseseffekt. Dette er akkurat som menneskene på stranden ser på de andre menneskene i båten. For folk på båten er båten statisk. Men hva om selve båten beveger seg, så beveger folk i båten seg med den. De tidligere sakene handler om "folk som løper på båten". Båten beveger seg faktisk ikke. Følgende er noen vanlige funksjoner for endring av koordinatsystem.

Oversett funksjon

Funksjon translate, vi har snakket om tidligere, brukes til å flytte koordinatsystemet til grafikken horisontalt.

Kall format:

oversette (a, b)

Den første parameteren står for flytting til den positive retningen til x -akselen for piksler. Den andre parameteren står for flytte til den positive retningen til y -akselen for b piksler.

Sammenlign de to kodene og prøv å finne noen forskjell. (For å forenkle koden kan vi slette funksjonsstørrelse, skjermbredden og høyden er som standard 100.)

Før vi bruker:

ellipse (0, 0, 20, 20);

Etter at vi har brukt:

translate (50, 50);

ellips (0, 0, 20, 20);

Funksjon rotere

Kall format:

rotere (a)

Det brukes til å rotere koordinatsystem. Når parameteren er positiv, vil den velge det opprinnelige punktet som midtpunkt og rotere med klokken. Parameterinngangen er den samme med trigonometrisk funksjon for å bruke radian.

Før bruk:

ellips (50, 50, 20, 20);

Etter bruk:

rotere (radianer (30));

ellips (50, 50, 20, 20);

Effekt i programmet er å få sirkelen til å rotere rundt koordinatens senterpunkt med urviseren i 30 grader.

Funksjonsskala

Kall format:

skala (a)

Denne funksjonen kan zoome ut koordinatsystemet. Verdien er for skalering. Når parameteren er over 1, zoomer du inn; hvis den er lavere enn 1, så zoome ut.

Før bruk:

ellipse (0, 0, 20, 20);

Etter bruk:

skala (4);

ellips (0, 0, 20, 20);

Sirkelen i bildet ovenfor er forsterket til fire ganger den opprinnelige størrelsen. Du kan også bruke to parametere til å zoome ut i x -aksel og y -akselretning separat.

skala (4, 2);

ellips (0, 0, 20, 20);

Superposisjon av transformasjonsfunksjonen

Her handler superposisjon om endringer i forhold til dagens koordinatsystem. Med andre ord kan effekter legges over hverandre.

translate (40, 10);

translate (10, 40);

ellips (0, 0, 20, 20);

Den endelige effekten vil være lik

translate (50, 50);

ellipse (0, 0, 20, 20);

Samme for å rotere funksjonen

rotere (radianer (10));

rotere (radianer (20));

ellips (50, 50, 20, 20);

Er lik

rotere (radianer (30));

ellips (50, 50, 20, 20);

Både funksjonsskala og roter midt på det opprinnelige punktet for å skalere og rotere. Hvis vi ønsker å få rotereffekten med en sentral posisjon på (50, 50), må vi tenke på motsatt måte. Først flytter du det opprinnelige punktet til posisjonen (50, 50), og deretter legger du til den roterende transformasjonsfunksjonen. Endelig gjør grafikken din malt på det opprinnelige punktet.

Før bruk:

ellips (50, 50, 50, 20);

Etter bruk:

translate (50, 50);

rotere (radianer (45));

ellips (0, 0, 50, 20); // For å se rotasjonsvinkelen endres, har vi laget en oval.

Det kan virke kronglete. Du må bare øve mer, så forstår du det. (Du kan også prøve å endre funksjonsoversettelsen og rotere for å se forskjellen.)

Horisontal bevegelse og sirkulær bevegelse

I de følgende tilfellene kommer vi til å innse bevegelseseffekt gjennom å endre koordinatsystem. Samtidig vil jeg be deg om å referere til det tidligere kapitteleksemplet. Mesteparten av tiden vil du finne for å realisere en viss type effekt, kan du bruke en helt annen metode.

Trinn 5: Horisontal bevegelse

[cceN_cpp theme = "dawn"]

int x, y; ugyldig oppsett () {størrelse (300, 300); x = 0; y = høyde/2; } void draw () {bakgrunn (234, 113, 107); noStroke (); translate (x, y); ellips (0, 0, 50, 50); x ++; } [/cceN_cpp]

Sirkelkoordinaten endres ikke, men koordinatsystemet endres.

Roter bevegelse

[cceN_cpp theme = "dawn"] float r, R, vinkel; ugyldig oppsett () {størrelse (300, 300); r = 20; // Sirkeldimensjon R = 100; // Radius of movement track} void draw () {bakgrunn (234, 113, 107); translate (bredde/2, høyde/2); // Flytt det opprinnelige punktet til sentrum av skjermen. rotere (vinkel); noStroke (); ellips (0, R, r, r); vinkel += 0,05; } [/cceN_cpp]

Er det ikke langt mer klart og enkelt enn trigonometrisk funksjon? Du har kanskje et spørsmål her. Ta roterende kode som et eksempel. Tydeligvis er den ovennevnte transformerte funksjonen relativ og tillater overlagring. Hvis vi skriver translate (bredde/2, høyde/2) til funksjonstegning, betyr det ikke at hver gang funksjonstegning opererer for en gang, vil koordinatsystemet flytte en avstand i riktig bunnretning fra den originale basen? Det vil rimeligvis ikke forbli i midten av skjermen for alltid.

Du kan forstå på denne måten. Når koden i funksjonstegning har fullført en operasjon fra opp til bunn, vil koordinatsystemet gå tilbake til utgangsstatus ved den andre operasjonen. Det opprinnelige koordinatsystemet vil som standard gå tilbake til venstre øverste hjørne. Så hvis vi ønsker å få koordinatsystemet til å endres kontinuerlig, skal vinkelparametrene i funksjonsrotasjon stadig øke verdien.

Tilgangskoordinatestatus

Noen ganger ønsker vi ikke at endringen av koordinatsystemstatus er basert på den tidligere. På dette tidspunktet må vi bruke funksjonen pushMatrix og popMatrix. De to funksjonene vises vanligvis i par. Funksjon pushMatrix er før popMatrix. De kan ikke bare brukes, ellers går det galt.

Eksempel:

[cceN_cpp theme = "dawn"] pushMatrix (); // Lagre koordinatsystemstatus translate (50, 50); ellips (0, 0, 20, 20); popMatrix (); // Les koordinatsystemstatus rett (0, 0, 20, 20); [/cceN_cpp]

I dette eksemplet, før vi bruker translate (50, 50), bruker vi funksjonen pushMatrix.to lagre gjeldende status for koordinatsystem. Dette er samtidig den opprinnelige statusen. Etter at vi har tegnet en sirkel og implementert popMatrix, kommer den tilbake til denne statusen. På dette tidspunktet, implementer funksjonen rect, vil du finne at den ikke har lidd påvirkning fra funksjon translate i stedet den tegner en firkant i venstre øverste hjørne av det opprinnelige punktet.

Dessuten tillater funksjon pushMatrix og popMatrix hekkende.

For eksempel

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

For å vise sitt forhold intuitivt, velger vi kondensformat.

Kombinert bevegelse eller bevegelse i bevegelse?

Nå starter den andre bølgen av viktig del. Bare prøv å presse fremover. Tidligere har vi brukt en metafor for båt og mennesker. Har du noen gang tenkt på hva om vi får både menneskene og båten til å bevege seg, hva slags følelse folkene på stranden vil ha?

Som kombinere horisontal bevegelse med roterende bevegelse av koordinatsystemet. Poenget her er faktisk bare å bevege seg i en retning.

[cceN_cpp theme = "dawn"] int x, y; flytevinkel; ugyldig oppsett () {størrelse (300, 300); bakgrunn (234, 113, 107); noStroke (); x = 0; // Når startverdien til x er 0, kan vi neglisjere denne setningen med kode. Når variabelen deklareres, er standardverdien 0. y = 0; // Samme som ovenfor. vinkel = 0; // Samme som ovenfor. } void draw () {vinkel += 0,25; y--; translate (bredde/2, høyde/2); pushMatrix (); rotere (vinkel); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Og det er sirkulær bevegelse og koordinatsystemskalering.

[cceN_cpp theme = "dawn"] float x, y, vinkel; ugyldig oppsett () {størrelse (300, 300); bakgrunn (234, 113, 107); noStroke (); } void draw () {vinkel += 0,01; x = sin (vinkel) * 100; y = cos (vinkel) * 100; translate (bredde / 2, høyde / 2); pushMatrix (); skala (1 + 0,1 * sin (vinkel * 10)); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Ikke bli lurt av det! Sirkelpunktet gjør faktisk sirkulær bevegelse. Det er ikke vanskelig å forstå hvis vi sammenligner det med skalering med et videokamera. Et videokamera som stadig beveger seg foran eller bak, skyter et punkt i sirkelbevegelse.

Overrasket? Dette er enkle grunnfunksjoner. Men med forskjellig kombinasjon kan vi lage så mange forskjellige effekter. Frem til nå stopper eksponeringen min for å spare plass for din utforskning.

Trinn 6: Omfattende bruk

Det nærmer seg snart slutten for dette kapitlet. De to siste kapitlene har jeg introdusert den grunnleggende metoden for grafisk bevegelse. Jeg tror du kan ha en dypere forståelse for det, sammenlignet med dine første ideer. Sist i det minste, her er et fullført eksempel for din referanse.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; flytevinkel1, vinkel2; ugyldig oppsett () {størrelse (300, 300); r = 12; R = 120; vinkel1 = 0; vinkel2 = PI/4; } void draw () {bakgrunn (234, 113, 107); noStroke (); translate (bredde / 2, høyde / 2); vinkel1 += 0,02; vinkel2 += 0,06; x1 = R *sin (vinkel1); y1 = R* cos (vinkel1); x2 = R/2 *sin (vinkel2); y2 = R/2 *cos (vinkel2); ellipse (x1, y1, r/2, r/2); ellips (x2, y2, r, r); ellips (-x1, -y1, r/2, r/2); ellips (-x2, -y2, r, r); ellips (x1, -y1, r/2, r/2); ellipse (x2, -y2, r, r); ellips (-x1, y1, r/2, r/2); ellips (-x2, y2, r, r); slag (255); strokeWeight (3); linje (x1, y1, x2, y2); linje (-x1, -y1, -x2, -y2); linje (x1, -y1, x2, -y2); linje (-x1, y1, -x2, y2); } [/cceN_cpp]

Dette eksemplet inneholder ingen kunnskap utover vårt forrige kapittel som ble introdusert.

Hvilke poeng matcher? Hvilke linjer stemmer overens? Jeg kan ikke finne ut av det også. Men jeg husker at det kommer fra en liten del av koden.

Dette er bevegelsens natur. Restlinjene er bare speileffekt. Hvis du fortsetter å følge denne veiledningen, kan du lage en oppdatert versjon og legge til en kontroller i grafikken din for å endre grafikkbevegelsesstatusen i sanntid.

Det interessante poenget med programmering ligger i at du kan designe eller kombinere forskrifter. Hva det endelige programmet blir, avhenger imidlertid av din evne. Vanligvis har designere kraftig grafisk fantasi. Du kan skissere et bilde i hodet ditt, og deretter prøve å oversette det til kode. Du kan også starte fra koden og forskriftene selv, designfunksjoner og variabler når du vil. Husk at prosessering er skissen din, og koden er penslene dine! Bare spray ideene dine fritt!

Trinn 7: SLUTT

Sist i kapitlet, la oss gå tilbake til et spørsmål vi har bevart lenge siden begynnelsen. Hva er bruken av å bruke så mye krefter på å lage et bilde med programmet? Etter at du har lært dette kapitlet, vil du finne at det er så mange spillemetoder som venter på at du skal utforske.

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; ugyldig oppsett () {størrelse (500, 500); } void draw () {bakgrunn (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; earD = 180 + sin (frameCount / 10.0) *20; eyeD = 60 + sin (frameCount/30.0) *50; ansikt D = 300; slagvekt (8); ellipse (175, 220, earD, earD); ellipse (bredde - 175, 220, earD, earD); rect (100, 100, faceD, faceD); linje (browX, 160, 220, 240); linje (bredde-panneX, 160, bredde-220, 240); fyll (tilfeldig (255), tilfeldig (255), tilfeldig (255)); ellipse (175, 220, eyeD, eyeD); ellipse (bredde-175, 220, eyeD, eyeD); fyll (255); punkt (bredde/2, høyde/2); trekant (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, bredde - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Er det ikke magi for dynamisk grafikk? Her viser jeg deg ikke for mange saker. Du kan kanskje designe en langt bedre effekt enn meg. Fordelen med å tegne med program er at du kan spille med hver piksel. Siden grafikken din ikke er bitmap, er hvert nøkkelpunkt i grafikken kontrollerbart. Det kan innse noen effekter som annen programvare ikke kan innse.

Hvis du har et hjerte som ønsker å bryte alt og kombinere det igjen, vil studieprogrammet i stor grad hjelpe deg med å oppfylle denne ideen.

Denne artikkelen kommer fra designeren Wenzy.

Trinn 8: Relative avlesninger:

Interessant programmeringsveiledning for designer-behandling av første berøring

Interessant programmeringsveiledning for designer-Lag ditt første behandlingsprogram

Interessant programmeringsveiledning for designer - få bildet ditt til å løpe (første del)

Hvis du har spørsmål, kan du sende en e -post til [email protected].

Denne artikkelen er fra: