Stap 2: Animatie 101
De Flip-book analogie:
Herinner me de olden dagen, wanneer mensen gebruikt om een stapel papier en trekken een aantal stokcijfers, één op elke pagina, elk cijfer is iets anders dan de laatste? Daarna, wanneer je omgedraaid langs alle pagina's, gemaakt het de illusie van beweging.
Nou, werkt verwerking van iets dergelijks. In de loop van de oneindige draw(), kan elke iteratie of elke pass door de lus worden beschouwd als een enkele pagina in de metaforische flip-boek. Tot nu toe zien we niet iets verplaatsen omdat we hield het tekenen van de dezelfde vormen in alle pagina's. Dus, hoe kunnen we dat wijzigen? We wijzigen incrementeel sommige aspecten van de schets op elke iteratie:
int x = 20;
VOID Setup {}
size(400,400);
Background(255);
Smooth();
}
VOID draw() {}
noStroke();
Fill(140);
Ellipse(x,256,40,40);
x = x + 1; de stapsgewijze wijziging
}
Zie het resultaat boven (eerste afbeelding).
Nou, in ieder geval iets in beweging is. Voordat we erachter te komen waarom de cirkel een spoor laat als het beweegt, let's focus op wat de oorzaak van de beweging. We een integer-variabele 'x' verklaard, en het doorgegeven aan ellipse() als de x-positie. Vervolgens, aan het eind van de lus draw() verhoogd we de waarde van x met een. Dit betekent, voor elke pagina (of iteratie), het midden van de cirkel zal worden van 1 pixel uit de buurt van de x-as, en dus creëren van de illusie van beweging, net als in vroeger dagen!
Nu, voor de trail - bericht dat we de functie hebt aangeroepen background() in Setup, wat betekent dat het slechts één keer wordt uitgevoerd. Vandaar, de background() nooit wordt vernieuwd, en we zien een geschiedenis van de locaties die de cirkel reist. Verplaatsen van de background() aan het begin van de lus draw() is dit opgelost. Probeer het! (Zie tweede afbeelding hierboven ter illustratie).
Of background() in Setup of draw() zal afhangen van het soort schets die u probeert te produceren.
Ik laat het aan de lezer om erachter te komen waarom ik verklaard de variabele x buiten zowel Setup en draw().
Cirkel variatie 1:
Aangezien we de basisprincipes van animatie ging, laten we onze kring een beetje meer interessant - wat als we wilden onze kring te stoppen in het midden van het scherm en niet weg te lopen of uit het zicht krijgen?
Een manier om dit te doen is het gebruik van voorwaardelijke instructies (indien anders verklaringen) te beperken van de cirkel gaan langs de center. Maar, gewoon voor de lol, laten we proberen de volgende manier:
int x = 20;
VOID Setup {}
size(400,400);
Smooth();
}
VOID draw() {}
Background(255);
noStroke();
Fill(140);
Ellipse(x,256,40,40);
x = x + 1; de stapsgewijze wijziging
x = constrain(x,0,width/2); de functie beperken
}
De cirkel gehoorzaam stopt in het midden, recht?
Invoering, de constrain()-functie:
beperken (variabele, lagere drempel, hogere drempel) - deze functie zorgt ervoor dat de waarde die deel uitmaakt van het "variabele" niet, op geen enkele manier, krijgen lager dan "lagere drempel", of hoger dan de "hogere drempel".
In de bovenstaande code, met behulp van constrain(), we ervoor gezorgd dat de cirkel de x-positie niet hoger is dan het gegeven bereik (0 tot de helft van de breedte, ergo, het centrum). De constrain()-functie komt van pas in vele andere situaties, zoals het beperken van de helderheid van een licht voor een installatie, of beperken van de sensor-waardes binnen een bepaald bereik.
Cirkel variatie 2 (Jiggling cirkel):
Een cirkel te bewegen over het scherm was vrij zoet aanvankelijk. Echter, want nu hebben we enkele handige tools onder onze riem, laten we proberen iets een beetje meer spannend - maken de cirkel schudden!
Kunnen we de cirkel lijkt alsof het wordt jiggling doordat voortdurend het verplaatsen van één pixel naar links of naar rechts of omhoog of omlaag op een willekeurige wijze (bijvoorbeeld, omhoog, omlaag, omlaag, links, links, rechts, rechts, rechts... en zo verder). Hoe selecteren we willekeurig een richting? Laten we het weten:
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);
}
willekeurige (onderwaarde, bovenste waarde) - deze ingebouwde functie genereert een willekeurig getal binnen het bereik aangeboden.
Houd er rekening mee dat de random-functie genereert floating point getallen, niet de gehele getallen. Dit is de reden waarom we dat niet opslaan in int., we moesten veranderen de gegevenstypen van de x en y variabelen uit "int" te "zweven", sinds het toevoegen van een geheel getal aan een float levert uiteindelijk een float
Vandaar, door toevoeging van een aantal willekeurig aan zowel de x- en y-coördinaten van de cirkel aan elke iteratie van de lus draw(), we erin geslaagd het schudden. Als u wilt dat de cirkel om sneller te schudden, het bereik groter maken, zoals van -10 tot + 10 bijvoorbeeld.
