Ga naar de inhoud

p5js.nl

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1.3 Meerhoeken, sterren, bogen
      • U1 LA 1.4 Mini-project: Maak een Taijitu (Yin & Yang)
    • Unit 1, LA 2
      • U1 LA 2.1 Meebewegen met de muis
      • U1 LA2.2 Meekleuren met de muis op je eigen variabele
      • U1 LA 2.3 Random Ellipsen
      • U1 LA2 Mini-Project Custom Emoji
    • Unit 1, LA3
      • U1 LA 3.1 Inleiding Kleur
      • U1, LA 3.2 Maak je lievelingskleur in de HSB kleurmodus
      • U1 LA 3.3 Kleuren paletten
      • U1 LA 3.4 Eenvoudige Functies
      • U1 LA 3.5 Een simpele tekst
    • Unit 1 Final Project Teken een GSM
  • Unit 2
    • Unit 2, LA1
      • U2 LA1.1 If-Then-Else Kleur die Robot
      • U2 LA 1.2 AND en OR
      • U2 LA1 Mini-Project Stoplicht
      • U2 LA1.4 Tekenen met de muis
      • U2 LA1.5 De map() functie
    • Unit 2, LA 2
      • U2 LA2.1 Raken met Collide2D
      • U2 LA2.2 Muisclicks en vormen als knop gebruiken
      • U2 LA 2.3 Meer met functies
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 Final Project Painter
  • Unit 3
    • Unit 3 LA1
      • U3 LA 1.1 While Loops
      • U3 LA 1.2 Een for-loop
      • U3 LA 1.3 For-loop in een for-loop
      • U3 Mini-Project Wallpaper design
    • Unit 3 LA2
      • U3 LA 2.1 Arrays en Loops Deel 1
      • U3 LA 2.2 Arrays en loops deel 2 – random
    • Unit 3 LA 3 Mini-Project Vision Board
      • Unit 3 LA3.1 Afbeeldingen uploaden
    • Unit 3 LA 4 Mini-Project Bewegende Tekst
      • U3 LA 4.1 Werken met fonts
      • U3 LA 4.2 Geluiden
    • Unit 3 LA 5 Mini-Project Fun Piano
    • Unit 3 Final Project Meme Generator
  • Unit 4
    • Unit 4 LA 1 Stuiteren
    • Unit 4 LA1 Mini-Project DVD-Logo
    • Unit 4 LA 2.1 & 2.2 Translations & Rotations
    • U4 LA2 MP Draai die Koppen of Calypso
    • U4 LA 3.1 Sinus en cosinus
    • U4 LA 3 Mini-Project Stoomtrein
    • Unit 4 FP Brulbrief
  • Unit 5
    • U5 LA1 Programmeer Oefeningen
    • U5 LA2 Globale Variabelen opheffen
    • U5 LA 2.1 Finite State Machine
  • Blog
  • Links
    • P5JS Editor
      • P5JS.org
      • Video's Coding Train
      • P5JS Reference
      • Intro to Computational Media (2022)
    • Openverse Images
      • Freesound
      • Music
      • Free stock photo's
      • Free Vector Images
      • Dafont
  • Contact
    • Beoordeel P5js.nl
    • Docenten Info
Menu

Unit 4 LA 1.1 Beweging met flipbooks

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!

Dit is de vertaling-in-aanbouw van de Amerikaanse lesmethode Introduction to computational media (V2020, V2022) voor P5JS door Luisa Pereira.

Aangepast voor Nederland door docent Barry Voeten.

Creative Commons-Licentie
Dit werk valt onder een Creative Commons Naamsvermelding-NietCommercieel-GelijkDelen 4.0 Internationaal-licentie.
© 2023 p5js.nl | Aangedreven door Minimalist Blog WordPress thema