Javascript Challenges
Minigame met p5.js
Binnen de opleiding werd voor het leren van programmeren gebruik gemaakt van korte challenges die ons op een speelse manier uitdaagden om verder te leren. Een van die challenges was het maken van een interactieve minigame en daarbij het framework p5.js gebruiken. De minigame moest er een zijn die een alledaagse situatie leuker maakt of er een humoristische draai aan geeft.
Mijn minigame is gebaseerd op de populaire koffie lokatie binnen school waar vaak wel een lange rij staat voor de barista. Het wachten in de rij is vaak toch wat saai. Om hier iets grappigs mee te doen besloot ik een minigame te maken waarbij je ook nog eens extra korting op de koffie kan verzamelen. Onder het wachten moet je zo veel mogelijk koffiebekers van de toonbank schieten, degene die ver genoeg komt verzameld korting. Te vroeg game over en je spaart die ronde helaas niets.
Bij het maken van deze mini game heb ik heel veel getest en veel opties van p5.js uitgeplozen zodat ik een goed resultaat kreeg. Het was erg uitdagend om alle elementen precies goed samen te laten komen. De bekers moeten voorbijkomen, dit moet uiteraard op de juiste hoogte gebeuren. De bekers moeten versnellen zodat het moeilijker word maar ook niet van 0 tot 100. En daarnaast moeten er verschillen zijn in beloning of niet achteraf.
De bugs bij het programmeren heb ik uiteindelijk opgelost door steeds via tutorials of testen een stapje verder te komen bij het oplossen hiervan. Ondanks dat dit uitdagend was vond ik het een leuk project met een goede uitkomst.
Klok met visuele interacties
De volgende challenge was het maken van een pagina waarop de tijd digitaal zichtbaar was. Een klok dus! Deze klok moest echter niet gewoon simpel een scherm met de tijd zijn er moest ook visueel iets gebeuren. Het moest zichtbaar zijn of het dag of nacht was bijvoorbeeld, en zelfs bewegende elementen bevatten. En dit allemaal met p5.js. Na het maken van deze klok in p5.js hebben we deze nog eens gemaakt maar dan in javascript zelf in plaats van in het javascript framework zodat we ook hiermee leerden werken.
Het onderwerp, de layout en de verdere invulling was compleet vrij. Enkel de genoemde elementen moesten er in plus de vastgelegde feiten van p5.js en later javascript als programmeertaal. Om het een beetje humoristisch te maken voor mijzelf en ook de docent kwam het simpele idee van het maken van een kat en een hamster. Mijn docent bleek namelijk van beide groot liefhebber en dit vond ik een detail om er in te verwerken.
Vooral in de nacht is dit goed zichtbaar omdat het hamstertje dan in zijn loopbal rondzweeft door de ruimte.
Dit was een uitdagende challenge niet enkel vanwege de overstap naar javascript ook vanwege de kleine details die schuil gaan achter iets simpels als een klok. De klok moest wel de juiste tijdzone hebben natuurlijk. Maar daarnaast moest er duidelijk zijn wanneer het dag is en wanneer nacht. Dus ook daar ging een kleine puzzel aan vooraf. Als laatste maar ook wel erg leuke onderdeel natuurlijk het toevoegen van beweging door de ruimte hamster toe te voegen bij het nacht scherm. Dit bleek ook best lastig omdat de hamster natuurlijk niet altijd zichtbaar moest zijn en ook wel in beweging moest blijven.