p5.js¶

Om snel te kunnen beginnen met programmeren van grafische applicaties kan je gebruik maken van een de p5.js javascript library. Een library is een verzameling van functies die je kunt gebruiken in je programma’s. p5.js bevat functies om te tekenen, geluid af te spelen en invoer van de gebruiker te verwerken.

p5.js gebruiken¶

Om p5.js te gebruiken, moet je eerst een HTML bestand maken. Dit bestand moet de volgende inhoud hebben:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Hier link je naar de p5.js library. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
</head>
<body>
    <!-- Hier neem je de code in het bestand `sketch.js` op in je HTML bestand. -->
    <script src="sketch.js"></script>
</body>
</html>

Dit is een standaard HTML bestand. De <script> tag verwijst naar een JavaScript bestand. Dit bestand moet je nog maken. Maak een bestand met de naam sketch.js en zet dit bestand in dezelfde map als het HTML bestand.

In het JavaScript bestand sketch.js kun je nu p5.js functies gebruiken. Bijvoorbeeld:

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

function draw() {
    background(220);
    ellipse(200, 200, 50, 50);
}

Oefening

Maak een HTML bestand met de naam index.html en een JavaScript bestand met de naam sketch.js. Zet beide bestanden in dezelfde map. Voeg de bovenstaande code toe aan de bestanden. Open het HTML bestand in een browser. Je ziet nu een wit vlak met een cirkel erin.

Verder leren¶

De p5.js website bevat een uitgebreide handleiding en veel voorbeelden. Je kunt ook de p5.js reference gebruiken om te zien welke functies er allemaal zijn.

De auteur Daniel Shiffman heeft een zeer toegankelijk youtube kanaal genaamd The Coding Train. Hij maakt videos voor beginners maar behandeld ook onderwerpen die voor wat meer ervaren gamedevelopers zeer belangrijk kunnen zijn. Zijn boek The Nature of Code is ook zeer de moeite waard en gratis te lezen op zijn website.

Tools¶

p5.js online editor¶

Je kunt p5.js ook gebruiken in de p5.js online editor. Dit is een online omgeving waarin je p5.js programma’s kunt schrijven en uitvoeren. Je kunt je programma’s ook delen met anderen.

Let op

De p5.js online editor is een handige tool om snel te beginnen met p5.js. Gebruik voor je project VSCode en git zodat je je code kunt delen met anderen en je code kunt opslaan op GitLab.

VSCode¶

VSCode is een gratis code editor van Microsoft. Je kunt VSCode gebruiken om p5.js programma’s te schrijven. Je kunt VSCode hier downloaden.

Voor p5.js zijn er een aantal handige extensies voor VSCode:

p5canvas: hiermee kun je je p5.js programma direct in VSCode uitvoeren en zien wat het resultaat is. Dit werkt alleen voor kleine projecten en experimenten. Als je project complexer wordt, kun je beter je programma in een browser uitvoeren met de live server.
p5.vscode: Hiermee kan je snel nieuwe p5.js projecten maken. Projecten gemaakt met deze extensie werken ook met code completion in vscode.