P5js Essentials¶
P5js is een javascript library die het makkelijk maakt om vormen en images te tekenen in een canvas.
Op deze pagina zijn een aantal User Stories te vinden die gedownload en geimporteerd kunnen worden. Met behulp van deze User Stories kunnen verschillende programmeertechnieken uitgeprobeerd worden om het programmeren in JavaScript verder onder de knie te krijgen.
User Stories¶
Download een set User Stories in *.csv formaat welke geimporteerd kunnen worden onder issues in een gitlab project.
Download user_stories_essentials_js.zip
Hulpbronnen¶
Onder hulpbronnen zijn referenties te vinden naar voorbeelden van concepten en technieken. Zoek vooral ook op de P5 en andere websites naar vergelijkbare concepten/technieken voor hulp bij het uitwerken van de User Stories.
Ellips tekenen¶
Voorbeeld voor het tekenen van een ellips.
2D primitieven tekenen¶
In de reference onder Shape - 2D Primitives zijn verschillende vormen te vinden die getekend kunnen worden op het scherm m.b.v. het P5 framework.
Kleuren¶
Geef vormen, teksten, de achtergrond een kleur met behulp van onderstaande bron.
For-loop, iteraties en herhaling van code¶
Een for-loop maakt het makkelijk om herhalende code zo efficient mogelijk te formuleren.
Denk aan het genereren van een lijst aan (willekeurige) objecten.
Condities¶
Gebruik condities om het programma zichzelf vragen te laten stellen en op basis van de uitkomst een bepaalde actie te laten uitvoeren.
Dynamiek/beweging/animatie¶
In dit voorbeeld is te zien hoe een vorm (cirkel) te bewegen is over het scherm.
Interactie met de muispositie¶
Gebruik de muispositie in een applicatie.
Interactie met de muisknop¶
Laat een applicatie reageren op de muisknop.
Functies¶
Hergebruik een stuk code en breng structuur aan in de code door gebruik te maken van functies.
Class definitie, instantie en objecten¶
Een Class kan gebruikt worden om een specifiek object samen te stellen. Van dit specifieke object kan je dan gemakkelijk meerdere instanties aanmaken.
Denk bijvoorbeeld aan het vullen van een snelweg met auto’s of een level met vijanden.
Daarnaast kunnen deze instanties verschillende waardes hebben voor bepaalde kenmerken. Zo kan de snelheid van de auto’s verschillen of de hoeveelheid HP per vijand verschillen.
Array lijsten¶
Een Array geeft de mogelijkheid om collecties van waarden op te slaan.
Bijvoorbeeld een collectie van vijanden, projectielen, obstakels of andere data.
Teksten en Fonts¶
Teksten kunnen o.a. gebruikt worden voor aanduiding, beschijvingen, uitleg in de applicaties. Door Fonts in te laden kunnen er gemakkelijk teksten in specifieke stijlen worden getoont aan de gebruiker.
Afbeeldingen¶
Zie de volgende bron voor het inladen van afbeeldingen. Gebruik afbeeldingen bijvoorbeeld voor achtergronden, knoppen of karakters.
Particle systeem voorbeeld¶
Met een particle systeem kunnen bijzondere effecten gegenereerd worden. In games zie je dat vaak bij rook, explosies, spell effecten, etc…