Les 5 - Array bewerken, UI en random

---

Hieronder de presentatie uit de les van 15 oktober 2026

JavascriptLes5.pdf

Hieronder de code van de les:

//maak lege arrays aan om later te vullen.
let x = [];
let y = [];

function setup() {
  createCanvas(800,600);
  //voeg 22 willekeurige items toe aan beide arrays
  for(let i = 0; i < 22; i++) {
    x.push(random(20,width-20));
    y.push(random(20,height-20));
  }
}

function draw() {
  background(255);
  //gebruik een for-loop om met behulp van de lijsten
  //de cirkels te tekenen.
  for(let i = 0; i < x.length; i++) {
    circle(x[i],y[i],25);
  }
}

//als er op de muis geklikt wordt, 
// worden de x- en y-positie van de muis
// toegevoegd aan de x- en y-array. 
function mousePressed() {
  console.log(mouseX,mouseY);
  x.push(mouseX);
  y.push(mouseY);
}

//als er op 'd' gedrukt wordt
//wordt het eerste element uit
//de array x en y verwijderd.
function keyPressed() {
  if (key === 'd') {
    x.shift();
    y.shift();
  }
}