Hackathon: "HuxFlux"20 september 2017
WOW! …what ARE we going to do? How to create a WOW-feeling in two days? That was our mission!
We were six developers who started thinking about the task ahead. Ended up being five implementing it. We tried to meet up for a short while every day to come up with some cool and fun ideas. There was no lack of ideas. We were all agreeing on that we would like do something that had to do with Svenska Spel. One of the ideas was to enhance the experience of revealing the numbers of a Triss-board.
Another idea was to “gamificate” the Svenska Spel website with achievements and badges that one could earn by playing a game, reading a news post or by verifying one’s email address, to name a few.
However, we ended up mixing two of our favorite ideas. One about a labyrinth-game (tilting a board with a marble into holes). The other one to change the Huxflux-feature of Lotto (random shuffle of numbers). The result of these ideas put together was a kind of pool table with 35 balls and when a ball hit the edge of the screen it exploded until only seven remained.
We started by delegating tasks to everyone so that we knew what we would do. It was decided before we started that we were going to use the ThreeJS rendering library and CannonJS physics engine. And for the base framework we used create-react-app which helps you get started with building a React application.
Maria and David started with creating the actual board in HTML/CSS and their goal was to make it look like a regular Lotto board. Anthon was tasked with setting up the base framework. Ragnar experimented with ThreeJS rendering and Johan looked into the physics mechanism of the Lotto balls.
The second and last day of the Hackathon we had already laid a good foundation so we made the look and feel better in many ways.
Thanks to Johan we got sounds to work in our application. The last thing we managed to add was an animation to lay out all the balls in a row and sort them from lowest to highest.
Device orientation problem
One of the challenges we stumbled upon was the change in orientation of the device so that the balls could roll around on the screen. First, we tried changing the rotation of the actual 3D plane so that the balls would use the gravity to roll down the plane.
However, the problem with this method is that if the user is changing the orientation of the device really fast, the plane could knock the ball out of vision since we worked in 3D space due to changing the planes rotation.
Instead we came up with a method of only changing the gravitation and not the actual plane. This method worked better than the previous one. However, the balls could still roll on top of each other because there was nothing that stopped them, so we added an invisible roof high enough to make the balls able to roll in between the planes.
Sound problem on mobile devices
When we worked on the sound, we noticed that it wasn’t playing on mobile devices, but it worked great on desktop. We learned that this is because mobile devices need user interaction before sound can be played.
ThreeJS comes with a lot of features, including lights and shadows. We aimed for having each ball cast a shadow on the bottom plane from a directional light source. Unfortunately, we could not get it to work so we had to give it up.
Ragnar Petterson, Maria Öberg, David Hansson, Johan Sundberg, Anthon Fredriksson