P5.js is gratis en ‘open source’. Het is een verzameling functies waarmee je grafisch kan programmeren. Het is een afsplitsing van Processing: een grafische programmeertaal en ontwikkel omgeving. P5.js (samen met javascript) kan je zonder verdere installatie gebruiken en het uiteindelijke programma kan je in een standaard webbrowser bekijken/uitvoeren.
Hoe 'link' je p5.js met HTML |
|
|---|---|
|
Het allereerste dat je moet doen is het maken van een html document. In dit html document zet je het volgende (sla het op als ‘test.html’): <!DOCTYPE html> <html> <head> <script src="p5.js"></script> <script src="test.js"></script> </head> <body> <div id="pongcontainer"></div> </body> </html> Regels 1, 2, 3, 6, 7, 9 en 10 zijn standaard tags die in elk html-document moeten staan. Regel 4: met deze regel zeg je dat je bestand ‘p5.js’ (waar alle benodigdheden staan om grafisch te programmeren) inleest. Hierna kan je dus alle functionaliteit van p5.js gebruiken. Regel 5: met deze regel zeg je dat je bestand ‘test.js’. Dit bestand gaat jouw eigen code voor het tekeken bevatten. Regel 8: de div-tag wordt gebruikt om straks een tekenblad in te stoppen. Het tweede wat je dan doet is een bestand ‘test.js’ maken. In dat bestand zet je het volgende:
// setup() function
function setup()
{
// maak een tekenblad (canvas)
var myCanvas = createCanvas(400, 400); // maak deze 400 (breedte) bij 400 (hoogte)
myCanvas.parent("pongcontainer"); // plaats deze in de div
}
// draw() function. Deze wordt herhaald uitgevoerd.
function draw()
{
}
Dit is het minimum aan javascript code die je in het bestand moet hebben staan. Regel 1,5,6,7 en 9: alles dat achter ‘//’ staat is commentaar. Deze regels worden bij het uitvoeren van het programma ‘overgeslagen’. Hier kan je dus extra informatie zetten zodat je later weet wat je gedaan hebt. Het is ook handig voor andere programmeurs (en je docent!) zodat die kunnen zien wat je bedoelde met je code.
Regel 2 en 10: dit zijn twee functies (gegroepeerde regels code, later meer over functies) die in elk programma moeten staan. De code die uitgevoerd wordt bij het aanroepen van een functie staan tussen de accolades (regel 3, 7 en 11,12). De setup functie wordt 1 keer aan het begin van het programma aangeroepen. Hier komen dus allemaal dingen te staan die het programma moet uitvoeren voordat het ‘daadwerkelijke programma’ begint. Hier staat dus hoe groot jij het doek (het canvas) waarop getekend wordt wil hebben. Dit doe je door de functie createCanvas(400, 400) aan te roepen. De getallen tussen de ronde haakjes worden parameters genoemd en zeggen hoe groot in pixels het canvas wordt. In dit geval zal het canvas/doek 400 pixels breed en 400 pixels hoog zijn. De code Als allerlaatst moet je zorgen dat je ‘p5.js’ (hier te downloaden met rechtermuisknop en dan 'opslaan als' of 'save as') in dezelfde folder hebt staan als de andere bestanden. Nu kan je testen of het werkt. Open daarvoor in een browser het bestand test.html en zie wat er gebeurt. Als het goed is zal je een wit scherm zien. Dat klopt! We hebben nog niet gezegd wat we op het doek (het canvas) getekend willen hebben! |
|
Hoe teken je simpele vormen op het canvas |
|
|
We gaan twee simpele vormen met een tekst op het doek ‘tekenen’. Dit doen we door functies van processing.js te gebruiken. Dit zijn de functies ‘rect()’, ‘ellipse()’ en ‘text()’ voor respectievelijk een vierkant, cirkel en tekst. rect(): deze functie zorgt ervoor dat er een vierkant getekend wordt. Tussen de ronde haakjes moeten nog vier parameters (getallen) komen te staan. De eerste twee geven de coördinaat in pixels van het linkerbovenpunt van het vierkant (x,y → horizontaal, verticaal). De derde geeft aan hoe breed het vierkant is (hoeveel pixels in de x-richting/horizontaal). De vierde geeft aan hoe hoog het vierkant is (hoeveel pixels in de y-richting/verticaal). Coördinaat 0,0 is de linkerbovenhoek van het canvas!! Dus bv rect(50, 50, 20, 30) betekent “teken een vierkant met linkerbovenhoek op pixel 50, 50 die 20 pixels breed is en 30 pixels hoog”. ellipse(): Dit is een functie die zorgt dat er een cirkel/ellips getekend wordt. Ook deze krijgt 4 parameters (getallen) mee. De eerste twee geeft de coördinaat van het middelpunt van de cirkel. De derde geeft de diameter in de horizontale richting (x-richting). De vierde geeft de diameter in de verticale richting (y-richting). Dit betekent dat als je een cirkel wil dat je de derde en vierde parameter hetzelfde moet maken! VB: ellipse(100,100, 20, 50) betekent “teken een ellips met middelpunt 100,100 die een diameter van 20 pixels horizontaal en 50 verticaal heeft”. text(): Dit is een functie die ervoor zorgt dat er een stuk tekst ‘getekend’ wordt. Deze functie krijgt drie parameters (een stuk tekst en twee getallen) mee. De eerste parameter geeft de tekst die op het scherm komt. De tweede en derde parameter zijn de coördinaten van de linkeronderhoek (!!) waar de tekst komt te staan. VB: text(“Hallo”, 0, 30) betekent “teken de tekst ‘Hallo’ op positie 0,30” (de tekst komt dus ‘op de lijn’ met y-coördinaat 30). Dus je code in bestand ‘test.js’ kan er zo uit zien:
// setup() function
function setup()
{
// maak een tekenblad (canvas)
var myCanvas = createCanvas(400, 400); // maak deze 400 (breedte) bij 400 (hoogte)
myCanvas.parent("pongcontainer"); // plaats deze in de div
}
// draw() function. Deze wordt herhaald uitgevoerd.
function draw()
{
rect(50, 50, 100, 100); // het vierkant
ellipse(100, 100, 150, 100); // de cirkel
text("Dit is een stuk tekst!", 20, 60); // het stukje tekst
}
Test je code uit door ‘test.html’ in Firefox te openen. Als het goed is zie je nog steeds niks! Dat komt omdat alles nu in dezelfde kleur (wit) getekend wordt. We moeten eerst nog zeggen in welke kleur we alles willen zien (en ook welk lettergrootte we willen). Daar zijn ook weer functies voor. Dit zijn ‘background()’, ‘fill()’ en ‘textSize()’ voor respectievelijk de achtergrondkleur, de kleur van de vormen en de grootte van de tekst. Kleuren worden in de computer door drie getallen gerepresenteerd, de zogenaamde RGB kleuren. RGB staat voor Red, Green en Blue. De getallen lopen van 0 t/m 255. De drie getallen willen zeggen hoeveel van elk kleur er gemengd moet worden. VB: 255, 255, 255 betekent “neem het maximale van rood, groen en blauw” (dit wordt dus wit). Een tweede voorbeeld 255, 0, 255 wordt paars (meng maximaal rood en maximaal blauw en niks van groen). background() en fill(): dit zijn functies die ervoor zorgen dat er met bepaalde kleuren getekend wordt. Ze krijgen beide drie parameters (getallen) mee, de RGB waardes van een kleur. De functie background() vult de hele achtergrond met die bepaalde kleur en fill() veranderd de kleur van alle vormen erna! VB: background(0, 0, 0) betekent dat de achtergrond zwart is (niks van rood, groen en blauw). fill(255, 0, 0) betekent dat alle vormen die je na deze regel tekent rood zijn (maximaal aan rood, geen groen en blauw). textSize(): Dit is een functie die ervoor zorgt dat de tekst van een bepaalde grootte is. Het heeft 1 parameter (getal) die de grootte aangeeft. VB: textSize(30) betekent dat alle tekst vanaf dat moment op grootte 30 op het scherm zal komen te staan. Je code kan er dus nu zo uit zien:
// setup() function
function setup()
{
// maak een tekenblad (canvas)
var myCanvas = createCanvas(400, 400); // maak deze 400 (breedte) bij 400 (hoogte)
myCanvas.parent("pongcontainer"); // plaats deze in de div
}
// draw() function. Deze wordt herhaald uitgevoerd.
function draw()
{
background(0, 0, 0); // de achtergrond kleur
fill(255, 255, 255); // de vormen hieronder worden wit
rect(50, 50, 100, 100); // het vierkant
ellipse(100, 100, 150, 100); // de cirkel
textSize(30); // de tekst hierna wordt 30 groot (en ook wit!)
text("Dit is een stuk tekst!", 20, 200); // het stukje tekst
}
Let ook op dat de vormen over elkaar getekend worden!! De vormen/tekst worden regel voor regel getekend dus de ellips op regel 13 komt over het vierkant op regel 12.
Op deze pagina staan alle functies die in processing.js gemaakt zijn en waar je dus gebruik van kan maken. Vergeet nooit de regels code af te sluiten met ;!!!!! |
|
| Opdrachten |
|
Beweging in processing.js |
|
|
Aan het begin van de module hebben we gezien hoe je simpele vormen kan tekenen op het canvas. We hebben ook geleerd dat in processing.js twee functies verplicht zijn: setup() en draw(). De setup() functie wordt 1 keer aan het begin uitgevoerd, hier zetten we dus dingen in die uitgevoerd moeten worden voordat het 'daadwerkelijke' programma begint. Het deel van de code die bij het 'daadwerkelijke' deel hoort zetten we in de draw() functie. Deze functie wordt herhaaldelijk aangeroepen. Tot nu toe hebben we in deze draw() functie code gezet om simpele vormen op het scherm te tekenen. Omdat we deze vormen 'hardcoded' neer hebben gezet veranderd er niks en lijkt het alsof er niks gebeurt. Eigenlijk worden de vormen die je gedefinieerd hebt steeds opnieuw getekend. Dit gebeurt echter zo snel en op dezelfde plek dat het lijkt alsof er 'niks' gebeurt. Echter als je ervoor kan zorgen dat de vormen elke keer dat draw() aangeroepen wordt op een iets andere plek getekend worden lijkt het alsof de vormen bewegen. Dit is precies wat we hier gaan doen. We beginnen eerst met het tekenen van een ronde vorm in het scherm. We moeten later de plek (x,y-coordinaten) van de bal aanpassen dus is het slim als we de x- en y-coordinaat opslaan in een globale variabele (waarom?). Deze globale variabele initialiseren we met waardes 0 (het maakt niet uit welke waarde je hier zet want die worden toch aangepast). Pas in de setup() functie zeggen we waar we de bal precies willen plaatsen. Laten we dat op de coordinaten (100, 100) doen. Nu komt de 'magie'! In de draw() functie geven we aan dat we de achtergrond zwart willen, zetten de kleur wit en tekenen de bal (ellipse(ballX,ballY,20,20);). Nadat de bal getekend is op het scherm passen we de x- en y-coordinaat aan. Omdat de x- en y-coordinaat globale waarde zijn wordt de volgende keer dat draw aangeroepen wordt de aangepaste waarde voor ballX en ballY gebruikt. Hierdoor wordt de ball op een andere plek getekend. Het resultaat: de bal beweegt! De code hieronder:
let ballX = 0;
let ballY = 0;
// setup() function
function setup()
{
// maak een tekenblad (canvas)
var myCanvas = createCanvas(400, 400); // maak deze 400 (breedte) bij 400 (hoogte)
myCanvas.parent("pongcontainer"); // plaats deze in de div
ballX = 100;
ballY = 100;
}
// draw() function (repeatedly called)
function draw() {
background(0, 0, 0);
fill(255, 255, 255);
ellipse(ballX, ballY, 20, 20);
if(ballX<200 && ballY>=100)
{
ballX+=10;
}
else if(ballX>=200 && ballY<200 )
{
ballY+=10;
}
}
Opdrachten:
|