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

U3 LA 2.1, Arrays en Loops Deel 1

Een array is een lijst van met variabelen. Het woord Array komt het Nederlandse UnRij. Dat krijgen die Engelsen niet uit hun b*k…

Voorbeeld Fruit

In een fruitmand zitten 4 stuks fruit. Je wilt ze allemaal displayen. Met dezelfde code. Je krijgt dan:

var fruit = [];
function setup() {
  createCanvas(400, 400);
  fruit[0]="appel"
  fruit[1]="sinaasappel"
  fruit[2]="peer"
  fruit[3]="ananas"
}

Hoe maak je een array?

  • Definieer eerst je array variabele met []
  • Een array begint bij element 0. Niet vanaf 1, dat doen ze bij Wiskunde.
  • array.length is een veelgebruikte truuk. In dit geval 4.

Andere notatie

Een andere notatie voor dezelfde array is:

fruit = ["appel","sinaasappel","peer","ananas"]

Dit is de meestgebruikte notatie, dat is logisch. Want een goede programmeur is lui.

Loop door de Array met een for-loop

Hoe laat je nu dezelfde berekening los op elk element van de array? Gebruik de for-loop.

function draw() {
    for (var f = 0; f < fruit.length; f++) {
        text(fruit[f], 100, 100 + 20 * f);
    }
}

Opdracht arrays: je favo spelers

Ben je nu fan van een bepaalde sport of club, maak dan een lijst van tenminste 7 spelers van die club of sport. Heb je geen club of sport en weet je zelf geen beter voorbeeld? Dan doe je maar je favo docenten van vorig jaar.

Print de namen van de spelers schuin onder elkaar en ook zo dat ze telkens een kleurverschil hebben met de vorige. De nummer 1 in de grootste letters en dan steeds wat kleiner als minder belangrijk.

Gebruik een array voor je spelers en gebruik de for-loop om ze allemaal af te lopen.

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