We were Gents and Wijs, but now you can call us Duke & Grace.

2Ghent

Foreestelaan 1
9000 Ghent

Brussels

Antwerpselaan 40
1000 Brussels

Deze post is gearchiveerd.

Ga naar onze recente blogposts


12 augustus 2014 - Story

Hackathon 2014: Een aMAZEing high-tech game

De komende dagen wijden we telkens één blogpost aan een project van de afgelopen hackathon. Tweede project aan de beurt: A-Maze.

De uitdaging: zoveel mogelijk van de bij Wijs aanwezige technologieën verwerken in één project. Van 3D-printing en Arduino tot sensoren en zelfs een bureaulamp!

Het resultaat: een vette game die hier bij Wijs opgesteld staat, maar die je overal ter wereld kan spelen. De uitdaging is geslaagd!

 

De gebruikte technologieën

Het spel A-Maze is geen nieuw spel. Je moet een balletje van punt A naar punt B brengen door een doolhof te kantelen in alle richtingen. MAAR: dit doolhof staat hier bij Wijs en via een website kan je het van overal ter wereld spelen met je smartphone. Het kantelen van je smartphone laat het doolhof kantelen.

Te gek om waar te zijn? Neen, gewoon Wijs!

 

 

Een grabbel uit de gebruikte technologieën:

3D-printing

Van de kleinste tot de iets grotere onderdelen van ons doolhof besloten we om met een 3D-printer te werken. Dat bleek makkelijker gezegd dan gedaan. Gelukkig waren de mannen van www.airbutlr.com aanwezig om ons op weg te helpen! Alle onderdelen die we moesten printen, moesten we ook eerst ontwerpen. We besloten hiervoor Cinema 4D te gebruiken. Sommigen van ons hadden toch al een ietsiebeetje ervaring met dit programma.

Solderen

Ons doolhof moest de volledige 180° rond zijn as kunnen draaien. De standaard jumpwires bij een Arduino bleken niet lang genoeg te zijn. De snelste en gemakkelijkste oplossing? Enkele kabeltjes aan elkaar solderen! Het lukte goed, ondanks dit niet echt een alledaagse activiteit is voor ons als frontenders en developers.

WebRTC

WebRTC dient om de beelden van een webcam te streamen en het werkt op dezelfde manier als de vroegere download programma’s zoals Limewire. Het is een manier om via P2P-netwerken (= peer to peer, dus gebruiker naar gebruiker) data uit te wisselen, in dit geval video. Je hoeft geen plugin te installeren en er komt geen server aan te pas, waardoor de delay of lag ferm vermindert. Dit hadden we natuurlijk hard nodig, want je wil niet dat het beeld van het doolhof achter komt op de bewegingen van je smartphone, die in dit geval de controller van je game is. Het was leuk om hier eens mee te experimenteren. We kunnen dat niet veel doen, aangezien Internet Explorer dit helemaal niet ondersteunt.

Nexus 5

Aangezien we WebRTC gebruiken als tool om de webcambeelden te streamen hadden we een device nodig dat een goede en moderne webkit browser aan boord heeft. In ons devicelab hebben we een Nexus 5 hangen, wat natuurlijk een stuk praktischer was dan een Macbook boven het doolhof hangen.

Houtbewerking

We konden niet alles 3D-printen, enkel al door de lange duur ervan. Daarom hebben we het frame waar ons doolhof op rust, gebouwd met goeie ouderwetse nagels, vijzen en houten balken en platen.

Johnny-five

Dit is een open source JavaScript Arduino programming framework. Een hele mond vol. Het dient vooral als plugin om heel gemakkelijk de Arduino te besturen via node.js. Het bijkomende voordeel is dat je de Arduino met JavaScript kan besturen in plaats van C/C++, wat voor ons als webdudes wat gemakkelijker is.

Node.js

JavaScript dient voor front-end development van websites. Node.js kan je dan eigenlijk de back-end variant noemen. Het zorgt voor snelle Input/Output (I/O) events zoals web calls, netwerk communicatie, files … Node.js is gebaseerd op de V8 JavaScript engine van Google. Die V8 engine genereert eigenlijk machine-code uit JavaScript code, waardoor je er applicaties mee kan bouwen. JavaScript is heel eenvoudig om te leren en wordt onder andere gebruikt voor iets dat we Asynchronous JavaScript & XML noemen, kortweg AJAX. Vooral het “Asynchronous” is hier belangrijk. Bij klassieke JavaScript wacht je CPU om verder te gaan tot er een respons komt van het script. Bij AJAX is dit niet langer het geval. De CPU kan dus verder, in afwachting van de respons. In principe weten we niet echt in detail waarom Node.js ervoor zorgt dat alles zo snel gaat. We weten enkel dat er een hoop JavaScript en C++ in zit.

socket.io

Zorgt voor een super snelle communicatie tussen de gebruiker en de server. In ons geval zorgt dit ervoor dat de server onmiddellijk op de hoogte is van de gebruiker die zijn iPhone beweegt of op de pijltjestoetsen tikt om het spel te besturen.

Een bureaulamp

Heel high-tech!

Arduino

  • 2 servo motoren
  • 1 Arduino Uno
  • 1 lichtsensor
  • 1 Liquid-crystal display
  • 41 jumpwires
  • 2 breadboards

It’s alive, aliiiiive

Het integreren van zoveel verschillende technologieën en daar effectief in slagen doet elke geek watertanden. Het bleek echter niet zo evident. Nog tot de laatste uurtjes van de hackathon bleef het een twijfelgeval. Dit is hoe team A-Maze erin slaagde.

1. Ontwerp

Eerst werd het doolhof zelf getekend. Het moest uitdagend genoeg zijn.

2. Prototype gebouwd

En wat voor een prototype!

3. Bouwpakket-lijst opgesteld

Het werd al snel duidelijk dat de 3D-printer niet in staat zou zijn om alles in één geheel te printen. We maakten een bouwplan op met de verschillende stukken die we zouden nodig hebben. Daarnaast moest ook het ondersteunende frame gebouwd worden. Ook daar maakten we een Ikea-stijl bouwplan voor.

4. Taakverdeling

  • Simon, Jannick en Tom: bedenken & uittekenen
  • Simon: Design van de website
  • Tom: 3D-modellen + printen
  • Jannick & Wouter: Arduino + werking (node.js en socket.io)
  • Hannes: Ondersteuning Arduino + presentatie

5. Alle kleine onderdeeltjes apart maken

Vertrekkend vanuit onze fameuze bouwplannen, begonnen we met het maken van elk klein onderdeeltje. Voorbeelden daarvan zijn:

  • Het doolhof in 3D printen, onderdeeltje per onderdeeltje
  • Servo’s (motortjes) laten werken met de pijltjes
  • Score op het LED-scherm laten verschijnen
  • De beelden zo snel mogelijk gestreamd krijgen
  • Design van de website
  • Enzovoort, enzoverder

6. Alles samenvoegen

Wat opnieuw moeilijker bleek dan gedacht.

7. Problemen oplossen die opdoken bij het samenvoegen

Zo was bijvoorbeeld het totale gewicht te zwaar voor de Arduino motortjes. Ook was er geen stroom genoeg om alles aan 1 Arduino te hangen.

De belangrijkste ‘learnings’

De hackathon is bedoeld om te experimenteren, te ontdekken en technologie te verkennen. Maar het belangrijkste is dat we bijleren.

Een aMAZEing boodschappenlijstje ...

  • Je mag niet zomaar de Brico terug binnenlopen met hout dat je al eerder kocht. Zeker niet zonder kasticketje …
  • 3D-printen duurt best wel lang en maakt vervelende geluiden.
  • Het nadeel aan 3D-printen: 2 uur wachten voor een heel klein stukje en dan merken dat het mislukt is.
  • Arduino’s zijn best wel eigenzinnig. Het laten doen wat je wil, vraagt soms wat geduld en creativiteit.
  • Simon kent zijn eigen kracht niet en breekt voortdurend stukjes. Geprint 3D-materiaal uit de buurt houden, dus.
  • Met véél Redbull, weinig slaap en een portie geluk is een aMAZEing project net te doen in 48 uur.

Heb jij het opgemerkt?

Als je goed kijkt, valt er een ‘W’ te bespeuren in het doolhof.

Tom Hudders

Tom Hudders

Designer

Share this insight on

It's time to stop scrolling and start making.

Let's get in touch

Call us +32 9 335 22 80