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!