Creative coding 2019: Group 10 case studies
By Lorenzo Barilla, Federico Lucifora, Elisa Manzoni, Matilde Teani
Web coding has a huge potential, and even if lots of people think of the internet as a mere tool, the ways different sites are programmed and their uses are a very interesting subject of study. Some of these uses can be streaming videos, looking for information or playing games. What if we focused on this last one, changing its context from that of sheer gaming? We would find ourselves standing in front of the concept of “gamification”, which is the application of typical elements of game playing to other areas of activity. In our research, we wanted to dig deeper into the world of advertising. We looked for websites where gaming was implemented to advertise a product, service or company. This is what we found.
The Eyezen challenge is an immersive digital gaming experience that allows you to face the Fnatic eSports star Martin ‘Rekkles’ Larsson. You have two ways to interact with the game: you can either use the facial recognition software that allows you to track your eyes, or you can use your mouse.
If you pick the first option, the website will first ask you to scan your face through your webcam. Afterwards, you are introduced to the mechanics of the game with a tutorial that explains the control system.
You begin the game inside a low-poly, 3D environment, all colored in blue. Your goal is to destroy all the crystals that come towards you. If you use the eye tracking control system, you only need to look at the crystals in order to destroy them, whereas If you play with your mouse, you will need to place your cursor over the crystals. In both game modes, if you press your space bar after a certain period of time has passed, all the crystals around you will be destroyed.
The game was commissioned by Essilor, the world leader in ophthalmic optics, in collaboration with Fnatic, world’s leading competitive eSports organisation, in order to advertise the new Eyezen lenses. Merci-Michel, a French digital production house, was entrusted with the development of the website.
The technology used in the website is WebGL.
Coding is fun is a educational puzzle game that uses gamification to generate interest for coding amongst kids and to teach them the basics of algorithm creation.
It was created by Try Apt, a digital agency located in Oslo, for Equinor, an oil and energy company mostly owned by the Norwegian state.
The main character of the game is a robot called Biip. His spaceship is out of power and the player has to help him finding his way to the wind turbine in the level in order to let him recharge his vehicle and come back home.
The robot can execute simple commands like moving ahead, rotating clockwise or counterclockwise, and it’s possible to create cycles of operations.
There is also a mode where the player can create his own level, save it and challenge his friends to solve it.
The technologies used for this website are WebGL, Three.js and ReactJS .
2018 Foosball World Cup is an interactive game, created to celebrate the FIFA World Cup and all the foosball lovers.
The project was developed by Aquest, who wrote 130.000 lines of JavaScript code to finish the game. The website won the software house various awards.
It’s an online game, where you can play foosball living an international real-time event like the 2018 FIFA World Cup. You can choose your team, while the opposing team is chosen randomly and the gameplay lasts 3 minutes.
Thanks to the AI, which is based on real football rankings, the best teams that participated in the World Cup also display better performance in the online game.
The project uses low poly 3D models for the stadium and the players. The design of the game is very appealing, because the moving ball and the stadium’s limits are illuminated by a dynamic neon light, and the 3D environment reacts and adapts to the selected colors.
The developers used a customized version of Oimo.js, Threejs and Vue.js.
The website is a good example of how gaming can become a part of brand communication, creating a marketing campaign with specific awareness goals.
This website, created by Mercury Development, a leading software development company in the U.S. to promote Mercury Academy, is among the Awwwards nominees of 2019. They boast the implementation of the craziest ideas using the most innovative technologies. They are not just great developers. They also have great trainers teaching students how to create awesome software.
They recreated space atmosphere using music, sounds, animation and 3d space. We can fly through the website on a spaceship using the mouse wheel or the arrow keys.
In the website we can find the training program, signup forms and information about the results achieved by the students graduated and their opinion.
While scrolling the page, there are asteroids along the way. They have to be destroyed hitting the spacebar for you to keep scrolling. At the end of the page the spaceship goes to Mercury Planet, so it’s time to sign up!
Technologies used are: Webpack, WebGL, Three.js, GLSL.
