Gabriele Dal Cengio

Full Stack Developer

Syshacks 2020 | Const-elation

Hackathon Project | July 2020

Last instagram story of all submissions before shutting off the vm


SoSY Hackademia was a hackathon hosted on July 11th - 13th by SFU Software Systems Student Society. The focus of the hackathon was to make a website with the theme of ‘space’ in 2 days.

My partner Alvin and I began to brainstorm project ideas. We landed on an interactive canvas where one can draw and have their drawing sent to a community space to follow the goals of web 2.0. Each drawing is part of an n-body physics simulation as if they were constellations in a solar system.

final project
Initial canvas to submit drawing constellation


As I was learning gcloud and using PHP for work, we decided on these technologies to create the project. In gcloud I set up an unnecessarily expensive compute engine with free trial credits to host the backend PHP code + save the user constellation/drawing. I also set up an SQL instance to hold the image names, image titles, and metadata attached.

First working save of image title in SQL database
First working save of image title in SQL database

The PHP code saved the HTML5 canvas as a jpg on submit of the initial page. The second page pulled all image data as a JSON object. From there, the javascript reads these objects, displays the pictures and moves them around in the n-body simulation. Alvin took care of all the physics code.

JSON console
Web console listing JSON objects returned

What I've Learned

We’re really happy with how well it turned out and had lots of fun making this. We ended up winning the Instructor's Vote with a $25 gift card per person. We successfully followed the theme and created a working project that everyone could enjoy and contribute to during the presentation.

There isn't much still available with the lack of documentation, but this is the page of the hackathon here. In the future I will make much more of an effort to document each phase of the project.