Stuiterende Bal

* Uitgedeeld op 30 september 2021.
* Deadline: aftekenen in de les, uiterlijk 28 oktober 2021.
* 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_bal

Start 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:

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.

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 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.

Extra uitdagingen:

Stap 8:

Ga los door extra functionaliteiten toe te voegen! Denk onder meer aan:

Cijfer: 8+

Voorbeeld van eindresultaat: