12.4: Shared Drawing Canvas - WebSockets and p5.js Tutorial

From the creator

This video puts all of the pieces together: node, express, p5.js, and socket.io to show how to program a shared, collaborative drawing canvas. How to broadcast messages between clients and the server is covered. Code: https://thecodingtrain.com/tracks/web-sockets-and-p5js/websockets-node-p5/4-shared-drawing-canvas 💻 Github Repo: https://github.com/CodingTrain/sockets-and-p5 🎥 Previous: https://youtu.be/HZWmrt3Jy10?list=PLRqwX-V7Uu6b36TzJidYfIYwTFEq3K5qH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6b36TzJidYfIYwTFEq3K5qH Timestamps: 0:00 Introduction! 0:33 Sending messages from the clients 3:02 Receiving messages from the clients by the web server 7:17 Receiving messages from the server by the clients 8:39 Playing around with the shared drawing canvases! 9:40 A full recap and conclusion! Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://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/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy

Published 2016-04-13 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.