Skip to content
ICT Fusion Knowledgebase

P5.js

p5.js is een JavaScript bibliotheek voor creatief coderen. Het maakt tekenen, animatie en interactie in de browser eenvoudig. Hieronder vind je een compacte gids met veel verwijzingen naar de officiële p5.js reference zodat je snel kunt verdiepen waar nodig.

Wat heb je nodig?

  • Browser: moderne browser (Chrome/Edge/Firefox).
  • Editor: kies ofwel de online p5 Editor of werk lokaal met je eigen editor (VS Code) en een eenvoudige webserver.
  • Documentatie: officiële Reference.

Het basisprogramma: setup en draw

In p5.js schrijf je typisch twee functies:

  • setup(): wordt 1× uitgevoerd aan het begin (initialisatie).
  • draw(): wordt ~60× per seconde herhaald (animatielus).
function setup() {
  createCanvas(600, 400); // Maak een canvas
}

function draw() {
  background(240);        // Wis het scherm elke frame
  circle(300, 200, 100);  // Teken een cirkel
}

Belangrijkste reference-links:

Vormen tekenen

Veelgebruikte primitieve vormen:

Stijl instellen:

function draw() {
  background(255);
  fill(0, 150, 255);        // RGB
  stroke(0);                // Zwarte lijn
  strokeWeight(2);
  rect(50, 50, 150, 80, 10); // x, y, w, h, radius
}

Kleuren werken met verschillende notaties: RGB, HSB en hex. Zie color en colorMode.

Animatie en variabelen

Gebruik variabelen om beweging te creëren; elke draw()-iteratie update je de staat.

let x = 0;

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(240);
  circle(x, height/2, 40);
  x = (x + 2) % width; // Loop terug aan het einde
}

Handige constanten en variabelen:

Interactie: muis en toetsenbord

Lees realtime-waarden of gebruik event-functies.

Realtime-waarden:

Events:

function draw() {
  background(30);
  fill(255);
  circle(mouseX, mouseY, mouseIsPressed ? 80 : 40);
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('screenshot', 'png'); // Zie reference: saveCanvas
  }
}

Meer: saveCanvas

Transformeren: translate, rotate, scale

Tekeningen kun je verplaatsen, roteren en schalen. Gebruik altijd push en pop om transformaties te isoleren.

Belangrijke functies:

function draw() {
  background(250);
  translate(width/2, height/2);
  rotate(frameCount * 0.02);
  push();
  fill(255, 100, 100);
  rectMode(CENTER);
  rect(0, 0, 120, 40);
  pop();
}

Afbeeldingen en tekst

let img;

function preload() {
  img = loadImage('assets/photo.jpg');
}

function setup() {
  createCanvas(500, 300);
}

function draw() {
  background(220);
  image(img, 0, 0, width, height);
  fill(0, 0, 0, 180);
  rect(0, height-40, width, 40);
  fill(255);
  textSize(18);
  textAlign(CENTER, CENTER);
  text('Hello p5.js', width/2, height-20);
}

Data en utilities

function draw() {
  background(250);
  const n = noise(frameCount * 0.01);
  const x = map(n, 0, 1, 50, width - 50);
  circle(x, height/2, 40);
}

Structuur en organisatie van code

  • Gebruik eigen functies om logica te groeperen.
  • Houd state in objecten of maak ES6 classes voor complexe schetsen.
  • Voor meerdere bestanden: gebruik de Instance Mode of bundlers als Vite. Zie docs: Global vs Instance Mode.

Klein voorbeeld met een class:

class Mover {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.speed = 2;
  }
  update() {
    this.x = (this.x + this.speed) % width;
  }
  draw() {
    circle(this.x, this.y, 24);
  }
}

let mover;

function setup() {
  createCanvas(400, 200);
  mover = new Mover(0, height/2);
}

function draw() {
  background(245);
  mover.update();
  mover.draw();
}

Debugging en performance

  • Console: gebruik print of console.log voor debuggen.
  • Framerate: frameRate om te lezen of in te stellen.
  • Teken alleen wat verandert; vermijd zware berekeningen in elke frame.

Werken in projecten (HBO-ICT context)

  • Versiebeheer: zet je schetsen in een repository en publiceer via GitHub Pages of Netlify.
  • Demos: lever een minimalistische index.html met een sketch.js in een public/ of docs/ map.
  • Teamwerk: spreek af over code-stijl, bestandsstructuur en naming. Overweeg TypeScript met p5 type-definities voor grotere projecten.

Snelle referentie (handig om te bookmarken)

Ga nu vooral zelf experimenteren: start de editor, pas een voorbeeld aan, en volg de links naar de reference wanneer je een functie verder wilt begrijpen.