Intressant programmeringsvägledning för designer-få din bild att köras (del ett): 16 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:47

Springa! Springa! Springa!

Programmering är inte så svårt. Nyckelpunkten är att hitta din rytm och göra det en efter en.

Innan jag läser det här kapitlet hoppas jag att du redan har bekantat dig med den grundläggande funktionsteckningsmetoden, eller om du känner dig yr och förvirrad av två stora huvudfunktioner: installation och ritning.

Eftersom vi vill göra rörlig grafik måste vi veta hur animering produceras.

Bilden ovan verkar ganska attraktiv och visuellt visar implementeringsprincipen för animering.

Animation är magi. Det är en magi om visuellt fusk. Men i denna information exploderade, video översvämning ålder, har vi redan varit vana vid det. Få människor kommer att bli förvånade över att det är en fantastisk sak att kunna se animationen.

Samma princip kan tillämpas på ritningsanimering med program. Vi måste överväga hur vi ritar olika grafik i varje ram, och programmet vänder automatiskt på sidor medan vi kompletterar en färdig animering i huvudet. I det följande kapitlet kommer vi att prata om hur man förverkligar grundläggande grafisk rörelse. Innan det behöver vi känna till några grundläggande kunskaper om variabler.

Steg 1: Variabel

Variabel är behållaren för data. Det kan användas upprepade gånger inom ett program.

Till exempel:

[cceN_cpp tema = "gryning"] storlek (500, 500); ellips (100, 250, 50, 50); ellips (200, 250, 50, 50); ellips (300, 250, 50, 50); ellips (400, 250, 50, 50);

[/cceN_cpp]

Denna koddel har inte använt några variabler. Det ritar fyra cirklar på skärmen. Vi kan hitta att de har samma bredd och höjd. Nu när det är samma sak, för att minimera upprepad datainmatning, kan vi definiera ett tecken som representerar det. Detta tecken är variabelt.

Här är koden efter att ha lagt till en variabel:

[cceN_cpp theme = "gryning"] storlek (500, 500); int a = 50; ellips (100, 250, a, a); ellips (200, 250, a, a); ellips (300, 250, a, a); ellips (400, 250, a, a);

[/cceN_cpp]

Vi får ett helt samma resultat!

Eftersom vi har definierat variabel a kan vi enkelt ändra parametrar. Om vi ändrar a = 50 till a = 100 blir alla cirklars bredd och höjd 100 enhetligt. Så vi behöver inte ändra parametrar en efter en. Variabel är verkligen en bra uppfinning.

Steg 2: Skapandet av variabel

Innan vi använder variabel måste vi uttala oss och ange dess datatyp.

int i;

i ＝ 50;

Den första meningen i koden har gjort ett uttalande för en variabel i. int är en symbol som främst används för att deklarera variabel. När deklarerar kommer det att spara ett rum i datorns minne, vilket motsvarar att generera en "låda", speciellt används för att återställa heltalsdata. Den andra meningen står för att göra uppgift 50 som ska implementeras med variabel i. Efter implementeringen av denna mening lagras data stabilt i variabeln. Eller så kan du vara latare att kombinera ovanstående två meningar till ett och slutföra uppdraget samtidigt som du uttalar dig.

int i ＝ 50;

Det är relativt gratis att namnge en variabel. Men ibland måste vi vara uppmärksamma på något.

Steg 3: Namnge reglering av variabel

• Det måste vara kombinationen av alfabet och understrykning. Det kan vara en symbol eller ett ord.

• Skiftlägeskänsliga. Namn och namn kan stå för olika variabler.

• Försök att namnge det så enkelt som möjligt så att du kan förstå det vid en syn. Det initiala tecknet måste vara ett alfabet i stället för ett tal eller ett specialtecken.

• Inga nyckelord som int, float

Följande är några felaktiga påståenden.

int $ a;

int 89b;

Här är de korrekta påståendena:

int r;

int super_24;

int openTheDoor;

Steg 4: Variabel typ

Med undantag för att deklarera heltalsdata, kan vi deklarera för decimaldata (även kallad flytande punktdata) med nyckelordet float.

flyta b = 0,5

Vi måste komma ihåg vilken typ av datatyp vi använde för vårt uttalande. Om vi har använt nyckelord int, kan den senare uppgiften inte skriva i ＝ 0.5 eller något liknande, annars blir programmet fel. Men om vi skriver motsatt är det helt okej. Till exempel är float i = 5 rätt grammatik men programmet känner igen det som decimaltal.

Några av variablerna har redan definierats av systemet. Vi behöver inte deklarera dem själva. Precis som den tidigare refererade "bredd, höjd", kommer den automatiskt att förvärva bredden och höjden på datorskärmen. Så hög frekvens i användning att designern direkt definierar det som en standardvariabel för att göra det mer bekvämt för oss att använda.

Steg 5: Operatör

Följande är operatörer för bearbetning:

+ plus

- minus

* multiplicera

dela upp

％ Resterande modul

Du måste vara bekant med alla dessa operatörer utom %. Det verkar ganska konstigt eftersom resultatet är resten. 9%3 är 0. Medan 9%5 är 4.

Operatörer kan användas bland tilldelningar och variabler.

[cceN_cpp tema = "gryning"] int a = 1; // deklarera heltalsvariabel a, tilldelning är 1. int b = 2; // Deklarera heltalsvariabel b, tilldelning är 2. int c; // Deklarera heltalsvariabel c. c = a + b; // Plus två tilldelningar och tilldela resultatet till c. tryck (c); // Utgångsvariabel c.

[/cceN_cpp]

Steg 6: Driftsresultat:

Utgångsresultatet visas inte i fönstret utan i konsolen längst ner.

Skrivmetoden för den fjärde raden ser ganska märklig ut. Men det är ett vanligt format som ofta används under datortilldelning. Den vänstra sidan av lika symbol bör vara den sista tilldelade variabeln, medan den högra sidan ska vara driftsprocessen.

Utskriftsfunktionen på den femte raden kan skriva ut variabler i konsolen, som ofta används för att testa tillståndet för datautmatning.

Steg 7: Driftreglering

En besvärlig punkt i Processing är att vi måste klargöra variabelns typ. Vi måste ägna särskild uppmärksamhet åt processen med flyttal och heltalstyp.

tryck （6 /5）; // resultat 1

Drift mellan heltal får ett nytt heltal. 6 dividerat med 5 är 1,2. Men resultatet från programmet är 1. Detta strider mot vår intuition. Programmet kommer inte att behandla runda utan radera talet bakom decimalpunkten.

tryck (6.0 / 5.0); // resultat 1.2

Drift mellan flytpunkter kommer att resultera i ett nytt flyttal nummer. Om det faktiska resultatet är 1,2 blir programmets utgångsresultat detsamma.

tryck (6 / 5.0); // resultat 1.2

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

Slutligen är det blandningen av heltal och flyttal. Slutresultatet blir 1,2.

• Egentligen måste du komma ihåg att målet med denna förordningsdesign är att inte tappa riktigheten av data. Så om ett element är ett flyttal, blir resultatet också flytnummer.

Steg 8: Inställningsfunktion och ritfunktion

Tidigare har vi pratat en bunt med grundkunskap. Nu kommer vi äntligen för att spela något intressant. Funktionsinställning och ritning motsvarar bearbetningens huvudfunktioner. Dessa två funktioner är mycket speciella. Det kan styra programmets procedur. Jämförligt komplicerat program kommer att innehålla dessa två funktioner eftersom de är grundramen för programmet. Formatera:

void setup () {

}

void draw () {

}

Den speciella användningen gör att deras påkallningsformat skiljer sig från de andra funktionerna. Vi måste lägga till "void" före funktionsnamnet, vilket står för inget "returnerat värde". Bakom funktionsnamnet måste vi lägga till parenteser och hängslen.

[cceN_cpp theme = "dawn"] void setup () {print (1); } void draw () {print (2); } [/cceN_cpp]

Låt oss ta ett exempel:

När du trycker på manöverknappen kommer konsolen först att mata ut "1" och sedan konstant "2" tills du har tryckt ned stoppknappen eller stängt fönstret.

Koden inom parentes i installationsfunktionen kommer att implementeras endast en gång. Medan kod inom funktionsdragningen ständigt körs i cirkulation (standardimplementering 60 gånger/sekund).

På grund av detta tecken används vanligtvis installationen för att initiera miljöegenskaper, till exempel skärmens bredd och höjd, bakgrundsfärg och alla typer av variabeltilldelning. Medan vi ofta placerar ritfunktioner i funktionsteckning för att generera kontinuerligt förändrad grafik.

Steg 9: Cirkel i horisontell rörelse

Med funktionsdrag kan vi börja skapa våra animationer. Metoden att skriva animeringseffekt genom Processing är ganska "besvärlig". Det har inget befintligt kommando. Till exempel, utse en viss form för att göra krökt.

Vi måste definiera dessa detaljer själva. Du måste berätta för programmet vilken typ av grafik varje ram behöver definitivt.

Skriv in följande kod i den (låt oss nu börja göra det för hand):

[cceN_cpp theme = "dawn"] int x; int y; void setup () {size (300, 300); x = 0; y = höjd/2; } void draw () {bakgrund (234, 113, 107); noStroke (); ellips (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Detta avsnitt av kod visar en rörelsecirkel. Den tidigare deklarerade variabeln x, y används för att lagra koordinatpositionen. Dess tilldelningar körs i funktionsinställningar. Nyckelkoden är följande inom funktionsteckning:

x = x + 1

Se det inte som en matematisk ekvation, annars blir det väldigt konstigt. Här är "＝" en symbol för tilldelning. Det representerar att placera de rätta siffrorna i den vänstra variabeln. Antag att x är 50, när koden körs, är höger sida av "＝" lika med 50+1, dvs 51. Slutresultatet kommer att tilldelas variabel x. Så värdet på x blir 51.

Följ proceduren för programmet, varje gång funktionen draw fungerar för en gångs skull, kommer x -värdet att öka 1. Så varje gång vi ritar kommer cirkeln att flytta en pixelriktning horisontellt till höger, jämfört med den tidigare ramen. Därför blir grafiken rörlig.

• För att koden ska bli bättre läsbar måste vi spara ett visst rum innan varje kodrad inom hängslen. Och det ska vara så inriktat som möjligt. Tryck på TAB eller flera blanksteg, det kan dra tillbaka.

• Symbolen för tomt utrymme och radbrytning i programmet påverkar inte programmet. Så det är ok om vi skriver en mer eller mindre.

Här är ett annat enklare sätt att uttrycka det. För att variabel cirkel ska öka 1 automatiskt måste vi skriva den för att vara följande format.

cirkel ＝ cirkel ＋1

Ganska obekvämt! Om variabelns namn är längre måste vi skriva fler ord. Så våra lata föregångare tänker ut en idé som denna.

cirkel ＋＋

Är det inte väldigt enkelt? Det innebär att man ökar 1 automatiskt. I likhet med det finns det - - vilket innebär att du minskar 1 automatiskt.

Men om vi hoppas att mängden automatisk ökning är ett annat tal som 2, måste vi pröva ett annat uttryck.

cirkel += 2

Detta är lika med

cirkel = cirkel + 2

På samma sätt finns det - ＝, /=, *=.

Steg 10: Rörelseriktning

Vilken riktning grafiken rör sig beror på hur du ändrar din koordinat. Om den ändras till y ＝ y ＋ 1 flyttas cirkeln nedåt. Om både x och y ökar 1, flyttas cirkeln nedåt till höger. Om vi skriver att det är en minussymbol kommer den att röra sig i motsatt riktning.

[cceN_cpp theme = "dawn"] int x, y; // Kan deklarera flera variabler samtidigt, använd kommatecken för att separera. void setup () {size (300, 300); x = 0; y = 0; } void draw () {bakgrund (234, 113, 107); noStroke (); ellips (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Rörelsehastighet

Kommer du ihåg standard 60 bilder per sekund inom funktionsdrag? Enligt denna hastighet kommer cirkeln ovan att flytta 60 pixlar per sekund till höger.

Om vi vill ändra den grafiska rörelseshastigheten finns det två metoder: en är att öka x -värdet varje gång sedan det kommer att ändras.

x ＝ x ＋ 10

Det har förbättrat hastigheten 10 gånger jämfört med den ursprungliga!

Den andra metoden är att ändra frekvensen för att uppdatera duken. frameRate ()

Denna funktion kan ändra kanfas sändningsfrekvens. Skriv frameRate (10) i funktionsinställningen, det kommer att ändra de ursprungliga 60 bildrutor per sekund till 10 bilder per sekund. Hastigheten sänks 6 gånger än tidigare.

Steg 11: Översatt bakgrund

Alla föregående exempel skriver bakgrund i funktionsdrag. Har du någonsin tänkt skriva det till funktionsinställningar? Kommer det att ha några skillnader? Låt oss nu uppdatera exemplet på horisontell rörelse.

[cceN_cpp theme = "dawn"] int x, y; void setup () {size (300, 300); bakgrund (234, 113, 107); x = 0; y = höjd/2; } void draw () {noStroke (); ellips (x, y, 50, 50); x += 1; } [/cceN_cpp]

Vad har hänt? Kanske kan den inte förstå orsaken till att problemet uppstår korrekt. Radera funktion noStroke, lägg till stroke igen och se cirkelns rörelsebana.

Åh, det är på grund av att den tidigare skapade cirkeln inte har tagits bort! Eftersom funktionsinställningen fungerar bara en gång, om vi skriver bakgrund ovanför den, kommer den att fylla bakgrunden bara en gång och senare kommer den inte att ha någon effekt längre. Funktionsbakgrund är som verktyg för färgskopor. När den väl används täcker den allt innehåll i duken istället för att bara ställa in en bakgrundsfärg. Vi skriver det innan funktionsteckning så att den tidigare ramen kommer att täckas varje gång vi skapar ett nytt mönster. Därför kan cirkeln gå som vi förväntade oss. Förutom att komma ihåg användningen av varje funktion måste vi tänka på kodens position. Mycket tid, uppåt eller nedåt linjen för codea och för att skriva den inom eller utanför en hängslen, kommer det att skapa ganska olika effekter. Kodens riktning är tvådimensionell. Om ett fel uppstår måste vi kalibrera i denna två dimension.

• Denna inte upprepade ritmetod kan skapa en mycket speciell effekt om den används korrekt. Du kan kopiera följande kod och prova.

[cceN_cpp theme = "dawn"] void setup () {size (400, 400); } void draw () {ellipse (width/2-mouseX, height/2-mouseX, mouseY, mouseY); ellips (bredd/2-mouseX, höjd/2+mouseX, mouseY, mouseY); ellips (bredd/2+mouseX, höjd/2-mouseX, mouseY, mouseY); ellips (bredd/2+mouseX, höjd/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

Här har vi använt den magiska variabeln mouseX och mouseY. Senare kommer vi att prata om det i detalj.

Steg 12: Skakningscirkel

Vad händer om jag vill få cirkelrörelseriktningen att bli oregelbunden? Med funktion slumpmässigt smart kan du också inse denna effekt. Slumpmässig är en funktion som ofta används. Den kan användas för att generera slumpmässig funktion. Det är som en spårlös anda. När det väl är relaterat till variabler kan du inte föreställa dig vad som kommer att bli nästa.

Åkalla format:

slumpmässig (hög)

Hög representerar den slumpmässiga övre gränsen, och standardgränsen för botten är 0. Till exempel slumpmässig (10). Det kommer att producera ett tal från 0 till 10 slumpmässigt (0 ingår men 10 ingår inte).

slumpmässig (låg, hög)

Om vi ställer in två parametrar, kommer det att återgå till slumpmässigt värde mellan dem. Till exempel slumpmässigt (5, 10). Det kommer att producera ett tal från 5 till 10 slumpmässigt (5 ingår men 10 ingår inte).

Exempel:

[cceN_cpp theme = "gryning"] float x;

x = slumpmässig (50, 100);

tryck (x); [/cceN_cpp]

Varje gång vi kör programmet kommer konsolen att mata ut olika värden.

• Obs! Värden som skapas av funktion slumpmässigt tillhör flytande punkttyp (decimaltalstyp). Om vi vill tilldela ett värde till heltalsvariabeln måste vi transformera det genom funktion int (). Transformationen följer inte rundan utan tar bort decimaldelen direkt. Således har utmatningen av int (random (5)) bara 5 möjligheter: 0, 1, 2, 3, 4.

När vi har lärt känna användningen av funktion slumpmässigt kan vi komma direkt in i fallet nedan.

[cceN_cpp theme = "dawn"] int x, y; void setup () {size (300, 300); x = bredd/2; y = höjd/2; } void draw () {bakgrund (234, 113, 107); noStroke (); x += int (slumpmässigt (-5, 5)); y += int (slumpmässigt (-5, 5)); ellips (x, y, 50, 50); }

[/cceN_cpp]

De tidigare tillagda koordinatvärdena är fasta. Endast om vi ökar ett slumpmässigt värde rör sig cirkeln i obestämd riktning. Med det större slumpmässiga intervallet skakar det oftare. Eftersom värdeförändringen mellan ramarna studsas kommer rörelsen inte att vara jämn längre. Medan den tidigare ramen är på (150, 150), kommer den senare ramen att flytta till positionen (170, 170) inom en glimt.

Steg 13: Migrationscirkel

Migrationscirkel

Kommer det att skapa smidig rörelse? Funktionsbrus kan hjälpa oss. Den har bättre rytm än standard slumpmässig. Och slumpmässigt genererade slumpmässiga nummer är kontinuerligt.

Åkalla format:

buller （t）

Funktionsbrus kan inte definiera dess utgångsområde. Programmet definierar att det bara kan generera flyttal från 0 till 1 och fast inmatning kan bara ha fast utgång.

[cceN_cpp theme = "dawn"] float x = noise (5); float y = brus (5); tryck (x, y); [/cceN_cpp]

Eftersom ovanstående inmatningsparametrar är 5, så är utgångsresultaten desamma. Hur ändrar jag sedan resultatet? Svaret är att ändra inmatningsparametrarna dynamiskt. Egentligen kan vi betrakta brus som ett gränslöst röstspår, inmatningsparametrarna är precis som "nuvarande tid". Om parameterinmatningen är kontinuerlig kommer utmatningen också att vara kontinuerlig.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (700, 100); x = 0; bakgrund (0); } void draw () {x += 1; y = brus (frameCount/100,0)*100; noStroke (); ellips (x, y, 2, 2); }

[/cceN_cpp]

I det här fallet ritar vi förändringsbanan för Y så att vi kan förstå funktionsbrus bättre.

• Bland annat kommer variabel frameCount att få den nuvarande ramen. Till skillnad från bredden, höjden i föregående, är den stabil utan förändring. Dessutom börjar det öka från 0. Om vi förstår det med vår första visade animerade grafik, visar det sidan vi har vänt till (snarare till tidsuppfattningen i programmet).

• frameCount är en heltalsvariabel. Uppdelat med en annan heltalsvariabel kommer programmet som standard att bearbeta resultatet som ett heltal. För att förbättra resultatets noggrannhet måste vi ändra 100 till 100,0. Dividerat med ett flyttal, får vi också ett flyttal.

• För att ändra Y -axeln från 0 till 100 måste vi multiplicera resultatet av brus med 100. Således kan vi styra slumpmässigt värdeintervall.

Några av er som är bra på att tänka kanske frågar "varför vi måste dela frameCountby 100? Är det inte ok att skriva frameCount direkt?" Såklart du kan! Men här, för att bättre visa egenskaperna hos funktionsbrus, saktar vi ner "sändningshastigheten". Exemplet nedan visar förändringar i utgångsvärdet under olika förändringshastigheter.

[cceN_cpp tema = "gryning"] float x, y1, y2, y3, y4, y5; void setup () {size (700, 500); x = 0; bakgrund (0); } void draw () {x += 1; y1 = brus (frameCount)*100; y2 = brus (frameCount/10,0)*100; y3 = brus (frameCount/100,0)*100; y4 = brus (frameCount/1000.0)*100; y5 = brus (frameCount/10000.0)*100; noStroke (); ellips (x, y1, 2, 2); ellips (x, y2+100, 2, 2); ellips (x, y3+200, 2, 2); ellips (x, y4+300, 2, 2); ellips (x, y5+400, 2, 2); stroke (80); linje (0, 100, bredd, 100); linje (0, 200, bredd, 200); linje (0, 300, bredd, 300); linje (0, 400, bredd, 400); }

[/cceN_cpp]

Du kan betrakta de ändrade parametrarna inom funktionsbrus som en förloppsindikator. Ändra parametern är som om vi flyttar framstegsfältet. Så när det förändrade omfånget för detta "röstspår" är större, kommer fram- och baksidans kontinuerliga egenskaper hos utgångsvärdet att vara svagare. (Vi kan tänka oss vad som kommer att hända om vi sänder ett musikstycke eller en video med 2 gånger hastighet, 5 gånger hastighet, 20 gånger hastighet). När omfattningen är större än ett visst värde, har det ingen stor skillnad att fungera slumpmässigt vid värdegenerering.

Om du kan förstå alla exempel ovan, kommer du att känna att ingenting kan vara enklare att rita en migrerande cirkel. Du kan också förstå de interna principerna.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (300, 300); x = 0; } void draw () {bakgrund (234, 113, 107); x = brus (frameCount/100,0 + 100)*300; y = brus (frameCount/100,0)*300; noStroke (); ellips (x, y, 50, 50); }

[/cceN_cpp]

Nu är rörelsen mer intressant precis som en roterande gyro.

• Anledningen till att variabel x inom funktionsbrus måste vara plus 100 beror på att för att skilja dem på ett avstånd. Om parametrarna för xy inom funktionsbrus är desamma eller ganska nära, kommer ändringen av x, y -koordinaten att stänga till densamma. Detta för att få rörelsen att bli mycket mer slumpmässigt.

Steg 14: Cirkel flyttad av mus

Därefter kommer vi äntligen till två variabler jag gillar mest: mouseX och mouseY. Vid första ögonkastet av de två föreställningarna glittrar mina ögon av ljus. För det är det mest direkta sättet att interagera med grafik. Vi kan skapa massor av intressanta program med det.

Fallet är ganska enkelt:

[cceN_cpp theme = "dawn"] int x, y; void setup () {size (300, 300); x = 0; y = 0; } void draw () {bakgrund (234, 113, 107); noStroke (); x = musX; y = musY; ellips (x, y, 50, 50); }

[/cceN_cpp]

mouseX kan förvärva x -koordinat för musen, medan mouseY kan få y -koordinat.

• Låt oss försöka ändra positiv och negativ symbol, eller byta mouseX och mouseY.

Steg 15: Avsluta

Från dessa välkända kommandon kanske du kan utföra rörelsen av grafik. Med innehållet i det sista kapitlet, använd din fantasi på rätt sätt, du kan skapa många intressanta animerade effekter.

I vårt nästa kapitel kan vi se fler rikliga exempel. Samtidigt kommer vi att använda matematiska funktioner och kombinera det med grafisk rörelse.

Denna artikel kommer från designern Wenzy.

Steg 16: Relativa avläsningar:

Intressant programmeringsvägledning för designer-bearbetning av inledande beröring

Intressant programmeringsvägledning för Designer-Skapa ditt första bearbetningsprogram

Denna artikel är från:

Om du behöver hjälp kan du kontakta: [email protected].