12.1: Introduction to Node - WebSockets and p5.js Tutorial

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=bjULmG8fqc8


Category:
Tutorial
Duration: 9:47
103,353 views
1,635

In this first video, I discuss the all the pieces required to create a shared, collaborative drawing canvas with p5.js, node, and web sockets. I look at the basics of getting up and running with node.js.

Source code: https://github.com/shiffman/Video-Lesson-Materials

Contact: https://twitter.com/shiffman

Next video: https://youtu.be/s70-Vsud9Vk

Node: https://nodejs.org/en/
Socket.io: http://socket.io/
Express: http://expressjs.com/
p5.js: https://p5js.org/

Learn JavaScript basics:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

More about data and APIs:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r

Help us caption & translate this video!

http://amara.org/v/Qbsu/

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



Other Videos By The Coding Train


2016-04-241.4: GitHub Issues - Git and GitHub for Poets
2016-04-231.3: Forks and Pull Requests - Git and GitHub for Poets
2016-04-22Coding Train Live 34: Git and GitHub Tutorials + Purple Rain and Solar System
2016-04-22Coding Train Live 33: Space Invaders and Mitosis Simulation
2016-04-20Coding Challenge #3: The Snake Game
2016-04-191.2: Branches - Git and GitHub for Poets
2016-04-191.1: Introduction - Git and GitHub for Poets
2016-04-19Coding Train Live 32: Git and GitHub Tutorial and the Snake Game
2016-04-17Coding Challenge #2: Menger Sponge Fractal
2016-04-13Coding Train Live 31: Shape Morphing and Menger Sponge in Processing
2016-04-1312.1: Introduction to Node - WebSockets and p5.js Tutorial
2016-04-12Coding Challenge #1: Starfield in Processing
2016-04-12Code Train Live 30: Creating Real-Time Shared Canvas with WebSockets
2016-04-1111.8: Video Effects with Seriously.js - p5.js Tutorial
2016-04-1111.7: Slit-Scan Video - p5.js Tutorial
2016-04-0811.3: Slit-Scan Video - Processing Tutorial
2016-04-08Coding Train Live 29: Processing and p5.js - Slit-scan and Seriously.js
2016-04-0714.3: Dynamic Text (contenteditable attribute) - Hamilton Lottery Simulator with p5.js
2016-04-0714.1: The Mathematics (Probability, Logarithm) - Hamilton Lottery Simulator with p5.js
2016-04-0714.2: The Code (HTML, CSS, and JavaScript) - Hamilton Lottery Simulator with p5.js
2016-04-07Coding Train Live 28: Hamilton Lottery Simulator - Probability and DOM


Tags:
p5.js websockets
p5.js sockets
p5.js
node websockets
web
node
websockets
p5js
html5 canvas
javascript
javascript web sockets
javascript sockets
node.js
web sockets
web sockets tutorial
p5
tutorial
sockets
javascript (programming language)
creative coding
websockets tutorial
javascript websockets
node.js websockets
websocket
shared canvas
js