Saving p5.js Drawings to Firebase

Simon tried Firebase today, Google’s mobile platform assisting in app development. One of its features is the Realtime Database and Simon learned about it from his favourite online “teacher”, Daniel Shiffman. This afternoon Simon spent about 7 hours to complete a new coding challenge, Coding Challenge #45: Saving p5.js Drawings to Firebase. Very challenging, indeed. Jumping around in joy alternated with sweat and tears as he had to debug his project twice.

This is the link to Simon’s completed database:

Simon spent at least 1,5 hours looking for the first bug. I sat next to him checking his code. We verified every bit of it we thought. In despair we concluded that the bug actually came from the p5.js library. “The chance that we find the mistake is very tiny”, – Simon cried. “The library is 30 thousand lines of code!” But then there came this magic moment when he saw his own error: he had “drawing” written twice, instead of “drawing” and “path”.


Simon happy about finding the mistake he made:


The “Save” button:

The database on Firebase:


Simon discovers another bug (with the key, he resolved it later on):


The Firebase data consists only of point coordinates, doesn’t display canvas:

The pictures Simon drew in the doodle machine (part of the challenge was to program one) are exactly the same as those by Daniel Shiffman. Funny how he always thinks it’s necessary to do everything according to the book:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s