Aan de slag met p5.js: Je eerste generatieve sketch

Leer de basisprincipes van p5.js en maak je eerste bewegende visuals in slechts 30 minuten. Geen ervaring nodig.

12 min leestijd Beginner Februari 2026

Computer scherm met kleurrijke generatieve kunst en code editor met p5.js bibliotheek

Wat is p5.js eigenlijk?

p5.js is een JavaScript-bibliotheek die generatieve kunst superaccessible maakt. Het begon als een moderne uitbreiding op Processing, een creatieve codingtaal die sinds 2001 gebruikt wordt door designers, kunstenaars en onderzoekers. Met p5.js kun je rechtstreeks in je browser aan de slag — geen ingewikkelde setup, geen complexe installaties.

Waarom kiezen webdesigners ervoor? Omdat je ermee beweging, kleur en interactie aan je websites toevoegt op een manier die veel natuurlijker voelt dan jQuery of traditioneel JavaScript. Je denkt niet in events en callbacks — je denkt in vormen, kleuren en beweging.

Kleurrijke generatieve patronen met cirkels en lijnen, echt kunstwerk gemaakt met p5.js code

30 seconden setup — dat’s alles

Je hoeft echt niks te installeren. Ga naar editor.p5js.org en je bent klaar. Letterlijk. Die editor is precies wat je nodig hebt: links je code, rechts je resultaat. Je schrijft JavaScript, en p5.js zorgt dat het een canvas wordt met beweging en kleur.

Het enige wat je moet onthouden: p5.js werkt met twee functies. De setup() functie draait één keer aan het begin — daar zet je je canvas op. De draw() functie draait vervolgens 60 keer per seconde, dus dat’s waar de animatie gebeurt.

p5.js web editor interface met live preview panel aan de rechterkant

Je eerste sketch: een dansende cirkel

Dit is het meest simpele generatieve kunstwerk dat je kunt maken, en het is prachtig.

Canvas maken

In setup() schrijf je createCanvas(800, 600). Dit maakt een canvas van 800 bij 600 pixels. Klaar.

Achtergrond instellen

In draw() begin je met background(20). Dit maakt je achtergrond donkergrijs. Het is belangrijk dat je dit ELKE frame doet, anders zie je trails van je animatie.

De beweging toevoegen

Gebruik sin(frameCount * 0.01) om een smooth oscillatie te maken. Dit getal loopt van -1 tot 1, perfect voor beweging. Vermenigvuldig het met de breedte van je canvas voor een grotere beweging.

Tekenen

Tot slot: circle(x, y, 50) tekent een cirkel op de positie die je berekend hebt. Kleur het in met fill() voordat je het tekent — zeg maar fill(100, 200, 255) voor een mooie blauw.

Volledige code:

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(20);
  
  let x = width / 2 + sin(frameCount * 0.01) * 150;
  let y = height / 2;
  
  fill(100, 200, 255);
  circle(x, y, 50);
}

Wat je nu kunt doen

Die dansende cirkel? Dat’s pas het begin. Nu kun je veel gaan experimenteren. Voeg meer cirkels toe en laat ze met verschillende snelheden dansen. Verander de kleuren met hue() zodat ze regenboogkleuren krijgen. Voeg ruis toe met noise() voor organischere beweging.

Drie dingen om direct uit te proberen:

Vermenigvuldig frameCount: Probeer frameCount * 0.02 in plaats van 0.01. De beweging wordt sneller.
Loop elementen: Een for-loop met 10 cirkels ipv 1. Zet ze naast elkaar en je hebt meteen een interessanter patroon.
Gebruik mouseX: let x = mouseX; maakt het interactief. Je cursor beweegt de cirkel.

Meerdere dansende vormen en cirkels die elkaar kruisen in een organische beweging

Waarom dit uitmaakt voor je design

Generatieve kunst in je website maakt het niet alleen mooier — het maakt het levend. Bezoekers voelen dat er beweging en gedachte achter zit. Het onderscheidt je van static designs.

Portfolio Hero

Zet een generatieve achtergrond achter je naam. Elke keer als iemand je site bezoekt, ziet hij iets nieuws. Blijft hangen.

Data Visualization

p5.js is ideaal om data in beweging te laten zien. Grafieken die groeien, deeltjes die interactie tonen — veel beter dan statische SVG.

Scroll Triggers

Combineer p5.js met ScrollTrigger.js. Laat je animatie starten als de bezoeker scrollt. Totaal immersief.

“Generatieve code is geen vervanger voor design — het’s een medium. Net als fotografie of acryl.”
— Bees Rutten, creative technologist

Volgende stappen en bronnen

Je bent nu klaar om echt mee te gaan experimenteren. Wat je nu moet doen is dingen breken. Verander getallen. Voeg functies toe. Kijk wat er gebeurt. Dat’s hoe je echt leert.

De p5.js referentie is je beste vriend — je vindt er elke functie met voorbeelden. En de community is heel actief. Er zijn tutorials op YouTube die je stap voor stap meenemen door complexere technieken.

Programmeur aan het werk in p5.js editor met meerdere codebestanden open en preview window

Waar je kunt beginnen:

p5.js Referentie

p5js.org/reference — alles wat je nodig hebt in één plek

Coding Train (YouTube)

Daniel Shiffett’s tutorials zijn de best. Echt. Begin met “Nature of Code”

OpenProcessing

Galerij met honderden sketches. Bekijk de code, leer hoe anderen het doen

Over deze gids

Dit artikel is informatief en bedoeld als introductie tot p5.js. De code en technieken zijn vereenvoudigd voor beginners. Echte generatieve kunstprojecten kunnen veel complexer worden. Iedereen leert anders — experimenteren is het beste leermiddel. Als je performance problemen ondervindt in je browser (veel animaties tegelijk), kan dat aan je hardware liggen, niet aan p5.js zelf.