De eerste animatie was een flipbook – een stapel papier die je met je duim los laat flippen. Dat gaan we nu digitaal doen.
Inleiding Animaties
Happycoding Tutorial Animatie
We hebben deze nog niet vertaald. jammer joh. Good luck. You can:
https://happycoding.io/tutorials/p5js/animation
Neem de tutorial door, bestudeer de codes maar de homework sectie mag je overslaan.
Opdracht Flipbook
Wat is een flipbook? Skim even door.
We gaan de bewegende bal opnieuw maken, maar dan als flipbook. Nog even wat tips:
- Alleen de x-positie van de bal verandert. Maak er een variabele voor, x.
- In setup zet je x op 0
- In draw verhoog je x met 1
We gaan met meer werken dan alleen met de X en daarom maken we nu een object literal (dat is nieuw voor je), gelukkig krijg je de code kado.
var circ1
function setup() {
createCanvas(600, 120);
circ1 = {
x:0 // Start at the left edge of the canvas
}
}
function draw() {
background(0);
circ1.x = circ1.x + 1; // Move slightly to the right
ellipse(circ1.x, 60, 20, 20);
}Speed
In elke draw-herhaling hoog je met 1 op. Kan dat niet sneller? Of langzamer? Hoe doe je dat?
Is het niet beter de code te controleren met een eigen object property speed? Die komt dan onder x:0 in de binnen de definitie van circ1.
Frame Rate
Je flipbook moet mooi lopen en dat hangt een beetje af van de prestaties van je computer. P5JS wil de draw op 60 frames per seconde uitvoeren. Vrij vlot. Dat lukt dan wel thuis maar typisch niet in het lokaal met de trage laptop en de enorme TV met 1080p beeldpunten, mokertraag.
Je kunt zelf de framerate aanpassen met de code
function setup() {
/// etc
frameRate(10)
}Speel met de framerate tot deze naar jouw zin goed loopt. In de code, maak een // comment met de info framerate – hardware pc.
Eigen Flipbook
Nu heb je het idee van een flipbook te pakken hebt: maak er zelf een. Misschien met je robot of met een paardenrace. Gaan!