kamelenrace

Geïntegreerde Proef – door Wanne

📘 Voorwoord

Voor u ligt de onepager van mijn GIP-project, waar in ik een virtuele kamelenrace heb nagebouwd, geïnspireerd door het bekende principe van de kamelenrace op de kermis. Het idee voor dit project kwam tot stand dankzij dhr. C. Gratessolle en dhr. B. Vervoort. Dhr. B. Vervoort had namelijk kasten liggen die perfect geschikt waren om een kamelenrace mee te creëren, en dhr. C. Gratessolle raadde het project aan, gezien het een uitstekende kans zou zijn om mijn technische kennis verder uit te breiden.

Aangezien ik zelf leerling ben in de richting ICW (informatie en communicatie wetenschappen), draaide dit project vooral om het gebruik van Raspberry Pi's, een technologie die ik niet eerder had toegepast. Dit zorgde ervoor dat ik me moest verdiepen in nieuwe leerstof, wat het project zowel uitdagend als leerzaam maakte. Door deze nieuwe technologieën en concepten te integreren, kreeg ik de kans om mijn vaardigheden op het gebied van hardware en software te versterken en mijn project naar een hoger niveau te tillen.

Het resultaat is een werkend systeem dat de ervaring van een kamelenrace virtueel nabootst, wat niet alleen mijn technische capaciteiten heeft vergroot, maar ook mijn creatief denken heeft aangescherpt. In deze onepager neem ik u graag mee op mijn reis van idee tot eindresultaat, waarbij ik u laat zien hoe het project tot leven is gekomen.

🎯 Inleiding

Het idee voor dit project is ontstaan vanuit de observatie dat er op de speelplaats nauwelijks interactie is tussen de leerlingen. De meesten staan of zitten gewoon te praten in kleine groepjes. Sommigen voetballen nog, maar daar stopt het dan ook. Ik wilde daar verandering in brengen door iets te creëren dat leerlingen echt samen konden doen — zo ontstond het idee van de Kamelenrace.

Mijn visie was simpel: een leuk, interactief spel ontwikkelen dat leerlingen actief samenbrengt. Op die manier zou er meer sociale interactie ontstaan, wat meteen ook kansen biedt om nieuwe vrienden te leren kennen.

De technische uitwerking bleek helaas minder eenvoudig. Ik moest werken met bekende webtalen zoals HTML, CSS en JavaScript, maar ook met een Raspberry Pi en een Raspberry Pi Pico. Die zouden de signalen moeten verwerken die vanuit mijn kastje naar het programma gestuurd worden. Het probleem was dat ik weinig tot geen ervaring had met Raspberry’s, en dus geen idee had hoe ik daarmee moest werken.

Met de kennis die ik aan het begin van dit project had, zou ik er nooit in geslaagd zijn om het volledig te realiseren. Ik wist op voorhand dat het een zwaar traject zou worden, en dat ik het zeker niet mocht onderschatten. Toch wilde ik alles geven, zelfs als dat betekende dat ik keer op keer tegenslagen moest overwinnen. Elke keer zocht ik opnieuw naar een oplossing.

Het uiteindelijke resultaat is jammer genoeg niet helemaal wat ik gehoopt had. In theorie had ik een duidelijk plan en werkte alles... behalve de communicatie tussen de Raspberry Pi en de Pico. Ik heb uren gezocht naar oplossingen, maar zonder succes. Zelfs toen ik probeerde mijn code van Python om te zetten naar HTML, bleef het probleem bestaan. De hardwarekant werd uiteindelijk te complex. Tot overmaat van ramp crashte één van mijn Raspberry’s, waardoor ik al mijn voortgang kwijt was.

Door die tegenslagen én de druk van een ander belangrijk project met een strakke deadline, heb ik uiteindelijk beslist om deze Kamelenrace niet verder af te werken. Toch wil ik in deze onepager graag mijn visie toelichten en de functionaliteiten laten zien die ik wél heb kunnen realiseren.

burger

❗ Probleemstelling

Vraagstelling

Voor mijn tweede GIP-project wilde ik bewust iets kiezen met meer uitdaging. Iets dat echt anders was dan mijn vorige project en waar ik vooral nieuwe dingen uit kon leren om mijn kennis verder uit te breiden.

Daarom ben ik bij dhr. C. Gratessolle langsgegaan om te kijken of hij een geschikt project voor mij had. En inderdaad: hij stelde me de Kamelenrace voor. Als liefhebber van kermisspelletjes – vooral van de grijpkraan – sprak dit idee me meteen aan. Toen ik hoorde dat dit project zou werken met nieuwe, complexe leerstof, wist ik meteen dat dit het juiste was.

Gelukkig had dhr. B. Vervoort de behuizing van de Kamelenrace al uitgewerkt, dus ik hoefde niets grafisch meer te ontwerpen. Daardoor kon ik me volledig focussen op het technische aspect en mij echt verdiepen in nieuwe technologieën en functionaliteiten.

Verkoopsysteem

Voor de uitwerking van mijn race besloot ik te starten met een webpagina. Met behulp van JavaScript wilde ik de nodige functionaliteiten toevoegen, zoals het laten bewegen van de kamelen, het opbouwen van de racebaan, en nog veel meer.

De laptop waarop deze webpagina draait, wordt verbonden met een Raspberry Pi. Elke kamelenkast beschikt over een eigen Raspberry Pi Pico, die verbonden is met verschillende drukknoppen in de kast. Die knoppen registreren hoeveel punten de gebruiker heeft gescoord. De Pico’s sturen deze informatie via het netwerk naar de Raspberry in de laptop, waar ik met een Python-script zorg dat de kamelen op het scherm daadwerkelijk gaan bewegen volgens de gescoorde punten.

🎯 Doel

Het doel van dit project was niet alleen om de speelplaats leuker en interactiever te maken, maar ook om mezelf inhoudelijk uit te dagen en mijn kennis aanzienlijk te vergroten. Vooraf had ik nog nooit gewerkt met Raspberry Pi’s, en eerlijk gezegd wist ik er vrijwel niets van. Juist daarom zag ik dit project als de ideale kans om iets compleet nieuws te leren en mijn vaardigheden uit te breiden.

Concreet was het de bedoeling om een kamelenrace van op de kermis na te bootsen, met behulp van verschillende programmeertalen en een combinatie van Raspberry Pi’s en Raspberry Pi Pico’s. Het uiteindelijke resultaat moest een interactief spel zijn waar leerlingen tijdens de pauzes samen plezier aan kunnen beleven.

Daarnaast wilde ik het spel niet saai of te simpel maken. Ik heb geprobeerd er een aantal leuke en speelse elementen aan toe te voegen zodat het aantrekkelijk blijft voor de doelgroep. Ook heb ik veel aandacht besteed aan het ontwerpen van een duidelijke en uitnodigende interface. Zo hoopte ik niet alleen iets technisch goed werkends te maken, maar ook iets dat echt aanspreekt en uitnodigt om mee te doen.

verkopen

🛠️ Plan van aanpak

Aangezien dit project vrij omvangrijk was, wist ik dat een gestructureerde aanpak absoluut noodzakelijk zou zijn. Daarom ben ik gestart met een kort maar duidelijk plan: ik ging rustig zitten met pen en papier, en maakte een overzicht van alle belangrijke onderdelen die moesten worden uitgewerkt. De kernpunten van mijn project waren: het bouwen van een functionele webpagina, het leren werken met de Raspberry Pi om data door te sturen, en het ontwikkelen van een manier om de kamelen daadwerkelijk te laten bewegen.

Al snel realiseerde ik me dat het geen goed idee zou zijn om meteen te beginnen met de Raspberry Pi’s. Ik had nog geen duidelijk beeld van hoe de rest van het systeem eruit zou zien, wat de kans op verwarring alleen maar groter zou maken. Daarom besloot ik om eerst te starten met het opbouwen van de webpagina. Een stevige basis leggen zou de rest van het proces veel overzichtelijker maken.

Mijn eerste stap was dus het ontwerpen van de webinterface met behulp van HTML, CSS en JavaScript. In het begin wist ik nog niet precies hoe ik de kamelen zou laten bewegen, maar ik vertrouwde erop dat ik gaandeweg een geschikte oplossing zou vinden. Door op deze manier te werk te gaan — stap voor stap en telkens met een duidelijk doel voor ogen — kon ik beter focussen en bleef het project behapbaar.

⚙️ Realisatie

Door te starten met de webpagina kreeg ik niet alleen meer structuur in de technische uitwerking, maar ook in mijn hoofd. Gaandeweg werd steeds duidelijker hoe ik het project zou aanpakken en welke stappen ik moest zetten. De kern van de webpagina draait vooral rond het JavaScript-bestand — daar zitten alle belangrijke functionaliteiten in verwerkt.

Zoals ik had gehoopt, kreeg ik tijdens het bouwen al snel een idee over hoe ik de kamelen kon laten bewegen. Op mijn webpagina had ik een racebaan gemaakt die niet de volledige breedte van het scherm innam. Daardoor kwam ik op het idee om de beweging van de kamelen te simuleren met behulp van percentages. Elke kameel zit in een aparte div, waardoor ik hun positie via de CSS-stijl right kon aanpassen. Bij elke stap liet ik de kamelen 5% verder schuiven naar rechts.

Daarnaast heb ik een if-statement toegevoegd die controleert of een kameel 95% of meer van de racebaan heeft afgelegd. Zo kan het systeem detecteren wanneer een kameel de finishlijn bereikt, en dus wie de winnaar is.

In deze testfase gebruikte ik knoppen op mijn laptop om de bewegingen te simuleren. Toen kwam de gedachte bij me op: "Zou het mogelijk zijn om toetsen virtueel in te drukken via Python, zonder dat ik ze fysiek aanraak?" Na wat opzoekwerk ontdekte ik de keyboard-module, waarmee ik precies dat kon doen. Dankzij deze module kon ik toetsen simuleren via code — een essentieel onderdeel voor de communicatie tussen mijn webpagina en de Raspberry Pi.

Nu restte mij nog één grote stap: leren werken met de Raspberry Pi’s en ze koppelen aan het geheel. Als dat zou lukken, zou mijn project helemaal tot leven komen.

eten

🧪 Softwares

Slimme Weegschaal
Voor de opbouw van de website werd gestart met HTML, de standaardtaal voor het structureren van webpagina’s. Daarna werd CSS gebruikt om alles visueel aantrekkelijk en gebruiksvriendelijk te maken. Zonder deze styling zou de site er kaal en saai uitzien, maar met een doordacht ontwerp krijgt de pagina een moderne en verzorgde uitstraling. Deze combinatie vormde de basisstructuur van het project. Vanuit die fundering ben ik verder gegaan met het toevoegen van de nodige functionaliteiten, die ik koppelde met andere programmeertalen.
Slimme Weegschaal

In deze pagina werd volop gebruik gemaakt van JavaScript. In mijn vorige GIP-projecten omschreef ik JavaScript vooral als de tussentaal tussen de front-end en de back-end. Maar dit project toont duidelijk aan dat JavaScript veel meer is dan dat.

JavaScript neemt hier een groot deel van de functionaliteit voor zijn rekening: het laat de kamelen bewegen, start de race, en regelt allerlei andere interacties. Je zou kunnen zeggen dat dit project voor zo’n 70% op JavaScript draait.

Maar het blijft niet alleen bij functionaliteit. Dankzij JavaScript kon ik ook de pagina visueel aantrekkelijker maken. Door dynamisch classes toe te voegen, kon ik bijvoorbeeld teksten of kamelen aanpassen en laten bewegen. Zelfs de animaties van de kamelen zijn volledig met JavaScript tot stand gekomen.

Kortom: dit project bewijst dat JavaScript veel meer is dan enkel een ‘tussenlaag’. Het is een krachtige tool om zowel leven als uitstraling aan je website te geven.


Slimme Weegschaal

Python mocht in dit project zeker niet ontbreken. Deze programmeertaal speelde een belangrijke rol, zowel op mijn laptop als bij het aansturen van de Raspberry Pi’s.

Een van de redenen waarom ik voor Python koos, was omdat ik een functie nodig had die toetsen op mijn laptop kon simuleren — zonder ze echt in te drukken. Python bleek hiervoor perfect geschikt, want de mogelijkheden met deze taal zijn bijna eindeloos. Het biedt veel flexibiliteit en is ideaal om creatieve oplossingen mee uit te werken.

Daarnaast was Python essentieel voor het programmeren van de Raspberry Pi’s. Deze kleine computers werken namelijk standaard met Python, dus was het vanzelfsprekend om hiermee aan de slag te gaan. Al snel ontdekte ik dat het programmeren van de Pi’s veel complexer was dan verwacht. De leerstof was erg uitgebreid, en ondanks maandenlang proberen bleef het een grote uitdaging. De codes werden steeds ingewikkelder en op een bepaald moment kon ik het moeilijk nog volgen.

Toch blijft Python een onmisbaar onderdeel van dit project. Het is de kern van de communicatie met de Raspberry Pi’s, en biedt talloze mogelijkheden — zelfs als het resultaat niet volledig was wat ik gehoopt had.


🖥️ Hardware: Raspberry Pi & Raspberry Pi Pico

Voor dit project hebben we twee verschillende soorten hardware bekeken: de Raspberry Pi en de Raspberry Pi Pico. Hieronder geven we een gestructureerde uitleg over elk apparaat met hun toepassingen binnen ons project.

Raspberry Pi

Raspberry Pi

💰 Prijs

Een Raspberry Pi kost gemiddeld tussen de €40 en €70, afhankelijk van het model en geheugen. Voor dit project heb ik gekozen voor een raspberry pi 4 model b 4GB deze kost rond de 65 euro.

❓ Waarom gebruiken?

We kiezen voor de Raspberry Pi omdat het een volledig besturingssysteem ondersteunt en dus perfect is als lokale server of als centrale hardware voor een project met veel functionaliteit. In tegenstelling tot een Arduino beschikt de Raspberry Pi over een eigen besturingssysteem (zoals Raspberry Pi OS) en ondersteunt hij netwerkverbindingen via Ethernet of WiFi.

Een Arduino is een microcontroller, wat betekent dat het enkel bedoeld is om één specifieke taak uit te voeren, zoals het aansturen van een sensor of het controleren van een motor. Een Arduino is ideaal voor eenvoudige, hardwarematige taken, maar het mist de rekenkracht, geheugen en netwerkmogelijkheden om een volledige webapplicatie te draaien of complexe dataverwerking te doen.

In ons project was het noodzakelijk om data – zoals gebruikersinformatie en bestellingen – via het netwerk door te sturen naar een database. Dit vereist netwerkondersteuning, beveiligde gegevensoverdracht en bestandsbeheer. Dat is allemaal perfect mogelijk met een Raspberry Pi, omdat die functioneert als een volwaardige computer. Hiermee konden we eenvoudig onze serveromgeving opzetten (bijvoorbeeld met Apache of XAMPP), een database koppelen en onze PHP-webapplicatie lokaal hosten.

Kortom: een Arduino zou veel te beperkt zijn voor wat wij nodig hadden. Dankzij de flexibiliteit en kracht van de Raspberry Pi konden we alles uitvoeren wat nodig was voor ons digitale bestelsysteem, inclusief netwerkverkeer, data-opslag en serverbeheer.

🛠️ Technische uitleg

De Raspberry Pi 4 Model B met 4GB RAM is een compacte, maar krachtige single-board computer die uitstekend geschikt is voor uiteenlopende projecten. Deze versie beschikt over een snelle quad-core processor en voldoende geheugen om meerdere taken tegelijk uit te voeren. Dankzij de Gigabit Ethernet en dual-band WiFi kan de Raspberry Pi snel en stabiel communiceren met andere apparaten via het netwerk, wat essentieel is voor ons project waarin data over het netwerk verstuurd moet worden.

Daarnaast biedt de Pi verschillende USB-poorten voor het aansluiten van randapparatuur en een microSD-slot voor opslag van het besturingssysteem en data. Met zijn 40-pins GPIO-header is de Raspberry Pi ook goed uitbreidbaar met sensoren en andere hardwarecomponenten.

De Raspberry Pi draait op een volledig besturingssysteem, zoals Raspberry Pi OS of Ubuntu, waardoor het mogelijk is om webservers, databases en andere software te installeren die nodig zijn voor een robuuste en flexibele oplossing. Dit maakt de Raspberry Pi uitermate geschikt als lokale server en centrale hardware in ons project.

Kortom, de combinatie van krachtige hardware, netwerkmogelijkheden en flexibiliteit maakt de Raspberry Pi 4 Model B (4GB) de ideale keuze voor onze toepassing, in tegenstelling tot een Arduino die een microcontroller is en minder geschikt is voor netwerkcommunicatie en complexe software.

Raspberry Pi Pico

Raspberry Pi Pico

💰 Prijs

Gelukkig is de raspberry pi pico goedkoper. Deze kost maar ongeveer 6 euro wat het zeer toepasselijk maakt om deze aan de kast te hangen.

❓ Waarom gebruiken?

De Raspberry Pi Pico is ideaal voor kleine hardwareprojecten waarbij je eenvoudige taken moet uitvoeren, zoals het meten van sensoren of het aansturen van LEDs. Dit microcontrollerbord is compact, betaalbaar en bijzonder krachtig dankzij de dual-core ARM Cortex-M0+ processor.

Wij kozen bewust voor de Raspberry Pi Pico omdat het uitstekend geschikt is voor dergelijke taken en bovendien de mogelijkheid biedt om te programmeren in MicroPython. Dit was een belangrijk voordeel, omdat ik al ervaring had met Python, waardoor het ontwikkelen van de code veel sneller en eenvoudiger verliep. De Pico maakt snelle prototyping mogelijk en is heel flexibel door de ondersteuning van zowel C/C++ als MicroPython.

In vergelijking met andere microcontrollers, zoals de Arduino Pico, biedt de Raspberry Pi Pico meer programmeeropties en een hogere verwerkingssnelheid, wat bijdraagt aan een efficiëntere en prettigere ontwikkelervaring. Dit maakt het de perfecte keuze voor ons project, waarin we kleine hardwarecomponenten moesten aansturen en tegelijkertijd complexe data moesten verwerken.

🛠️ Technische uitleg

De Raspberry Pi Pico is uitgerust met een RP2040 microcontroller, een dual-core ARM Cortex-M0+ processor die draait op 133 MHz. Dit zorgt voor voldoende rekenkracht om real-time sensordata te verwerken en apparaten aan te sturen met een lage latentie. De Pico beschikt over 264 KB aan interne SRAM en 2 MB aan externe flashopslag, wat voldoende is voor de meeste embedded toepassingen.

Dankzij de uitgebreide GPIO-pinnen (General Purpose Input/Output) kan de Pico diverse sensoren, motoren en andere hardwarecomponenten eenvoudig aansturen. Het board ondersteunt communicatieprotocollen zoals I2C, SPI en UART, wat de integratie met andere apparaten soepel maakt.

Een van de sterke punten van de Pico is de mogelijkheid om te programmeren in MicroPython, een lichte variant van Python die speciaal is ontworpen voor microcontrollers. Dit maakt het programmeren intuïtief en toegankelijk, zeker als je al ervaring hebt met Python. Hierdoor kunnen we snel en efficiënt hardware aansturen zonder complexe low-level code te schrijven.

Door deze combinatie van krachtige hardware en gebruiksvriendelijke programmeermogelijkheden is de Raspberry Pi Pico een uitstekende keuze voor het bouwen van kleine, maar veelzijdige embedded projecten.

🔧 Technische uitleg

Video:

Uitleg

Hier zie je hoe mijn web pagina er uit ziet. Je kan ook zien hoe alles werkt je ziet de kamelen leuk bewegen. Ook zie je een timer die je tijd bij houdt en nog een score bord dat de score per kameel bewaart.

Screenshots / Foto's technische details

Technische screenshot 1
De functie moveCamel zorgt ervoor dat een kameel op het scherm vooruit beweegt tijdens een race. Eerst controleert de functie of de race daadwerkelijk aan de gang is; als dat niet het geval is, stopt de functie meteen. Daarna wordt met de meegegeven index de juiste kameel opgezocht uit een lijst. Als die kameel bestaat, wordt de huidige positie van de kameel bepaald aan de hand van de CSS-waarde right, die aangeeft hoe ver de kameel van de rechterkant van het scherm staat. Vervolgens wordt deze positie met 5 procentpunten verhoogd, waardoor de kameel iets naar links verschuift. Deze nieuwe positie wordt meteen toegepast, waardoor de beweging zichtbaar wordt. Daarnaast wordt het element voor het weergeven van een winnaarbericht opgehaald, wat waarschijnlijk gebruikt wordt om later te bepalen of er een winnaar is. Op deze manier zorgt de functie ervoor dat kamelen stap voor stap vooruit bewegen, zolang de race bezig is.
Technische screenshot 2
Deze functie handelt het indrukken van toetsen op het toetsenbord af. Wanneer er een toets wordt ingedrukt, wordt eerst gecontroleerd of het event-object beschikbaar is, en zo niet, wordt het alsnog opgehaald. Vervolgens kijkt de functie welke toets is ingedrukt via de key-eigenschap van het event. Afhankelijk van welke toets dat is, wordt een bijbehorende actie uitgevoerd: als de ‘s’-toets wordt ingedrukt, start de race; met de ‘d’-toets wordt de race gereset. Daarnaast zijn er toetsen toegewezen om specifieke kamelen te laten bewegen: ‘a’ voor de eerste kameel, ‘z’ voor de tweede, ‘e’ voor de derde en ‘r’ voor de vierde. Hierdoor kunnen gebruikers via het toetsenbord de race starten, resetten of individuele kamelen vooruit laten bewegen.
Technische screenshot 3
Deze code gebruikt de keyboard-module om automatisch toetsenbordinvoer te simuleren. In een lus die 20 keer wordt herhaald, worden achtereenvolgens de toetsen 'a', 'z', 'e' en 'r' ingedrukt en weer losgelaten. Na elke toets wordt een korte pauze van 0,2 seconden ingebouwd om de toetsen niet te snel achter elkaar te activeren. Nadat de cyclus van 20 herhalingen is afgerond, wordt een bericht geprint dat de 20 bewegingen voltooid zijn en dat het proces opnieuw kan beginnen. Vervolgens wacht het programma één seconde voordat het eventueel opnieuw zou kunnen starten. Zo wordt er automatisch een reeks toetsencombinaties uitgevoerd met tussenpozen, wat handig kan zijn voor het aansturen van bijvoorbeeld een race- of besturingssysteem via toetsenbordinput.
Technische screenshot 1
De functie resetRace zorgt ervoor dat de race opnieuw kan beginnen door alles terug op de beginstatus te zetten. Eerst worden alle kamelen in een lijst doorlopen. Voor elke kameel wordt de eventuele winnaar-animatie verwijderd, en de positie wordt teruggezet naar het startpunt, namelijk 5% van de rechterkant van het scherm. Ook wordt de klasse animation tijdelijk verwijderd, zodat de animatie later opnieuw kan worden gestart.

Na een korte vertraging van 50 milliseconden wordt die animatieklasse opnieuw toegevoegd. Deze kleine vertraging is nodig om ervoor te zorgen dat de browser de animatie opnieuw herkent en afspeelt.

Daarna wordt de variabele raceInProgress op false gezet, zodat de race niet meer actief is en opnieuw gestart kan worden. Ook wordt de weergave van de timer teruggezet naar “Start in: 3” en wordt een eventuele lopende countdown stopgezet met clearInterval. Ten slotte wordt ook countdownInProgress op false gezet om aan te geven dat er geen countdown meer actief is, en wordt de raceklok stopgezet met de functie stopRaceTimer().

Met deze functie wordt het hele racesysteem netjes gereset, klaar voor een nieuwe ronde.
Technische screenshot 2
De functie startRace is verantwoordelijk voor het starten van de race en bevat een korte aftelperiode voordat de race daadwerkelijk begint. Als er al een race bezig is of als er al een countdown loopt, stopt de functie direct om te voorkomen dat de race per ongeluk meerdere keren tegelijk wordt gestart.

Als dat niet het geval is, wordt de countdown gestart. Deze begint bij 3 seconden en wordt zichtbaar gemaakt op het scherm met de tekst “Start in: 3”. Vervolgens wordt met behulp van setInterval elke seconde de countdown met 1 verminderd, en de bijbehorende tijd wordt telkens opnieuw weergegeven.

Zodra de countdown op nul komt, wordt de interval gestopt met clearInterval, de tekst op het scherm verandert in “Go!”, en de race wordt officieel gestart door de statusvariabele raceInProgress op true te zetten. Tegelijkertijd wordt aangegeven dat de countdown voltooid is door countdownInProgress weer op false te zetten.

Als laatste wordt ook de racetimer gestart met de functie startRaceTimer(), zodat vanaf dat moment de tijd van de race kan worden bijgehouden.

Deze functie zorgt dus voor een gecontroleerde start van de race, inclusief visuele countdown en het activeren van de tijdmeting.
Technische screenshot 3
Dit codefragment controleert of een kameel de finishlijn heeft bereikt. Dat gebeurt door te kijken of de nieuwe right-positie van de kameel (in procenten) groter dan of gelijk is aan 95%. Als dat zo is, betekent het dat de kameel ver genoeg naar links is bewogen om als winnaar te worden beschouwd.

Zodra een kameel gewonnen heeft, wordt de animatieklasse verwijderd en vervangen door een speciale winner-klasse om bijvoorbeeld een visueel effect (zoals een trofee of gekleurde gloed) te tonen. Tegelijkertijd wordt de race stilgezet door raceInProgress op false te zetten, zodat andere kamelen niet meer kunnen bewegen.

Daarna wordt een bericht op het scherm getoond waarin vermeld staat welke kameel gewonnen heeft. Dit gebeurt door de naam uit te lezen via camel.dataset.name en die in te voegen in een tekstmelding, die vervolgens zichtbaar wordt gemaakt met de klasse show.

Ook wordt de racetimer gestopt, en de score van de winnende kameel wordt bijgewerkt. De ID van de winnende kameel (zoals “camel1” of “camel2”) wordt gebruikt om de bijbehorende score met 1 te verhogen in het scores-object. Vervolgens wordt het scorebord geüpdatet zodat de nieuwe score zichtbaar is.

Tot slot wordt na een korte pauze van 3 seconden de winnaarboodschap weer verborgen en wordt de hele race gereset met de functie resetRace(), zodat het spel klaar is voor een nieuwe ronde.

📚 Wat hebben we geleerd?

Uit dit project heb ik geleerd dat JavaScript veel meer is dan alleen een 'tussentaal' voor eenvoudige webinteracties. Het is een volwaardige programmeertaal waarmee je complexe en interactieve toepassingen kunt bouwen. Ik heb ervaren hoe krachtig JavaScript kan zijn als je het inzet om dynamiek en logica in een project te brengen — van het beheren van animaties tot het aansturen van gebruikersinteracties via het toetsenbord.

Daarnaast heb ik waardevolle inzichten opgedaan over het praktisch toepassen van Python-scripts. Het was leerzaam om te zien hoe een Python-programma op de achtergrond kan draaien en op een subtiele, maar essentiële manier invloed uitoefent op de werking van een systeem. Deze samenwerking tussen een frontend-taal (JavaScript) en een backend-systeem (via Python) heeft mijn begrip van softwarearchitectuur verbreed.

Verder heb ik meer geleerd over de mogelijkheden van de Raspberry Pi. Voorheen zag ik dit vooral als een simpel educatief apparaat, maar nu besef ik hoeveel je er eigenlijk mee kunt doen. Of het nu gaat om automatisering, hardware-aansturing of het opzetten van een klein, zelfstandig systeem — de Raspberry Pi biedt veel mogelijkheden voor creativiteit en praktijkgerichte toepassingen.

Kortom, dit project heeft mijn technische vaardigheden op meerdere vlakken verdiept en mijn kijk op programmeertalen en hardwaretoepassingen aanzienlijk verruimd.

✅ Besluit

Hoewel het eindresultaat van het project helaas niet volledig is afgerond, kijk ik er toch met trots op terug. Het onderdeel waarbij data moest worden doorgestuurd via de Raspberry Pi heb ik technisch nog niet volledig onder de knie gekregen. Dat was voor mij persoonlijk best frustrerend, want ik keek erg uit naar dit project en had gehoopt het tot in de puntjes af te werken. Het niet volledig kunnen afronden voelt als een gemiste kans — een kleine steek in het hart, om eerlijk te zijn.

Toch is het belangrijk om niet alleen te focussen op wat niet gelukt is. In plaats daarvan kies ik ervoor om te kijken naar wat wél bereikt is — en dat is heel wat. Het project werkt in grote lijnen zoals bedoeld: de visuele kant, de interactie, de logica en het algemene verloop functioneren goed. Alleen het doorsturen van data vormt nog een ontbrekend stuk. Maar dat betekent ook dat het project grotendeels staat, en dat is op zichzelf al een resultaat om trots op te zijn.

Tijdens dit traject heb ik enorm veel geleerd: over JavaScript, Python, animaties, toetsenbordinteracties, en hoe je hardware zoals de Raspberry Pi praktisch kunt inzetten. De uitdagingen hebben mijn vaardigheden aangescherpt en mijn zelfvertrouwen als maker versterkt. Ik geloof dan ook sterk dat met een beetje begeleiding en samenwerking dit project in korte tijd volledig afgerond kan worden.

Kortom, ondanks dat het niet 100% af is, kijk ik met voldoening terug op wat ik wél heb gerealiseerd — en dat gevoel weegt zwaarder dan het onvoltooide deel.