Börjar bearbetning - temperatur bildeffekter (2 / 7 steg)

Steg 2: Animation 101

Flip-book analogi:

Minns förr, när folk brukade ta en bunt papper och dra stick-siffror, en på varje sida, varje siffra är något annorlunda än den förra? Efteråt, när du bläddrade förbi alla sidor, det skapade illusionen av rörelse.

Tja, fungerar bearbetning något sådär. I en oändlig draw() slinga, kan varje iteration eller varje passera genom öglan betraktas som en enda sida i den metaforiska flip-bok. Hittills har ser vi inte något flytta eftersom vi höll ritning samma former i alla sidor. Så, hur ändrar vi det? Vi ändrar stegvis någon aspekt av skiss på varje iteration:

int x = 20;

void setup() {

size(400,400);

Background(255);

Smooth();

}

void draw() {

noStroke();

Fill(140);

Ellipse(x,256,40,40);

x = x + 1. den stegvisa ändringen

}

Se resultatet ovan (första bilden).

Tja, är åtminstone något rörliga. Innan vi lista ut varför cirkla lämnar ett spår när den rör sig, låt oss fokusera på vad som orsakar rörelsen. Vi förklarade en heltalsvariabel "x", och skickas det till ellipse() som den x-position. Då, i slutet av draw() slingan, vi ökas värdet på x av en. Detta innebär för varje sida (eller iteration), mitten av cirkeln kommer vara 1 pixel från x-axeln och således att skapa en illusion av rörelse, precis som förr i tiden!

Nu för trail - märka att vi anropas funktionen background() i setup(), vilket innebär att det kommer att köras endast en gång. Därför background() aldrig får uppdateras, och vi ser en historia av platser cirkla reser. Flyttar till background() i början av slingan draw() löser detta. Prova det! (se andra bilden ovan för illustration).

Om du vill placera background() i setup() eller i draw() beror på vilken typ av skiss du försöker producera.

Jag lämnar det till läsaren att räkna ut varför jag deklareras variabeln x utanför både setup() och draw().

Cirkel Variation 1:

Eftersom vi fått grunderna i animation, låt oss göra vår krets lite mer intressant - vad händer om vi ville ha vår krets att stoppa i mitten av skärmen och inte springa iväg eller att komma utom synhåll?

Ett sätt att göra detta är att använda villkorssatser (if, else-satser) för att begränsa cirkeln från att gå förbi centrum. Men, bara för skojs skull, låt oss försöka det på följande sätt:

int x = 20;

void setup() {

size(400,400);

Smooth();

}

void draw() {

Background(255);

noStroke();

Fill(140);

Ellipse(x,256,40,40);

x = x + 1. den stegvisa ändringen

x = constrain(x,0,width/2); begränsa funktionen

}

Cirkeln slutar lydigt på mitten, höger?

Att införa, funktionen constrain():

Bibehåll (variabel, lägre tröskel, högre tröskel) - denna funktion säkerställer att värdet som finns i "variabeln" inte på något sätt, få lägre än "lägre tröskel", eller högre än "högre tröskel".

I ovanstående kod med hjälp av constrain(), vi såg till att cirkelns x-position inte överstiger angivna intervallet (0 till halva bredden, ergo, centrera). Funktionen constrain() är praktiskt i många andra situationer, som dämpa ljusstyrkan på ett ljus för en anläggning, eller begränsa sensor värden inom ett visst intervall.

Cirkla variant 2 (Jiggling cirkel):

Flytta en cirkel över skärmen var ganska söt först. Men eftersom vi har fått några fiffiga verktyg i bagaget nu, låt oss prova något lite mer spännande - att göra cirkeln litegrann!

Vi kan göra cirkeln verkar som det jiggling genom att kontinuerligt göra det flytta en bildpunkt till vänster eller höger eller upp eller ner på ett slumpmässigt sätt (e.g, upp, ner, ner, vänster, vänster, höger, höger, höger... och så vidare). Hur väljer vi slumpmässigt en riktning? Låt oss ta reda på:

float x = 200.

float y = 200.

void setup() {

size(400,400);

Smooth();

}

void draw() {

Background(255);

noStroke();

Fill(140);

Ellipse(x,y,80,80);

x = x + random(-1,1);

y = y + random(-1,1);

}

slumpmässig (lägre värde, övre värde) - inbyggda funktionen genererar ett slumptal inom spänna till det.

Observera att funktionen random genererar flytande punktnummer, inte heltal. Det är därför vi hade att ändra datatyperna för x och y variabler från "int" att "flyta", sedan lägga till ett heltal till en flottör i slutändan ger en flottör, och vi kan inte lagra som i int.

Därför, genom att lägga till flera slumpmässigt både x- och y-koordinaterna för cirkla vid varje iteration av loopen draw(), vi lyckats göra det litegrann. Om du vill att cirkeln till litegrann snabbare, gör utbudet större, som från -10 till + 10 till exempel.