Skip to content

P5.js

Wat is p5.js?

p5.js is een JavaScript-bibliotheek die het eenvoudig maakt om visuele en interactieve programma's voor het web te maken. Het is ontworpen met kunstenaars, ontwerpers en beginners in gedachten en biedt een toegankelijke manier om te programmeren via creatieve projecten. Gebaseerd op de principes van Processing, een programmeeromgeving voor visuele kunst, brengt p5.js deze mogelijkheden naar JavaScript, zodat je graphics, animaties en interactieve elementen rechtstreeks in je webbrowser kunt bouwen.

Waarom gebruiken we p5.js?

Er zijn verschillende redenen waarom we p5.js in deze cursus gebruiken:

  1. Eenvoudige opzet: Met alleen een webbrowser en een teksteditor kun je meteen beginnen met programmeren. Er is geen complexe installatie of configuratie nodig.
  2. Visuele feedback: p5.js richt zich op visuals, dus je krijgt direct bevredigende resultaten wanneer je je code uitvoert. Dit maakt het leren boeiender en leuker.
  3. Creatieve mogelijkheden: Het stelt je in staat om prachtige, interactieve animaties en ontwerpen te maken, waardoor je programmeerconcepten op een leuke en artistieke manier leert begrijpen.
  4. Gebruiksvriendelijk voor beginners: De bibliotheek vereenvoudigt veel JavaScript-functies, zodat je je kunt concentreren op het leren van de basisprincipes van programmeren zonder verstrikt te raken in technische details.

Eenvoudig voorbeeld

Hier is een basisvoorbeeld om je op weg te helpen met p5.js. Deze code maakt een canvas en tekent een cirkel die je muisaanwijzer volgt:

function setup() {
  createCanvas(400, 400); // Maakt een canvas van 400x400 pixels
}

function draw() {
  background(220); // Stelt een lichtgrijze achtergrond in
  fill(100, 150, 255); // Stelt de vulkleur in op lichtblauw
  noStroke(); // Verwijdert de rand van vormen
  ellipse(mouseX, mouseY, 50, 50); // Tekent een cirkel bij de muisaanwijzer
}
  • setup() wordt één keer uitgevoerd wanneer het programma start. Het maakt een canvas waarop je kunt tekenen.
  • draw() wordt herhaaldelijk in een lus uitgevoerd. Het tekent het canvas telkens opnieuw, waardoor animatie ontstaat.
  • background() stelt de achtergrondkleur van het canvas in.
  • ellipse() tekent een cirkel. In dit geval beweegt de cirkel mee met je muis (mouseX en mouseY).