Les 0 - Introductie en setup

P5.js is een bibliotheek (library) met functionaliteit waarmee je snel en eenvoudig tekeningen en animaties kunt maken voor het web. Misschien heb je wel gehoord van Processing.js maar dat is eigenlijk een voorloper van P5.js. De taal die je voor P5.js gebruikt is gewoon javascript. Bij Processing is de basistaal Java.

Wat het zo fijn maakt is dat je met simpele commando's figuren kunt tekenen. Zo kun je een rechthoek tekenen als volgt:

rect(20, 30, 40, 20); //Rechthoek op positie (20, 30), 40 pixels breed en 20 pixels hoog.

Canvas

Net als bij het schilderen teken je op een canvas, een deel van je browserwindow. Je kunt zelf bepalen hoe groot of hoe klein het canvas is maar alles wat je tekent moet op het canvas komen anders zie je het niet (maar het is er wel).

Zoals je gewend bent zit het punt (0, 0) helemaal linksboven op je canvas. Alle afmetingen die gaat gebruiken zijn in pixels.

Draw loop en setup

De basis van je tekening of animatie is altijd de draw loop. De code in deze loop blijft achter elkaar uitgevoerd worden. Een eerste voorbeeldprogramma is als volgt:

See the Pen gGPMLY by Jurjenh (@jurjenh) on CodePen.

Dit programma tekent een rechtoek en blijft dat 60 keer per seconde doen. De framerate is namelijk 60 fps (frames per second). Wat je dus zult zien is een rechthoek en meer niet. Wil je dat de code één keer wordt uitgevoerd of stopt met herhalen dan gebruik je:

noLoop();

Je ziet ook de setupfunctie. Deze functie wordt één keer uitgevoerd aan het begin van je programma.

Laten we beginnen!

Je vingers jeuken natuurlijk al en je wilt meteen aan de slag. Wat we nodig hebben is het volgende:

• Editor (bijvoorbeeld Atom)
• Een webserver
• Een browser

Je kunt uiteindelijk je programma wel op een server zetten die met het internet verbonden is, maar we beginnen met een webserver die alleen op je eigen computer draait. Met Python kun je eenvoudig een webserver aanzetten. (We gaan ervan uit dat je python hebt geinstalleerd).

• Open een terminal of een Powershell
• Maak een map aan waarin je aan je project gaat werken en ga die map in (met cd)
• Typ het onderstaande commando in:

python3 -m http.server

Als dit niet werkt volstaat (waarschijnlijk):

python -m http.server

Als dit nog steeds niet werkt betekent dit dat je Python niet hebt geïnstalleerd of dat je path niet goed staat. Kijk hoe je dat kunt doen aan het einde van dit hoofdstuk.

Ga nu naar de volgende url adres in je browser:

127.0.0.1:8000

Als het goed is zie je een lijst met bestanden die in die map staat. Sla hier straks je html en javascript bestand in op.

Extra informatie - Path instellen

Om je pad in te stellen kun je het volgende doen. Volg de stapjes rustig en vraag als het niet lukt om hulp.

• Open Configuratiescherm
• Zoek op 'Path'
• Klik op 'Omgevingsvariabelen voor uw account beheren'
• Selecteer 'Path' en klik op 'Nieuw'
• Plak daarin 'C:\Program Files\Python36' (als je een andere versie van Python hebt moet je uiteraard ook een andere map kiezen)