Coding Challenge #45: Saving p5.js Drawings to Firebase

Channel:

The Coding Train

Subscribers:

1,740,000

Published on December 11, 2016 2:45:49 PM ● Video Link: https://www.youtube.com/watch?v=RUSvMxxm_Jo

Category:

Tutorial

Duration: 35:55

47,070 views

819

In this coding challenge, I make a HTML5 canvas doodling application with p5.js. Users can save and share drawings in real-time with the Database as a Service (DBaaS) Firebase. Code: https://thecodingtrain.com/challenges/45-p5js-firebase-drawings

🎥 Previous video: https://youtu.be/uw3GbsY_Pbc?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/hacZU523FyM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🔗 Firebase: https://firebase.google.com/
🔗 Firebase Documentation - Read and Write: https://firebase.google.com/docs/database/web/read-and-write
🔗 Aaron Koblin's Sheep Market: http://www.aaronkoblin.com/work/thesheepmarket/
💻 Programming from A to Z: https://github.com/Programming-from-A-to-Z/A2Z-F16

Videos:
🎥 Web Sockets and p5.js Tutorial: https://youtube.com/playlist?list=PLRqwX-V7Uu6b36TzJidYfIYwTFEq3K5qH
🎥 Database as a Service with Firebase: https://youtube.com/playlist?list=PLRqwX-V7Uu6agS82Le9lLCBbeaW8inATT

Livestream Archive:
🔴 Livestream #30: https://youtu.be/JljMBn69fZM
🔴 Livestream #69.1: https://youtu.be/nAQNmjyAUTY?t=5424s
🔴 Livestream #69.2: https://youtu.be/HWt2a72IZbw?t=439s

Related Coding Challenges:
🚂 #122 Quick, Draw!: https://youtu.be/yLuk0twx8Hc
🚂 #130 Drawing with Fourier Transform and Epicycles: https://youtu.be/MY4luNgGfms

Timestamps:
0:00 Introduce the coding challenge
0:23 Mention shared canvas tutorial
0:42 Mention Firebase tutorial
0:50 Set up p5.js sketch
1:23 Consider user input
1:50 Create an array for the path
2:14 Store mouse coordinates
2:38 Draw points with a loop
3:14 Test drawing
3:32 Refine points logic
3:40 Consider mouse pressed and mouse released
4:08 Create an array for the current path
4:30 Add current path to the drawing
5:00 Draw points with a nested loop
5:51 Test drawing
6:30 Add current path as the mouse is pressed
7:00 Summarize drawing logic
7:44 Set up HTML elements to save the drawing
9:02 Create saveDrawing function
9:10 Connect to Firebase
9:24 Store drawing with an object
10:14 Test drawing
10:41 Fix reference to Firebase
10:46 Fix mouse interaction
11:35 Add callback to test Firebase
12:25 Check data on Firebase
13:08 Include a list of drawings
13:30 Listen to changes on the database
14:00 Add callback functions
14:04 Log potential errors
14:11 Retrieve a list of drawings
15:50 Add HTML elements to display drawings
16:12 List the drawings' ids
17:00 Add anchor link elements
17:42 Create showDrawing function
18:05 Fix the reference of the anchor link
18:45 Retrieve drawing from database
19:35 Log drawing object
20:45 Consider the object's points
21:15 Add points to the current drawing
22:04 Add clear button
22:45 Clear drawing by resetting the array of points
23:35 Consider creative possibilities
23:51 Avoid repeating list items
25:32 Test drawing
26:06 Reference Firebase documentation
26:28 Improve showDrawing function
27:12 Consider how to share drawing
27:45 Create a permalink to the drawings
28:53 Highlight URL query string
29:10 Introduce p5 getURLParams function
29:45 Log URL parameters
30:45 Update showDrawing to optionally receive a key
31:30 Pass the key from the page's parameters
31:48 Test permalink
32:35 Update showDrawing to consider the input
33:40 Summarize the coding challenge
34:14 Conclude the coding challenge

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#drawingapp #firebasedatabase #p5js #javascript