Interessant programmeringsvejledning til designer-Få dit billede til at køre (1. del): 16 trin

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

Løb! Løb! Løb!

Programmering er ikke så svært. Nøglepunktet er at finde din rytme og gøre det en efter en.

Inden jeg læser dette kapitel, håber jeg, at du allerede har været bekendt med den grundlæggende funktionstegningsmetode, eller du vil føle dig svimmel og forvirret af to store hovedfunktioner: opsætning og tegning.

Da vi vil lave bevægelsesgrafik, er vi nødt til at vide, hvordan animation produceres.

Ovenstående billede virker ganske attraktivt og afslører visuelt implementeringsprincippet for animation.

Animation er magi. Det er en magi om visuel snyd. Men i denne information eksploderede, video oversvømmelse alder, vi har allerede været vant til det. Få mennesker vil blive overrasket over, at det er en fantastisk ting at kunne se animationen.

Samme princip kan anvendes i tegning animation med program. Vi er nødt til at overveje, hvordan vi tegner forskellige grafikker i hver ramme, og programmet vil automatisk vende sider, mens vi supplerer en gennemført animation i vores hoved. I det følgende kapitel vil vi tale om, hvordan man realiserer grundlæggende grafisk bevægelse. Inden det skal vi kende noget grundlæggende viden om variabler.

Trin 1: Variabel

Variabel er beholderen til data. Det kan bruges gentagne gange i et program.

For eksempel:

[cceN_cpp tema = "daggry"] størrelse (500, 500); ellipse (100, 250, 50, 50); ellipse (200, 250, 50, 50); ellipse (300, 250, 50, 50); ellipse (400, 250, 50, 50);

[/cceN_cpp]

Denne del af koden har ikke brugt nogen variabler. Det tegner fire cirkler på skærmen. Vi kan finde, at de har samme bredde og højde. Nu hvor det er det samme, for at minimere gentagne dataindtastninger, kan vi definere et tegn, der repræsenterer det. Dette tegn er variabelt.

Her er koden efter at være tilføjet en variabel:

[cceN_cpp tema = "daggry"] størrelse (500, 500); int a = 50; ellipse (100, 250, a, a); ellipse (200, 250, a, a); ellipse (300, 250, a, a); ellipse (400, 250, a, a);

[/cceN_cpp]

Vi får et helt samme resultat!

Da vi har defineret variabel a, kan vi bekvemt ændre parametre. Hvis vi ændrer a = 50 til a = 100, så bliver alle cirkels bredde og højde 100 ensartet. Så vi behøver ikke at ændre parametre en efter en. Variabel er virkelig en god opfindelse.

Trin 2: Oprettelse af variabel

Inden vi bruger variabel, skal vi afgive erklæring og angive dens datatype.

int i;

i ＝ 50;

Den første sætning i koden har lavet en erklæring for en variabel i. int er et symbol, der hovedsageligt bruges til at erklære variabel. Når de erklærer, vil det spare et rum i computerens hukommelse, hvilket svarer til at generere en "boks", specielt brugt til at gendanne heltalsdata. Den anden sætning står for, at opgave 50 skal implementeres med variabel i. Efter implementeringen af denne sætning vil data blive lagret i variablen i stabilt. Eller du kan være dovere med at kombinere de ovennævnte to sætninger til en og færdiggøre opgaven, mens du udtaler dig.

int i ＝ 50;

Det er forholdsvis gratis at navngive en variabel. Men nogle gange skal vi være opmærksomme på noget.

Trin 3: Navngivelse af regulering af variabel

• Det skal være kombinationen af alfabet og understregning. Det kan være et symbol eller et ord.

• Etui -følsom. Navn og navn kan stå for forskellige variabler.

• Prøv at navngive det så let som muligt, så du kan forstå det ved et blik. Det oprindelige tegn skal være et alfabet i stedet for et tal eller et specialtegn.

• Ingen nøgleord som int, float

Det følgende er nogle forkerte udsagn.

int $ a;

int 89b;

Her er de korrekte udsagn:

int r;

int super_24;

int openTheDoor;

Trin 4: Variabel type

Bortset fra at deklarere heltalsdata, kan vi deklarere for decimaldata (også kaldet flydende punktdata) med nøgleord float.

flyde b = 0,5

Vi skal huske på, hvilken slags datatype vi brugte til vores erklæring. Hvis vi har brugt nøgleordet int, kan sidstnævnte opgave ikke skrive i ＝ 0.5 eller sådan noget, eller programmet bliver til en fejl. Men hvis vi skriver modsat, er det i orden. F.eks. Er float i = 5 den rigtige grammatik, men programmet vil genkende det som decimaltal.

Nogle af variablerne er allerede defineret af systemet. Vi behøver ikke at erklære dem selv. Ligesom den tidligere refererede "bredde, højde", vil den automatisk erhverve bredden og højden på computerskærmen. Så høj frekvens i brug, at designeren direkte definerer det som en standardvariabel for at gøre det mere bekvemt for os at bruge.

Trin 5: Operatør

Følgende er operatører af behandling:

+ plus

- minus

* formere sig

dele

％ Modul for resten

Du skal kende alle disse operatører undtagen %. Det virker ret underligt, fordi resultatet er resten. 9%3 er 0. Mens 9%5 er 4.

Operatører kan bruges blandt opgaver og variabler.

[cceN_cpp tema = "daggry"] int a = 1; // erklære heltalsvariabel a, tildeling er 1. int b = 2; // Deklarer heltalsvariabel b, tildeling er 2. int c; // Deklarer heltalsvariabel c. c = a + b; // Plus to tildelinger og tildel resultatet til c. tryk (c); // Output variabel c.

[/cceN_cpp]

Trin 6: Driftsresultat:

Outputresultatet vises ikke på vinduet, men i konsollen nederst.

Skrivemetoden for den fjerde linje ser ganske mærkelig ud. Men det er et almindeligt format, der ofte bruges under computertildeling. Venstre side af lige symbol skal være den sidste tildelte variabel, mens højre side skal være betjeningsproces.

Udskrivningsfunktionen i den femte linje kan udskrive variabler i konsollen, som ofte bruges til at teste tilstanden af dataoutput.

Trin 7: Driftsregulering

Et besværligt punkt i Processing er, at vi skal præcisere typen af variabel. Vi skal være særlig opmærksom på processen med flydende punktnummer og heltalstype.

tryk （6 /5）; // resultat 1

Drift mellem heltal får et nyt heltal. 6 divideret med 5 er 1,2. Men resultatet af programmet er 1. Dette er i modstrid med vores intuition. Programmet omhandler ikke runde, men sletter tallet bag decimaltegnet.

print (6,0 / 5,0); // resultat 1.2

Drift mellem flydende punkter vil resultere i et nyt flydende punktnummer. Hvis det faktiske resultat er 1,2, er programmets outputresultat det samme.

print (6 / 5.0); // resultat 1.2

print (6,0 / 5); // resultat 1.2

Endelig er det blandingen af heltal og flydende tal. Det endelige output resultat vil være 1,2.

• Faktisk skal du huske på, at målet med dette reguleringsdesign er ikke at miste nøjagtigheden af data. Så hvis et element er et flydende tal, vil resultatet også være flydende punktnummer.

Trin 8: Opsætningsfunktion og tegnefunktion

Tidligere har vi talt en stak jordforstået viden. Nu kommer vi endelig til at spille noget interessant. Funktionsopsætning og tegning svarer til behandlingens hovedfunktioner. Disse to funktioner er meget specielle. Det kan styre programmets procedure. Forholdsvis kompliceret program vil indeholde disse to funktioner, fordi de er programmets grundramme. Format:

ugyldig opsætning () {

}

ugyldig tegning () {

}

Den særlige brug gør deres påkaldelsesformat anderledes end de andre funktioner. Vi skal tilføje "void" før funktionsnavn, hvilket står for ingen "returneret værdi". Bag funktionsnavnet skal vi tilføje parenteser og seler.

[cceN_cpp theme = "dawn"] ugyldig opsætning () {print (1); } void draw () {print (2); } [/cceN_cpp]

Lad os se på et eksempel:

Når du trykker på betjeningsknappen, sender konsollen først "1" og derefter konstant "2", indtil du har trykket på stopknappen eller lukket vinduet.

Kode inden for parenteser i opsætningsfunktionen implementeres kun én gang. Mens kode inden for funktionstegning løbende kører i omløb (standardimplementering 60 gange/sekund).

På grund af denne karakter bruges opsætningen normalt til at initialisere miljøegenskaber, såsom bredden og højden på skærmen, baggrundsfarve og alle former for variabeltildeling. Mens vi ofte placerer tegnefunktioner i funktionstegning for at generere løbende ændret grafik.

Trin 9: Cirkel i vandret bevægelse

Med funktionstegning kan vi begynde at oprette vores animationer. Metoden til at skrive animationseffekt ved behandling er ret "akavet". Det har ingen eksisterende kommando. For eksempel, udpege en bestemt form til at gøre krumme.

Vi skal selv definere disse detaljer. Du skal fortælle programmet, hvilken slags grafik hver ramme helt sikkert har brug for.

Skriv følgende kode ind i den (lad os nu begynde at gøre det med hænderne):

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

[/cceN_cpp]

Denne del af koden viser en bevægelsescirkel. Den tidligere erklærede variabel x, y bruges til at gemme koordinatpositionen. Dens tildelinger kører i funktionsopsætning. Nøglekoden er følgende inden for funktionstegning:

x = x + 1

Se det ikke som en matematisk ligning, eller det vil være meget mærkeligt. Her er "＝" et symbol på tildeling. Det repræsenterer at placere de rigtige tal i den venstre variabel. Antag, at x er 50, når koden kører, er højre side af "＝" lig med 50+1, dvs. 51. Det endelige resultat vil blive tildelt variabel x. Så værdien af x bliver 51.

Følg programmets procedure, hver gang funktionstegning fungerer for en gangs skyld, værdien af x stiger 1. Så hver gang vi tegner, bevæger cirklen en pixelretning vandret til højre i forhold til den tidligere ramme. Derfor bliver grafikken bevægelig.

• For at få koden til at opnå bedre læsbarhed, er vi nødt til at skåne et bestemt rum før hver kodelinje inden for seler. Og det skal være så justeret som muligt. Tryk på TAB eller flere tomme mellemrum, det kan trække sig tilbage.

• Symbolet for tomt mellemrum og linjeskift i programmet påvirker ikke programmet. Så det er ok, hvis vi skriver en mere eller mindre.

Her er en anden enklere måde at udtrykke det på. For at få variabel cirkel til at øge 1 automatisk, skal vi skrive det til følgende format.

cirkel ＝ cirkel ＋1

Ganske ubelejligt! Hvis variabelens navn er længere, skal vi skrive flere ord. Så vores dovne forgængere tænker en idé som denne.

cirkel ＋＋

Er det ikke meget enkelt? Det betyder, at du øger 1 automatisk. Lignende til det, er der - -, hvilket betyder at reducere 1 automatisk.

Men hvis vi håber, at mængden af automatisk stigning er et andet tal som 2, er vi nødt til at prøve et andet udtryk.

cirkel += 2

Dette svarer til

cirkel = cirkel + 2

Tilsvarende er der - ＝, /=, *=.

Trin 10: Bevægelsesretning

Hvilken retning grafikken bevæger sig afhænger af, hvordan du ændrer din koordinat. Hvis den ændres til y ＝ y ＋ 1, bevæger cirklen sig nedad. Hvis både x og y øger 1, bevæger cirklen sig nedad i højre bund. Hvis vi skriver, at det er et minus -symbol, bevæger det sig i den modsatte retning.

[cceN_cpp theme = "dawn"] int x, y; // Kan erklære flere variabler på samme tid, brug komma til at adskille. ugyldig opsætning () {størrelse (300, 300); x = 0; y = 0; } void draw () {baggrund (234, 113, 107); noStroke (); ellipse (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Bevægelseshastighed

Kan du huske standard 60 billeder i sekundet inden for funktionstrækning? I henhold til denne hastighed bevæger cirklen ovenfor 60 pixels pr. Sekund til højre.

Hvis vi vil ændre den grafiske bevægelseshastighed, er der to metoder: Den ene er at øge x -værdien hver gang, siden den skal ændres.

x ＝ x ＋ 10

Det har forbedret hastigheden 10 gange i forhold til den originale!

Den anden metode er at ændre hyppigheden af opdatering af lærredet. frameRate ()

Denne funktion kan ændre lærredets udsendelsesfrekvens. Skriv frameRate (10) i funktionsopsætningen, det ændrer de originale 60 billeder i sekundet til 10 billeder i sekundet. Hastigheden sænkes 6 gange end tidligere.

Trin 11: Overset baggrund

Alle de foregående eksempler skriver baggrund i funktionstegning. Har du nogensinde tænkt på at skrive det til funktionsopsætning? Vil det have nogen forskelle? Lad os nu opdatere eksemplet på vandret bevægelse.

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

Hvad er der sket? Måske kan den ikke forstå årsagen til produktionen af problemet korrekt. Slet funktion noStroke, tilføj streg igen, og se cirkelens bevægelsessti.

Åh, det er på grund af den tidligere oprettede cirkel ikke er blevet slettet! Fordi funktionsopsætning kun fungerer én gang, hvis vi skriver baggrund over den, vil den kun fylde baggrunden én gang, og sidstnævnte vil ikke have nogen effekt mere. Funktionsbaggrund er som malingsspandværktøj. Når den er brugt, dækker den alt indhold på lærredet i stedet for kun at indstille en baggrundsfarve. Vi skriver det før funktionstegning, så den tidligere ramme vil blive dækket hver gang vi opretter et nyt mønster. Derfor kan cirklen køre som vi havde forventet. Bortset fra at huske brugen af hver funktion, er vi nødt til at tænke over kodens position. Meget tid, den opadgående eller nedadgående linje for codeaen og for at skrive den inden for eller uden for en bøjle, vil det skabe ganske forskellige effekter. Koderetningen er todimensionel. Hvis der vises en fejl, skal vi kalibrere i denne to dimension.

• Denne ikke gentagne tegnemetode kan skabe en helt særlig effekt, hvis den bruges korrekt. Du kan kopiere følgende kode og prøve.

[cceN_cpp theme = "dawn"] tomrumsopsætning () {størrelse (400, 400); } void draw () {ellipse (bredde/2-mouseX, højde/2-mouseX, mouseY, mouseY); ellipse (bredde/2-mouseX, højde/2+mouseX, mouseY, mouseY); ellipse (bredde/2+mouseX, højde/2-mouseX, mouseY, mouseY); ellipse (bredde/2+mouseX, højde/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

Her har vi brugt den magiske variabel mouseX og mouseY. Senere vil vi tale detaljeret om det.

Trin 12: Rystecirkel

Hvad hvis jeg vil få cirkelbevægelsesretningen til at blive uregelmæssig? Med funktionel tilfældigt klogt kan du også indse denne effekt. Tilfældig er en ofte anvendt funktion. Det kan bruges til at generere tilfældig funktion. Det er som en sporløs ånd. Når det først er relateret til variabler, kan du ikke forestille dig, hvad der bliver næste.

Tilkald format:

tilfældig (høj)

Høj repræsenterer den tilfældige øvre grænse, og standard nederste grænse er 0. Eksempelvis tilfældig (10). Det vil producere et tal fra 0 til 10 tilfældigt (0 er inkluderet, men 10 er ikke inkluderet).

tilfældig (lav, høj)

Hvis vi indstiller to parametre, vender den tilbage til den tilfældige værdi mellem dem. For eksempel tilfældig (5, 10). Det vil producere et tal fra 5 til 10 tilfældigt (5 er inkluderet, men 10 er ikke inkluderet).

Eksempel:

[cceN_cpp theme = "dawn"] float x;

x = tilfældig (50, 100);

print (x); [/cceN_cpp]

Hver gang vi kører programmet, udsender konsollen forskellige værdier.

• Bemærk: Værdier, der er oprettet ved tilfældige funktioner, tilhører typen af flydende punkt (decimaltalstype). Hvis vi vil tildele en værdi til en heltalsvariabel, skal vi transformere den gennem funktion int (). Transformationen følger ikke runden, men sletter decimaldelen direkte. Således har output fra int (random (5)) kun 5 muligheder: 0, 1, 2, 3, 4.

Når vi har gjort os bekendt med brugen af tilfældige funktioner, kan vi komme direkte ind i nedenstående sag.

[cceN_cpp theme = "dawn"] int x, y; ugyldig opsætning () {størrelse (300, 300); x = bredde/2; y = højde/2; } void draw () {baggrund (234, 113, 107); noStroke (); x += int (tilfældig (-5, 5)); y += int (tilfældig (-5, 5)); ellipse (x, y, 50, 50); }

[/cceN_cpp]

De tidligere tilføjede koordinatværdier er faste. Kun hvis vi øger en tilfældig værdi, bevæger cirklen sig i en ubestemt retning. Med det større tilfældige område ryster det oftere. Da værdien ændres mellem rammerne er hoppet, vil bevægelsen ikke længere være glat. Mens den tidligere ramme er på (150, 150), bevæger sidstnævnte ramme sig til positionen (170, 170) inden for et glimt.

Trin 13: Migrationscirkel

Migrationscirkel

Vil det skabe glat bevægelse? Funktionsstøj kan hjælpe os. Den har bedre rytme end standard tilfældig. Og de tilfældigt genererede tilfældige tal er kontinuerligt.

Tilkald format:

støj (t)

Funktionsstøj kan ikke definere dets outputområde. Programmet definerer, at det kun kan generere flydende tal fra 0 til 1, og fast input kan kun have fast output.

[cceN_cpp tema = "daggry"] float x = støj (5); float y = støj (5); print (x, y); [/cceN_cpp]

Fordi ovenstående inputparametre er 5, så outputresultaterne er de samme. Hvordan ændres resultatet derefter? Svaret er at ændre inputparametrene dynamisk. Faktisk kan vi betragte støj som et ubegrænset stemmespor, inputparametrene er ligesom "nuet". Hvis parameterindgangen er kontinuerlig, vil udgangen også være kontinuerlig.

[cceN_cpp theme = "dawn"] float x, y; ugyldig opsætning () {størrelse (700, 100); x = 0; baggrund (0); } void draw () {x += 1; y = støj (frameCount/100,0)*100; noStroke (); ellipse (x, y, 2, 2); }

[/cceN_cpp]

I dette tilfælde tegner vi ændringsvejen til Y, så vi bedre kan forstå funktionsstøj.

• Blandt den vil variabel frameCount få den nuværende ramme. Forskellig fra bredden, højden i den foregående, er den stabil uden ændringer. Desuden begynder det at stige fra 0. Hvis vi forstår det ved vores første animerede grafik, viser det den side, vi har vendt til (snarere til tidsopfattelsen i programmet).

• frameCount er en heltalsvariabel. Delt med en anden heltalsvariabel vil programmet som standard behandle resultatet som et heltal. For at forbedre resultatets nøjagtighed skal vi ændre 100 til 100,0. Delt med et flydende tal, får vi også et flydende tal.

• For at ændre Y -aksel fra 0 til 100 skal vi gange resultatet af støj med 100. Således kan vi kontrollere det tilfældige værdiområde.

Nogle af jer, der er gode til at tænke, kan spørge "hvorfor skal vi dele frameCountby 100? Er det ikke ok at skrive frameCount direkte?" Selvfølgelig kan du! Men her, for bedre at vise egenskaberne ved funktionsstøj, sænker vi "udsendelseshastigheden". Nedenstående eksempel viser ændringer i outputværdien under forskellige ændringshastigheder.

[cceN_cpp tema = "daggry"] float x, y1, y2, y3, y4, y5; ugyldig opsætning () {størrelse (700, 500); x = 0; baggrund (0); } void draw () {x += 1; y1 = støj (frameCount)*100; y2 = støj (frameCount/10,0)*100; y3 = støj (frameCount/100,0)*100; y4 = støj (frameCount/1000.0)*100; y5 = støj (frameCount/10000.0)*100; noStroke (); ellipse (x, y1, 2, 2); ellipse (x, y2+100, 2, 2); ellipse (x, y3+200, 2, 2); ellipse (x, y4+300, 2, 2); ellipse (x, y5+400, 2, 2); slagtilfælde (80); linje (0, 100, bredde, 100); linje (0, 200, bredde, 200); linje (0, 300, bredde, 300); linje (0, 400, bredde, 400); }

[/cceN_cpp]

Du kan betragte de ændrede parametre inden for funktionsstøj som en statuslinje. Skift parameter er som om vi flytter statuslinjen. Så når det ændrede omfang af dette "voice track" er større, vil de forreste og bageste kontinuerlige egenskaber ved outputværdien være svagere. (Vi kan forestille os, hvad der vil ske, hvis vi sender et stykke musik eller en video med 2 gange hastighed, 5 gange hastighed, 20 gange hastighed). Når omfanget er større end en bestemt værdi, så har det ingen stor forskel at fungere tilfældigt ved værdigenerering.

Hvis du kan forstå alle eksemplerne ovenfor, vil du føle, at intet kan være lettere at tegne en vandrende cirkel. Du kan også forstå de interne principper.

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

[/cceN_cpp]

Nu er bevægelsen mere interessant ligesom en roterende gyro.

• Grunden til, at variabel x inden for funktionsstøj skal være plus 100, er fordi for at adskille dem på en afstand. Hvis parametrene for xy inden for funktionsstøj er de samme eller ganske tæt, vil ændringen af x, y -koordinaten lukke til det samme. Dette er for at få bevægelsen til at blive meget mere tilfældigt.

Trin 14: Cirkel flyttet af mus

Dernæst kommer vi endelig til to variabler, jeg bedst kan lide: mouseX og mouseY. Ved første øjekast af de to forestillinger glitrer mine øjne af lys. Fordi det er den mest direkte måde at interagere med grafik. Vi kan lave masser af interessant program med det.

Sagen er ganske enkel:

[cceN_cpp theme = "dawn"] int x, y; ugyldig opsætning () {størrelse (300, 300); x = 0; y = 0; } void draw () {baggrund (234, 113, 107); noStroke (); x = musX; y = musY; ellipse (x, y, 50, 50); }

[/cceN_cpp]

mouseX kan erhverve x -koordinat for musen, mens mouseY kan opnå y -koordinat.

• Lad os prøve at ændre positivt og negativt symbol, eller bytte mouseX og mouseY.

Trin 15: Afslut

Fra disse velkendte kommandoer kan du muligvis udføre bevægelsen af grafik. Med indholdet i det sidste kapitel, brug din fantasi korrekt, du kan oprette en masse interessante animerede effekter.

I vores næste kapitel kan vi se flere rigelige eksempler. Samtidig vil vi bruge matematiske funktioner og kombinere det med grafisk bevægelse.

Denne artikel kommer fra designer Wenzy.

Trin 16: Relative aflæsninger:

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

Interessant programmeringsvejledning til designer-Opret dit første behandlingsprogram

Denne artikel er fra:

Hvis du har brug for hjælp, kan du kontakte: [email protected].