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

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

Matematik, för de flesta av er, verkar värdelöst. Det vanligaste i vårt dagliga liv är bara att lägga till, subtrahera, multiplicera och dela. Det är dock ganska annorlunda om du kan skapa med program. Ju mer du vet, desto mer underbart resultat får du.

Steg 1: Rörelse och funktion

Låt mig visa dig flera okända bilder för att stimulera din smak.

Vad är det här? Nu är det bara att behålla denna fråga först och senare kommer du att känna till och använda den.

I det sista kapitlet har vi lärt oss funktionsinställning och funktionsritning, vilket kan få den statiska grafiken att bli dynamisk. Detta rörelseformat är dock alldeles för enkelt. Vi kommer att använda funktionskunskap vi behärskade tidigare för att köra vår grafik med sin egen karaktär.

Hur många funktioner kan du känna igen från ovanstående bilder? Vad har de för relation till rörelse? Låt oss nu plocka upp en kvadratisk funktion från den, lägg till några parametrar slumpmässigt och se vad som kommer att hända. Till exempel y = x² / 100.

Så här ser funktionsbilden ut. Kopiera koden nedan.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (300, 300); bakgrund (0); x = 0; } void draw () {stroke (255); strokeWeight (2); y = pow (x, 2) / 100,0; // Funktionen pow återgår till den n: e kraften i beteckningsnumret. (x, 2) representerar kvadraten av x. Den första parametern är basnumret och den andra är indexet. punkt (x, y); x ++; } [/cceN_cpp]

Löpande effekt

Välj sedan funktion synd. Formel: y = 150 + sin (x).

Kopiera följande kod.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (300, 300); bakgrund (0); x = 0; } void draw () {y = höjd/2 + sin (radianer (x)) * 150; // Funktionsradian transformerar x till vinkel. x ++; stroke (255); strokeWeight (2); punkt (x, y); } [/cceN_cpp]

Löpande effekt

Detta är grafiken vi får efter att ha använt koden. Och det är deras rörelsesspår. Jämfört med den förra är resultatet uppenbart. Funktionsbilden motsvarar faktiskt rörelsesspåret! Det är ganska enkelt. Du måste bara ersätta värdet av x, y till koordinat. Det tidigare spåret vi ritade motsvarar grafiken för funktion y = x² / 100. Medan det senare spåret är lika med grafiken för funktionen y = 150 + sin (x). Men i programmet är riktningen på y -axeln motsatt. Så, jämfört med originalgrafiken, kommer spåret att vara upp och ner. Nu antar jag att du måste ha en känsla av att några svåra frågor som har hemsökt i ditt huvud länge löses omedelbart. Det är fantastiskt att dessa fantastiska funktioner vi lärt oss tidigare kan användas för att styra grafisk rörelse!

Steg 2: Att skriva funktion

Jag har listat flera vanliga funktioner nedan. Hoppas att dessa kan hjälpa oss att översätta funktioner till kod som kan kännas igen av en dator.

Därför ska formeln nedan i programmet skrivas så här:

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 också slumpmässigt skriva in en funktion i ett program och se hur dess rörelsesspår kommer att se ut. Kom ihåg att överväga intervallet av värdefält och definitionsdomän, annars tar din grafik slut på skärmen.

Trigonometrisk funktion

Låt oss nu gå vidare för att känna till några skrifter av trigonometriska funktioner.

Vi måste vara uppmärksamma på att ingången av funktionsparametern i förhållande till vinkeln antar radian i programmet. Således ska sin90 ° skrivas in i synd (PI ／ 2). Om du inte är bekant med denna metod kan du använda funktionen randians för att förvandla vinkel till radian i förväg och sedan skriva sin （radianer (90)).

Användningen av funktionsgrader är jämförelsevis motsatt. Det kan förvandla radian till vinkel. Mata in utskrift (grader (PI/2)) direkt i redigeringsområdet och se vad du får.

Steg 3: Styr grafisk rörelse med trigonometrisk funktion

Här är ett fall för dig att se den verkliga effekten av grafisk rörelse.

[cceN_cpp theme = "dawn"] float x, y; void setup () {size (700, 300); } void draw () {bakgrund (234, 113, 107); y = sin (radianer (x)) * 150 + 150; x ++; noStroke (); ellips (x, y, 50, 50); } [/cceN_cpp]

Funktionssynd är en periodisk funktion. Dess minimivärde är －1 och maximivärdet är 1. Skärmens höjd är 300. Hänvisas till y = sin (radianer (x)) * 150 + 150, därför ändras intervallet för värdet y väl kontrollerat inom 0 till 300.

Snurrande cirkel

Tja, vi har äntligen kommit in på den mest viktiga delen i detta kapitel. Hur man ritar en cirkelbana i ett program? Hur använder man funktioner för att visa den? Låt mig visa dig de två bilderna som vi såg i början av denna artikel igen.

Egentligen har de visuellt avslöjat förhållandet mellan omkretskoordinat och trigonometrisk funktion. Rörelsen i bilderna ovan drivs av den ständigt ökande oberoende variabeln θ. Vänster är bilden av funktionen sin och cos, och den högra står för en punkt som gör cirkulär rörelse efter att ha kartlagts. Är det inte väldigt smart? Det är inte mystiskt längre. Du kan använda koden för att inse det.

Ett enkelt exempel:

[cceN_cpp tema = "gryning"] float x, y, r, R, vinkel; void setup () {size (300, 300); r = 20; // Cirkeldiameter R = 100; // Rörelsens radie x = 0; vinkel = 0; y = höjd/2; } void draw () {bakgrund (234, 113, 107); translate (bredd/2, höjd/2); // Flytta den ursprungliga punkten till skärmens mitt. noStroke (); x = R * cos (vinkel); y = R * sin (vinkel); ellips (x, y, r, r); vinkel += 0,05; } [/cceN_cpp]

Se! En snurrande cirkel dyker upp! Här är den oberoende variabeln inte mer i konstant ökning bit blir vinkel (motsvarar θ i bilden). Det är stå för vinkel. Bland dem har xy relativt multiplicerad koefficient R, vilket leder till förlängningen av cirkelrörelsens radie (R är för radie). Om den inte ska multiplicera R kommer dess rörelsebana att vara begränsad inom intervallet från -1 till 1.

Varför inte använda det ökande x? Enligt egenskapen för själva funktionen har alla x inom definitionsdomänen det enda y som matchar den. Så i plan rektangulärt mått koordinatsystem kan du inte ta reda på en "enkel funktion" för att rita cirkel direkt. Det vill säga att vi inte kan använda det här formatet längre.

y = (Det okända uttrycket för x?);

x ＋＋;

Så vi måste ändra vår idé. Välj en annan vinkel som oberoende variabel och använd sedan funktionen sin och cos för att omvandla den till horisontell och vertikal koordinat.

x = R * cos (vinkel);

y = R * sin (vinkel);

vinkel += 0,05;

Några av er kanske undrar varför det kan visa cirkelrörelsens väg. Enligt definitionen av trigonometrisk funktion kan vi enkelt resonera ut att funktionen syndar förhållandet mellan motsatt sida och hypotenusan; funktion cos är förhållandet mellan intill hypotenusan. Oavsett var cirkelpunkten är kommer r (radie) att förbli oförändrad. Därför kan vi avsluta uttrycket x -koordinat och y -koordinat.

Eftersom detta inte är en matematisk vägledning, här ska jag sluta visa mer kunskap om trigonometrisk funktion för dig. Om du vill veta det eller bara glömmer det kan du försöka granska det igen själv.

Naturligtvis är det okej om du inte helt kan förstå det. Du behöver bara veta hur du använder den för att rita en cirkel. Detta är också en slags "programmeringsidé". Senare kommer vi ofta att anropa några av de existerande modulerna som andra har gjort för att förverkliga en viss typ av funktion. Tvinga dig inte till att veta det i detalj.

Funktionen synd och cos är dock vanligt. Om du vill skapa högre nivå, är det bättre att försöka känna till det noggrant. Om denna fråga i sig kan driva oss till att lära sig mer matematisk kunskap, väntar det mer intressanta saker på dig att gräva ut.

Dessa är bilder nära släkt med trigonometrisk funktion.

Steg 4: Rörelsekoordinatsystem

De tidigare effekterna handlar om grafiska koordinatförändringar. Själva koordinatsystemet är statiskt. Egentligen kan vi göra koordinaten för att uppnå rörelseeffekt. Det här är precis som människorna på stranden tittar på de andra människorna i båten. För personer på båten är båten statisk. Men tänk om båten själv rör sig, då rör sig människor i båten med den. De tidigare fallen handlar om”människor som springer på båten”. Båten rör sig faktiskt inte. Följande är några vanliga funktioner för att byta koordinatsystem.

Översätt funktion

Funktionsöversättning, som vi har pratat om tidigare, används för att flytta koordinatsystemet för grafiken horisontellt.

Åkalla format:

översätta (a, b)

Den första parametern står för flyttning till x -axelns positiva riktning för pixlar. Den andra parametern står för flyttning till y -axelns positiva riktning för b -pixlar.

Jämför de två koden och försök hitta någon skillnad. (För att förenkla koden kan vi radera funktionsstorlek, skärmbredd och höjd är som standard 100.)

Innan vi använder:

ellips (0, 0, 20, 20);

Efter att vi har använt:

translate (50, 50);

ellips (0, 0, 20, 20);

Funktion rotera

Åkalla format:

rotera (a)

Det används för att rotera koordinatsystem. När parametern är positiv väljer den originalpunkten som mittpunkt och roterar medurs. Parameteringången är densamma med trigonometrisk funktion för att använda radian.

Innan användning:

ellips (50, 50, 20, 20);

Efter användning:

rotera (radianer (30));

ellips (50, 50, 20, 20);

Effekt i programmet är att få cirkeln att rotera runt koordinatens mittpunkt medurs i 30 grader.

Funktionsskala

Åkalla format:

skala (a)

Denna funktion kan zooma ut koordinatsystemet. Värdet är för skalning. När parametern är över 1, zooma sedan in; om det är lägre än 1, zooma ut.

Innan användning:

ellips (0, 0, 20, 20);

Efter användning:

skala (4);

ellips (0, 0, 20, 20);

Cirkeln i bilden ovan förstärks till fyra gånger originalstorleken. Du kan också använda två parametrar för att zooma ut i x -axel och y -axelriktning separat.

skala (4, 2);

ellips (0, 0, 20, 20);

Superposition av transformationsfunktionen

Här handlar superposition om förändringar i förhållande till det nuvarande koordinatsystemet. Med andra ord kan effekter överlagras.

translate (40, 10);

translate (10, 40);

ellips (0, 0, 20, 20);

Dess slutliga effekt kommer att vara lika med

translate (50, 50);

ellips (0, 0, 20, 20);

Samma för funktionsrotation

rotera (radianer (10));

rotera (radianer (20));

ellips (50, 50, 20, 20);

Lika med

rotera (radianer (30));

ellips (50, 50, 20, 20);

Både funktionsskalan och rotera centrum på den ursprungliga punkten för att skala och rotera. Om vi vill få roterande effekt med en central position vid (50, 50) måste vi tänka på motsatt sätt. Flytta först den ursprungliga punkten till positionen (50, 50), lägg sedan till den roterande transformationsfunktionen. Slutligen gör din grafik målad på den ursprungliga punkten.

Innan användning:

ellips (50, 50, 50, 20);

Efter användning:

translate (50, 50);

rotera (radianer (45));

ellips (0, 0, 50, 20); // För att se rotationsvinkeländringen har vi gjort en oval.

Det kan verka vridande. Du måste bara öva mer då förstår du det. (Du kan också försöka ändra funktionens översättning och rotera för att se skillnaden.)

Horisontell rörelse och cirkulär rörelse

I följande fall kommer vi att inse rörelseeffekt genom att ändra koordinatsystem. Samtidigt vill jag be dig hänvisa till det tidigare kapitlet. För det mesta hittar du för att uppnå en viss typ av effekt, du kan använda en helt annan metod.

Steg 5: Horisontell rörelse

[cceN_cpp theme = "gryning"]

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

Cirkelkoordinaten ändras inte men dess koordinatsystem ändras.

Rotera rörelse

[cceN_cpp theme = "gryning"] float r, R, vinkel; void setup () {size (300, 300); r = 20; // Cirkeldimension R = 100; // Rörelsens radie} void draw () {bakgrund (234, 113, 107); translate (bredd/2, höjd/2); // Flytta den ursprungliga punkten till skärmens mitt. rotera (vinkel); noStroke (); ellips (0, R, r, r); vinkel += 0,05; } [/cceN_cpp]

Är det inte mycket tydligare och enklare än trigonometrisk funktion? Du kanske har en fråga här. Ta roterande kod som ett exempel. Uppenbarligen är den ovan nämnda transformeringsfunktionen relativ och tillåter överlagring. Om vi skriver translate (bredd/2, höjd/2) till funktionsteckning, betyder det inte att varje gång funktionsteckning fungerar för en gång, kommer koordinatsystemet att flytta ett avstånd i rätt bottenriktning från den ursprungliga basen? Rimligen kommer den inte att stanna i mitten av skärmen för alltid.

Du kan förstå på det här sättet. När koden i funktionsteckning har slutfört en operation från upp till botten kommer koordinatsystemet att återgå till initial status vid den andra operationen. Den ursprungliga punkten för koordinatsystemet kommer som standard att återgå till det övre vänstra hörnet. Så om vi vill få koordinatsystemet att förändras kontinuerligt, ska vinkelparametrarna inom funktionen rotera ständigt öka dess värde.

Åtkomstkoordinatstatus

Ibland vill vi inte att ändringen av koordinatsystemstatus är baserad på den tidigare. För närvarande måste vi använda funktionen pushMatrix och popMatrix. De två funktionerna visas vanligtvis i par. Funktionen pushMatrix är före popMatrix. De kan inte användas enbart, annars går det fel.

Exempel:

[cceN_cpp tema = "gryning"] pushMatrix (); // Store koordinatsystemstatus translate (50, 50); ellips (0, 0, 20, 20); popMatrix (); // Läs koordinatsystemets status rakt (0, 0, 20, 20); [/cceN_cpp]

I detta exempel, innan vi använder translate (50, 50), använder vi funktionen pushMatrix.to lagra den aktuella statusen för koordinatsystemet. Detta är samtidigt den ursprungliga statusen. När vi har ritat en cirkel och implementerat popMatrix kommer den tillbaka till denna status. För närvarande, implementera funktionen rect, kommer du att upptäcka att den inte har påverkats av funktionen translate istället drar den en ruta i det övre vänstra hörnet av den ursprungliga punkten.

Dessutom tillåter funktion pushMatrix och popMatrix häckning.

Till exempel

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

För att visa sin relation intuitivt väljer vi kondensformat.

Kombinerad rörelse eller rörelse i rörelse?

Nu startar den andra vågen av viktig del. Försök bara driva framåt. Tidigare har vi använt en metafor om båt och människor. Har du någonsin tänkt på vad om vi får både människorna och båten att röra sig, vilken känsla människorna på stranden kommer att ha?

Som att kombinera horisontell rörelse med roterande rörelse i koordinatsystemet. Poängen här är faktiskt att bara röra sig i en riktning.

[cceN_cpp theme = "dawn"] int x, y; flytvinkel; void setup () {size (300, 300); bakgrund (234, 113, 107); noStroke (); x = 0; // När det initiala värdet på x är 0 kan vi försumma denna kodsats. Vid deklaration av variabel är standardvärdet 0. y = 0; // Samma som ovan. vinkel = 0; // Samma som ovan. } void draw () {vinkel += 0,25; y--; translate (bredd/2, höjd/2); pushMatrix (); rotera (vinkel); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Och det finns cirkulär rörelse och koordinatsystemskalning.

[cceN_cpp theme = "gryning"] float x, y, vinkel; void setup () {size (300, 300); bakgrund (234, 113, 107); noStroke (); } void draw () {vinkel += 0,01; x = sin (vinkel) * 100; y = cos (vinkel) * 100; translate (bredd / 2, höjd / 2); pushMatrix (); skala (1 + 0,1 * sin (vinkel * 10)); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Låt dig inte luras av det! Cirkelpunkten gör faktiskt cirkulära rörelser. Det är inte svårt att förstå om vi jämför det med skalning med en videokamera. En videokamera som hela tiden rör sig framåt eller bakåt skjuter en punkt i cirkulär rörelse.

Överraskad? Dessa är enkla grundläggande funktioner. Men med olika kombinationer kan vi skapa så många olika effekter. Hittills stannar min exponering för att spara utrymme för din utforskning.

Steg 6: Omfattande användning

Det börjar snart ta slut för detta kapitel. De två sista kapitlen har jag introducerat den grundläggande metoden för grafisk rörelse. Jag tror att du kan ha en djupare förståelse för det, jämfört med dina första idéer. Sist minst, här är några färdiga exempel för din referens.

[cceN_cpp theme = "gryning"] float x1, y1, x2, y2, r, R; flottörvinkel1, vinkel2; void setup () {size (300, 300); r = 12; R = 120; vinkel1 = 0; vinkel2 = PI/4; } void draw () {bakgrund (234, 113, 107); noStroke (); translate (bredd / 2, höjd / 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); ellips (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); ellips (x2, -y2, r, r); ellips (-x1, y1, r/2, r/2); ellips (-x2, y2, r, r); stroke (255); strokeWeight (3); rad (x1, y1, x2, y2); linje (-x1, -y1, -x2, -y2); rad (x1, -y1, x2, -y2); linje (-x1, y1, -x2, y2); } [/cceN_cpp]

Detta exempel innehåller ingen kunskap utöver vårt föregående kapitel.

För vilka poäng matchar? Vilka rader matchar? Jag kan inte heller räkna ut det. Men jag kommer ihåg att det härrör från en liten koddel.

Detta är karaktären av dess rörelse. Restlinjerna är bara spegeleffekt. Om du fortsätter att följa denna vägledning kan du göra en uppdaterad version och lägga till en kontroller till din grafik för att ändra din grafiska rörelsestatus i realtid.

Den intressanta punkten med programmering ligger i att du kan designa eller kombinera regler. Men vad det slutliga programmet blir beror helt på din förmåga. Vanligtvis har designers kraftfull grafisk fantasi. Du kan skissa en bild i ditt huvud och sedan försöka översätta den till kod. Du kan också utgå från själva koden och förordningarna, designfunktioner och variabler efter behag. Kom ihåg att bearbetning är din skiss och koden är dina penslar! Spraya bara dina idéer fritt!

Steg 7: SLUT

Senast i vårt kapitel, låt oss återvända till en fråga som vi bevarat länge sedan början. Vad är användningen av att spendera så mycket ansträngning för att göra en bild med programmet? När du har lärt dig det här kapitlet kommer du att upptäcka att det finns så många spelmetoder som väntar på att du ska utforska.

[cceN_cpp theme = "gryning"] float browX, earD, eyeD, faceD; void setup () {size (500, 500); } void draw () {bakgrund (200, 0, 0); pannaX = 150 + sin (frameCount / 30.0) *20; earD = 180 + sin (frameCount / 10,0) *20; eyeD = 60 + sin (frameCount/30.0) *50; ansikte D = 300; strokeWeight (8); ellips (175, 220, earD, earD); ellips (bredd - 175, 220, earD, earD); rect (100, 100, faceD, faceD); linje (browX, 160, 220, 240); linje (bredd-brynX, 160, bredd-220, 240); fill (random (255), random (255), random (255)); ellips (175, 220, eyeD, eyeD); ellips (bredd-175, 220, eyeD, eyeD); fyllning (255); punkt (bredd/2, höjd/2); triangel (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, bredd - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Är det inte magiskt för dynamisk grafik? Här visar jag dig inte för mycket fall. Du kanske kan designa en mycket bättre effekt än jag. Fördelen med att rita med program finns att du kan spela med varje pixel. Eftersom din grafik inte är bitmapp är varje nyckelpunkt på din grafik kontrollerbar. Det kan inse några effekter som annan programvara inte kan inse.

Om du har ett hjärta som vill bryta allt och kombinera det igen, kommer studieprogrammet att hjälpa dig att uppfylla denna idé.

Denna artikel kommer från designern Wenzy.

Steg 8: 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

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

Om du har några frågor kan du skicka ett e -postmeddelande till [email protected].

Denna artikel är från: