Interessant programmeringsvejledning til designer-Få dit billede til at køre (del to): 8 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

Matematik, for de fleste af jer, virker ubrugelig. Det mest almindeligt anvendte i vores daglige liv er bare at tilføje, trække, multiplicere og dividere. Det er dog ganske anderledes, hvis du kan oprette med program. Jo mere du ved, jo mere vidunderligt resultat får du.

Trin 1: Bevægelse og funktion

Lad mig vise dig flere ukendte billeder for at stimulere din smag.

Hvad er det? Nu skal du bare beholde dette spørgsmål først og sidstnævnte vil du kende og bruge det.

I det sidste kapitel har vi lært funktionsopsætning og funktionstegning, som kan få den statiske grafik til at blive dynamisk. Dette bevægelsesformat er imidlertid bare for simpelt. Vi kommer til at bruge funktionskundskab, vi mestrede før, til at køre vores grafik med deres egen karakter.

Hvor mange funktioner kan du genkende fra ovenstående billeder? Hvilken relation har de til bevægelse? Lad os nu hente en kvadratisk funktion fra den, tilføje nogle parametre tilfældigt og se, hvad der vil ske. For eksempel y = x² / 100.

Sådan ser funktionsbilledet ud. Kopier koden herunder.

[cceN_cpp theme = "dawn"] float x, y; ugyldig opsætning () {størrelse (300, 300); baggrund (0); x = 0; } void draw () {stroke (255); strokeWeight (2); y = pow (x, 2) / 100,0; // Funktionen pow vender tilbage til den niende effekt i betegnelsesnummeret. (x, 2) repræsenterer kvadratet af x. Den første parameter er basenummeret, og den anden er indekset. punkt (x, y); x ++; } [/cceN_cpp]

Løbende effekt

Vælg derefter funktionens synd. Formel: y = 150 + sin (x).

Kopier følgende kode.

[cceN_cpp theme = "dawn"] float x, y; ugyldig opsætning () {størrelse (300, 300); baggrund (0); x = 0; } void draw () {y = højde/2 + sin (radianer (x)) * 150; // Funktionsradian transformerer x til vinkel. x ++; slagtilfælde (255); strokeWeight (2); punkt (x, y); } [/cceN_cpp]

Løbende effekt

Dette er den grafik, vi får efter betjening af koden. Og det er deres bevægelsesspor. I forhold til den tidligere er resultatet indlysende. Funktionsbillede svarer faktisk til bevægelsessporet! Det er ganske enkelt nok. Du skal bare erstatte værdien af x, y til koordinat. Det tidligere spor, vi tegnede, svarer til grafikken for funktion y = x² / 100. Mens sidstnævnte spor er lig med grafikken for funktion y = 150 + sin (x). Men i programmet er retningen på y -akslen modsat. Så, i forhold til den originale grafik, vil sporet være på hovedet. Nu tror jeg, du må have en fornemmelse af, at nogle vanskelige spørgsmål hjemsøgt i dit hoved i lang tid er løst med det samme. Det er fantastisk, at disse fantastiske funktioner, vi lærte før, kan bruges til at styre grafisk bevægelse!

Trin 2: At skrive funktion

Jeg har angivet flere ofte anvendte funktioner nedenfor. Håber disse kan hjælpe os med at oversætte funktioner til kode, der kan genkendes af computeren.

Derfor skal formlen nedenfor i programmet skrives sådan:

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å tilfældigt skrive en funktion ind i programmet og se, hvordan dens bevægelsesspor vil se ud. Husk at overveje værdifeltet og definitionsdomænet, ellers løber din grafik tør for din skærm.

Trigonometrisk funktion

Lad os nu gå videre for at kende nogle skrifter af trigonometriske funktioner.

Vi er nødt til at være opmærksomme på, at i programmet indtaster funktionsparameterens input i forhold til vinkel radian. Således skal sin90 ° skrives til synd (PI ／ 2). Hvis du ikke kender denne metode, kan du bruge funktion randians til på forhånd at omdanne vinkel til radian og derefter skrive sin （radianer (90)).

Brugen af funktionsgrader er forholdsvis modsat. Det kan omdanne radian til vinkel. Indtast print (grader (PI/2)) direkte i redigeringsområdet, og se, hvad du får.

Trin 3: Styr grafisk bevægelse med trigonometrisk funktion

Her er en sag, hvor du kan se den faktiske effekt af grafisk bevægelse.

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

Funktionssynd er en periodisk funktion. Dens minimumsværdi er －1, og maksimumværdien er 1. Skærmens højde er 300. Henvist til y = sin (radianer (x)) * 150 + 150, derfor vil ændringsområdet for værdien y blive kontrolleret godt inden for 0 til 300.

Spinning Cirkel

Nå, vi er endelig kommet ind på den mest importdel i dette kapitel. Hvordan tegner man en cirkelsti i et program? Hvordan bruges funktioner til at vise det? Lad mig vise dig de to billeder, vi så i begyndelsen af denne artikel igen.

Faktisk har de visuelt afsløret forholdet mellem omkredsskoordinat og trigonometrisk funktion. Bevægelse i ovenstående billeder er drevet af den konstant stigende uafhængige variabel θ. Venstre er billedet af funktion synd og cos, og højre står for et punkt, der udfører cirkulær bevægelse efter at være blevet kortlagt. Er det ikke meget smart? Det er ikke længere mystisk. Du kan bruge kode til at realisere det.

Et enkelt eksempel:

[cceN_cpp tema = "daggry"] float x, y, r, R, vinkel; ugyldig opsætning () {størrelse (300, 300); r = 20; // Cirkeldiameter R = 100; // Radius af bevægelsessti x = 0; vinkel = 0; y = højde/2; } void draw () {baggrund (234, 113, 107); translate (bredde/2, højde/2); // Flyt det originale punkt til skærmens centrum. noStroke (); x = R * cos (vinkel); y = R * sin (vinkel); ellipse (x, y, r, r); vinkel += 0,05; } [/cceN_cpp]

Se! En roterende cirkel vises! Her er den uafhængige variabel ikke mere i konstant stigning bit bliver vinkel (svarer til θ på billedet). Det er stå for vinkel. Blandt dem har xy relativt multipliceret koefficient R, hvilket fører til forlængelse af cirkelbevægelsesradius (R er for radius). Hvis den ikke skal multiplicere R, vil dens bevægelsessti være begrænset inden for området fra -1 til 1.

Hvorfor ikke bruge det stigende x? Ifølge egenskaben ved selve funktionen har ethvert x inden for definitionsdomæne det eneste y, der matcher det. Så i plan rektangulært dimensionskoordinatsystem kan du ikke finde ud af en "simpel funktion" for at tegne cirkel direkte. Det vil sige, at vi ikke længere kan bruge dette format.

y = (Det ukendte udtryk for x?);

x ＋＋;

Så vi er nødt til at ændre vores idé. Vælg en anden vinkel som uafhængig variabel, og brug derefter funktion sin og cos til at omdanne den til vandret og lodret koordinat.

x = R * cos (vinkel);

y = R * sin (vinkel);

vinkel += 0,05;

Nogle af jer undrer jer måske over, hvorfor det kan vise cirkelbevægelsens vej. Ifølge definitionen af trigonometrisk funktion kan vi let begrunde, at funktionen synder forholdet mellem den modsatte side og hypotenusen; funktion cos er forholdet mellem tilstødende til hypotenuse. Uanset hvor cirkelpunktet er, vil r (radius) forblive uændret. Derfor kan vi afslutte udtrykket for x -koordinat og y -koordinat.

På grund af at dette ikke er en matematisk vejledning, stopper jeg her med at vise mere viden om trigonometrisk funktion til dig. Hvis du vil vide det eller bare glemmer det, kan du prøve at gennemgå det igen selv.

Det er selvfølgelig i orden, hvis du ikke helt kan forstå det. Du behøver kun at vide, hvordan du bruger den til at tegne en cirkel. Dette er også en slags “programmeringsidé”. Senere vil vi ofte påberåbe nogle af de eksisterende moduler, der er lavet af andre for at realisere en bestemt form for funktion. Du skal bare ikke presse dig selv til at kende det i detaljer.

Funktion synd og cos er imidlertid almindeligt. Hvis du vil lave et højere niveau, kan du hellere prøve at kende det grundigt. Hvis dette spørgsmål i sig selv kan få os selv til at lære mere matematisk viden, venter der flere interessante ting på, at du skal grave ud.

Disse er billeder tæt i forhold til trigonometrisk funktion.

Trin 4: Bevægelseskoordinatsystem

De tidligere effekter handler om grafiske koordinatændringer. Selve koordinatsystemet er statisk. Faktisk kan vi gøre koordinatbevægelsen for at realisere bevægelseseffekt. Dette er ligesom mennesker på stranden ser de andre mennesker i båden. For folk på båden er båden statisk. Men hvad nu hvis båden selv bevæger sig, så bevæger folk i båden sig med den. De tidligere sager handler alle om "mennesker, der kører på båden". Faktisk bevæger båden sig ikke. Følgende er nogle almindelige funktioner til ændring af koordinatsystem.

Oversæt funktion

Funktionsoversættelse, som vi tidligere har talt om, bruges til at flytte grafikkoordinatsystemet vandret.

Tilkald format:

oversætte (a, b)

Den første parameter står for flytning til den positive retning af x -aksel for et pixel. Den anden parameter står for flytning til den positive retning af y -akslen for b -pixels.

Sammenlign de to koder, og prøv at finde nogen forskel. (For at forenkle koden kan vi slette funktionsstørrelse, skærmbredden og højden er som standard 100.)

Inden vi bruger:

ellipse (0, 0, 20, 20);

Efter at vi har brugt:

translate (50, 50);

ellipse (0, 0, 20, 20);

Funktion rotere

Tilkald format:

rotere (a)

Det bruges til at rotere koordinatsystem. Når parameteren er positiv, vælger den det originale punkt som midtpunkt og roterer med uret. Parameterindgangen er den samme med trigonometrisk funktion til brug af radian.

Inden brug:

ellipse (50, 50, 20, 20);

Efter brug:

rotere (radianer (30));

ellipse (50, 50, 20, 20);

Effekt i programmet er at få cirklen til at rotere rundt om koordinatens centrum i 30 grader med uret.

Funktionsskala

Tilkald format:

skala (a)

Denne funktion kan zoome ud koordinatsystem. Værdien er til skalering. Når parameteren er over 1, skal du zoome ind; hvis den er lavere end 1, skal du zoome ud.

Inden brug:

ellipse (0, 0, 20, 20);

Efter brug:

skala (4);

ellipse (0, 0, 20, 20);

Cirklen i billedet ovenfor forstærkes til de fire gange af den oprindelige størrelse. Du kan også bruge to parametre til at zoome ud i x -aksel og y -akselretninger separat.

skala (4, 2);

ellipse (0, 0, 20, 20);

Superposition af transformationsfunktion

Her handler superposition om ændringer i forhold til det nuværende koordinatsystem. Med andre ord kan effekter overlejres.

translate (40, 10);

translate (10, 40);

ellipse (0, 0, 20, 20);

Dens endelige effekt vil svare til

translate (50, 50);

ellipse (0, 0, 20, 20);

Samme for at rotere funktionen

rotere (radianer (10));

rotere (radianer (20));

ellipse (50, 50, 20, 20);

Lig med

rotere (radianer (30));

ellipse (50, 50, 20, 20);

Både funktionsskala og roter midt på det originale punkt for at skalere og rotere. Hvis vi ønsker at få rotereffekten med en central position på (50, 50), er vi nødt til at tænke på den modsatte måde. Først flyttes det oprindelige punkt til positionen (50, 50), og derefter tilføjes den roterende transformationsfunktion. Endelig lav din grafik malet på det originale punkt.

Før brug:

ellipse (50, 50, 50, 20);

Efter brug:

translate (50, 50);

rotere (radianer (45));

ellipse (0, 0, 50, 20); // For at se rotationsvinkelændringen har vi lavet en oval.

Det kan virke vridende. Du skal bare øve mere, så forstår du det. (Du kan også prøve at ændre funktionsoversættelsen og rotere for at se forskellen.)

Vandret bevægelse og cirkulær bevægelse

I de følgende tilfælde vil vi indse bevægelseseffekt gennem skiftende koordinatsystem. Samtidig vil jeg bede dig om at henvise til det tidligere kapiteleksempel. Det meste af tiden finder du, for at realisere en bestemt form for effekt, du kan bruge en helt anden metode.

Trin 5: Vandret bevægelse

[cceN_cpp theme = "dawn"]

int x, y; ugyldig opsætning () {størrelse (300, 300); x = 0; y = højde/2; } void draw () {baggrund (234, 113, 107); noStroke (); translate (x, y); ellipse (0, 0, 50, 50); x ++; } [/cceN_cpp]

Cirkelkoordinaten ændres ikke, men dens koordinatsystem ændres.

Drej bevægelse

[cceN_cpp theme = "dawn"] float r, R, vinkel; ugyldig opsætning () {størrelse (300, 300); r = 20; // Cirkeldimension R = 100; // Bevægelsesradius} ugyldig tegning () {baggrund (234, 113, 107); translate (bredde/2, højde/2); // Flyt det originale punkt til skærmcentret. rotere (vinkel); noStroke (); ellipse (0, R, r, r); vinkel += 0,05; } [/cceN_cpp]

Er det ikke langt mere klart og enkelt end trigonometrisk funktion? Du har måske et spørgsmål her. Tag roterende kode som et eksempel. Det er klart, at den ovennævnte omdannelsesfunktion er relativ og tillader overlejring. Hvis vi skriver translate (bredde/2, højde/2) til funktionstegn, betyder det ikke, at hver gang funktionstegning fungerer for en gangs skyld, vil koordinatsystemet flytte en afstand i den rigtige bundretning fra den originale base? Det vil med rimelighed ikke forblive i midten af skærmen for evigt.

Du kan forstå på denne måde. Når koden i funktionstegning har afsluttet en operation fra op til bunden, vender koordinatsystemet tilbage til startstatus ved den anden operation. Det originale koordinatsystem vil som standard vende tilbage til øverste venstre hjørne. Så hvis vi ønsker at få koordinatsystemet til at ændre kontinuerligt, skal vinkelparametrene inden for funktionen rotere konstant øge dets værdi.

Adgangskoordinatstatus

Nogle gange ønsker vi ikke, at ændringen af koordinatsystemstatus er baseret på den tidligere. På nuværende tidspunkt skal vi bruge funktionen pushMatrix og popMatrix. De to funktioner vises normalt i par. Funktionen pushMatrix er før popMatrix. De kan ikke udelukkende bruges, ellers går det galt.

Eksempel:

[cceN_cpp theme = "dawn"] pushMatrix (); // Store koordinatsystemstatus translate (50, 50); ellipse (0, 0, 20, 20); popMatrix (); // Læs koordinatsystemstatus rekt (0, 0, 20, 20); [/cceN_cpp]

I dette eksempel, før vi bruger translate (50, 50), bruger vi funktionen pushMatrix. Til at gemme den aktuelle status for koordinatsystem. Dette er samtidig den oprindelige status. Når vi har tegnet en cirkel og derefter implementeret popMatrix, kommer den tilbage til denne status. På dette tidspunkt, implementer funktionen rect, vil du opdage, at den ikke har lidt indflydelse fra funktion translate i stedet det tegner en firkant i venstre øverste hjørne af det originale punkt.

Desuden tillader funktion pushMatrix og popMatrix indlejring.

For eksempel

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

For at vise sit forhold intuitivt vælger vi kondensformat.

Kombineret bevægelse eller bevægelse i bevægelse?

Nu starter den anden bølge af vigtig del. Bare prøv at skubbe fremad. Tidligere har vi brugt en metafor om båd og mennesker. Har du nogensinde tænkt på, hvad hvis vi får både mennesker og båd til at bevæge sig, hvilken følelse vil folk på stranden have?

Ligesom kombinere vandret bevægelse med roterende bevægelse af koordinatsystem. Pointen her er faktisk kun at bevæge sig i en retning.

[cceN_cpp theme = "dawn"] int x, y; flydevinkel; ugyldig opsætning () {størrelse (300, 300); baggrund (234, 113, 107); noStroke (); x = 0; // Når den oprindelige værdi af x er 0, kan vi negligere denne sætning af kode. Når variabel erklæres, er standardværdien 0. y = 0; // Samme til ovenstående. vinkel = 0; // Samme til ovenstående. } void draw () {vinkel += 0,25; y--; translate (bredde/2, højde/2); pushMatrix (); rotere (vinkel); ellipse (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Og der er cirkulær bevægelse og koordinatsystemskalering.

[cceN_cpp tema = "daggry"] float x, y, vinkel; ugyldig opsætning () {størrelse (300, 300); baggrund (234, 113, 107); noStroke (); } void draw () {vinkel += 0,01; x = sin (vinkel) * 100; y = cos (vinkel) * 100; translate (bredde / 2, højde / 2); pushMatrix (); skala (1 + 0,1 * sin (vinkel * 10)); ellipse (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Lad dig ikke snyde af det! Cirkelpunktet laver faktisk cirkulær bevægelse. Det er ikke svært at forstå, hvis vi sammenligner det med skalering med et videokamera. Et videokamera, der konstant bevæger sig foran eller bagpå, skyder et punkt i cirkulær bevægelse.

Overrasket? Disse er enkle grundlæggende funktioner. Men med forskellige kombinationer kan vi skabe så mange forskellige effekter. Indtil nu stopper min eksponering for at spare plads til din udforskning.

Trin 6: Omfattende brug

Det nærmer sig snart en ende for dette kapitel. I de sidste to kapitler har jeg introduceret den grundlæggende metode til grafisk bevægelse. Jeg tror, du måske har en dybere forståelse for det i forhold til dine første ideer. Sidst i det mindste er her et udfyldt eksempel til din reference.

[cceN_cpp tema = "daggry"] float x1, y1, x2, y2, r, R; flydevinkel1, vinkel2; ugyldig opsætning () {størrelse (300, 300); r = 12; R = 120; vinkel1 = 0; vinkel2 = PI/4; } void draw () {baggrund (234, 113, 107); noStroke (); translate (bredde / 2, højde / 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); ellipse (x2, y2, r, r); ellipse (-x1, -y1, r/2, r/2); ellipse (-x2, -y2, r, r); ellipse (x1, -y1, r/2, r/2); ellipse (x2, -y2, r, r); ellipse (-x1, y1, r/2, r/2); ellipse (-x2, y2, r, r); slagtilfælde (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 eksempel indeholder ingen viden ud over vores tidligere kapitel, der blev introduceret.

For hvilke point matcher? Hvilke linjer matcher? Jeg kan heller ikke finde ud af det. Men jeg kan huske, at det stammer fra en lille del af koden.

Dette er karakteren af dens bevægelse. Restlinjerne er bare spejleffekt. Hvis du fortsætter med at følge denne vejledning, kan du lave en opdateret version og tilføje en controller til din grafik for at ændre din grafiske bevægelsesstatus i realtid.

Det interessante punkt ved programmering ligger i, at du kan designe eller kombinere forskrifter. Hvad det endelige program bliver, afhænger imidlertid af din evne. Normalt har designere stærk grafisk fantasi. Du kan tegne et billede i dit hoved og derefter prøve at oversætte det til kode. Du kan også starte fra koden og reglerne selv, designfunktioner og variabler efter behag. Husk, at behandling er din skitse, og kode er dine pensler! Sprøjt bare dine ideer frit!

Trin 7: SLUT

Sidst i vores kapitel, lad os vende tilbage til et spørgsmål, vi har bevaret længe siden begyndelsen. Hvad er brugen af at bruge så mange kræfter på at lave et billede med programmet? Når du har lært dette kapitel, vil du opdage, at der er så mange spillemetoder, der venter på, at du skal udforske.

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; ugyldig opsætning () {størrelse (500, 500); } void draw () {baggrund (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; earD = 180 + sin (frameCount / 10,0) *20; eyeD = 60 + sin (frameCount/30.0) *50; ansigt D = 300; strokeWeight (8); ellipse (175, 220, earD, earD); ellipse (bredde - 175, 220, earD, earD); rect (100, 100, faceD, faceD); linje (browX, 160, 220, 240); linje (bredde-pandeX, 160, bredde-220, 240); fill (tilfældig (255), tilfældig (255), tilfældig (255)); ellipse (175, 220, eyeD, eyeD); ellipse (bredde-175, 220, eyeD, eyeD); fyld (255); punkt (bredde/2, højde/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 grafik? Her viser jeg dig ikke for mange sager. Du kan måske designe en langt bedre effekt end mig. Fordelen ved at tegne med program findes, du kan spille med hver pixel. Da din grafik ikke er bitmap, kan hvert nøglepunkt på din grafik kontrolleres. Det kan realisere nogle effekter, som anden software ikke kan indse.

Hvis du har et hjerte, der ønsker at bryde alt og kombinere det igen, vil studieprogram i høj grad hjælpe dig med at opfylde denne idé.

Denne artikel kommer fra designer Wenzy.

Trin 8: Relative aflæsninger:

Interessant programmeringsvejledning til designer-behandling af første berøring

Interessant programmeringsvejledning til designer-Opret dit første behandlingsprogram

Interessant programmeringsvejledning til designer - Få dit billede til at køre (første del)

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

Denne artikel er fra: