Buurkracht

Buurkracht is an energy initiative that brings neighborhoods together in order to save energy. I made a low-fidelity prototype that was supposed to encourage children to learn more about the renewables we use and how we can save energy.

The prototype did great, but the teacher did mention it might be too complex and costly to make. This sparked my interest and encouraged me to learn about what turning it into a high-fidelity prototype would entail.


Terrain deformation

One of the key features I had demonstrated in my low-fidelity prototype was the ability to deform the terrain and make it your own. These features could theoretically influence which energy sources one should opt for and offer a more diverse playthrough.

A video of the terrain actively being deformed can be seen here.

During this process I also learned to write my own shaders.

Avatar editor

The avatar editor makes heavy use of scalable vector graphics. This made it easy to dynamically add colors and mix objects.

More options can be seen in this video.

Settings and internationalization

While React made the application easy to reason about due to its componentization, Redux helped state flow throughout the application with ease.

This meant that internationalization became an easy task with the help of react-intl.

Result

I learned a lot about Webpack, React, WebGL, Canvas, Node and many other aspects while building out this application. A video of the result can be seen here, the repository can be found here.