Stuiterende Bal
* Uitgedeeld op 29 september 2022.
* Deadline: aftekenen in de les, uiterlijk 20 oktober 2022.
* Met deze opdracht denken we dat je zo'n 2 - 4 uur bezig bent tot stap 6. Voor verdere stappen ben je waarschijnlijk wat meer tijd kwijt.
* Onderaan de pagina staat een gif van het beoogde eindresultaat.
* Bronnen bij deze opdracht: Syllabus | P5.js reference
Stap 1:
Zorg ervoor dat je alles van Opdracht 2 al hebt geïnstalleerd / afgerond
Maak een nieuw project in je CSDOSC map door empty-example te kopiëren en een naam te geven als opdracht3_stuiterende_bal.
Je kan dit in de terminal doen door gebruik te maken van het cp -r commando. cp staat voor copy en -r maakt het recursief, zo kopiëer je ook alle bestanden in een map.
Een commando om een nieuw project te maken ziet er dan waarschijnlijk ongeveer zo uit:
cp -r empty-example/ opdracht3_stuiterende_balStart je sketch door in de terminal npm start uit te voeren
In je browser naar keuze kan je nu naar localhost:8001/opdracht3_stuiterende_bal gaan om je sketch in actie te zien.
Wanneer je nu met je favoriete text-editor sketch.js aanpassingen maakt en deze opslaat (ctrl / cmd + s) en je daarna je browser refresh't ctrl / cmd + (shift) + r zie je de aanpassingen in je browser.
(Voor uitgebreidere uitleg zie de CSDOSC documentatie)
Stap 2:
Teken een cirkel van 50 pixels groot met een eigen gekozen kleur in het midden van het canvas. Gebruik de P5.js reference om te kijken welke functie je daarvoor nodig hebt. Als er meerdere mogelijkheden zijn, wat is het voordeel van de een ten opzichte van de ander?
Stap 3:
- Zorg er eerst voor dat je 2 variabelen hebt om de positie van je bal in op te slaan, bijvoorbeeld
ballXenballYen zorg ervoor dat je bal altijd op de coördinaten getekend wordt die in deballXenballYvariabelen staan opgeslagen. - Zorg er nu voor dat de bal beweegt.
- Bepaal de snelheid voor zowel de x- en de y-richting en maak 2 variabelen aan om dit in op te slaan;
xSpeedenySpeed. - Tel ieder frame de
x-enySpeedop bij de x- en y-locatie.
- Bepaal de snelheid voor zowel de x- en de y-richting en maak 2 variabelen aan om dit in op te slaan;
- Verander de snelheid van het balletje. Hoe voorkom je dat de bal ook echt beweegt en er niet telkens een nieuwe bal getekend wordt?
Stap 4:
Zoals je merkt beweegt het balletje na een tijdje uit het beeld. Zorg ervoor dat dit niet gebeurt door het balletje tegen de randen van het scherm te
laten stuiteren. Je kunt dit bereiken met if en else statements en door gebruik te maken van de width en height en xSpeed en ySpeed variabelen.
Zorg ervoor dat de balletjes ook nog goed tegen de randen stuiteren als je andere waardes in createCanvas() plaatst. Zorg er ook voor dat de balletjes precies op de rand stuiteren, dus niet half uit het scherm komen voordat ze stuiteren.
Stap 5:
Maak een tweede balletje met een eigen grootte, kleur en snelheid. Laat deze onafhankelijk van het eerste balletje bewegen.
Stap 6:
Cijfer: 6
Laat elke keer als een van de twee ballen stuitert een geluid horen. Gebruik daarvoor makeNote();
let op: makeNote is een door ons zelf gemaakte functie, buiten de syllabus is daar geen documentatie over te vinden
Stap 7:
Cijfer: 7
Laat de grootte en/of kleur van de bal veranderen bij iedere stuiter
Extra uitdagingen:
Stap 8:
Ga los door extra functionaliteiten toe te voegen! Denk onder meer aan:
- Maak deze performance na in P5js
- Het inbouwen van zwaartekracht
- Laat de ballen tegen elkaar stuiteren
- Kan je een bal vastpakken met de muis en naar een ander punt verslepen?
- Verbind je ballensketch met de huidige stand van de sterren en de maan.
- Laat ook een geluid horen als de balletjes het midden (zowel verticaal als horizontaal) kruisen. Zorg er daarbij voor dat het geluid maar één keer wordt afgespeeld.
Cijfer: 8+
