Code Train Live 30: Creating Real-Time Shared Canvas with WebSockets

Plus the beginning of a new segment: The 10 Minute Coding Challenge!

Timestamps:
12:40 - Starfield Coding Challenge in Processing
46:57 - Presentation of today's project
1:41:38 - Connecting clients to server to share drawing canvas
1:53:10 - Conclusion

Learn JavaScript basics:

More about data and APIs:

Help us caption & translate this video!

[numoru]

Wish I could tell him back then stop being so nervous he's going to be one of the trail blazers at doing this stuff live. Still one of the best I've seen.

[misterguru]

Great Job - Talk ... as ... fast.... as... you ... like! I don't think you realise how much teaching your actually doing when your talking! It's great, really it is. It's helping to change my thought process when trying to navigate and learn javascript. I have never coded applications before, (I'm a system admin devops guy, so all my code are scripts, deployments, monitoring systems etc, and the occasional app that only needs to function, not look good!), and I've been in technology ... a little while ;)

I'm looking into node just for fun, so that I can understand what it is most of my devs do at work. (I run infrastructure that holds about 900 java apps).

I just watched your 10 minute challenge building that star thingy it gave me an unbelievable insight into why no dev ever says no when they are given a challenge! I love that. I can't *WAIT* for the database stuff, .... all I need for you to do after that, is do some stuff in electron-shell .... and I'll be halfway to creating a million dollar app :) that's the dream anyway hehe

[PeguinDesign]

Quick tip:
If your running windows use Git Bash because you can then use Unix commands (the ones he is using).

[djsamke]

Wow I think the code challenge is so cool. By the time you start the lecture [i think] everyone is so enthusiastic to learn from you after seeing you program like that ... lol

[workingTchr]

1:50:31 It works! Nice to see as I'm trying the same. My worry has been that the data would just be too much. Apparently not! (I'm bookmarking this in case I get it wrong somehow). Thank you!

[enlacimamexico]

I love your tutorial, I appreciate this so so so much! greetings from México.

[sreysstreams]

Hey random person scroling through the comments, i hope you have an awesome day!

[justsomedude]

best video on youtube, thanks Coding Train.

[IchHerzRock]

u forgot to explain where u receive those positive vibes from. thanks a lot <3

[artificialreviews]

the video starts at: 46:58 thank me later

[arletpaz]

great playlist by the way! i wanted to ask if you have cover videos on the use of webcame streaming before using processing ide? iit dont matter what computer language as i see you cover lots of languages and or ide's

im looking to see if there is a way to transmit streaming live feed data from one computer to another wirelessly usung a webcam? maybe you already covered this or perhaps you can nudge me in the right direction thanks.

[djsamke]

I think im getting hypnotized by this startfield 😂😂

[furrane]

1:08:40 Hahaha, it was a nice live =)

[aswinthraj]

Hi Dan,
Can you explain me how to use web socket on Processing. I wanna read a data from server and animate accordingly on my processing CANVAS

[drncer]

but what happens when 2 users use the canvas at the same time?

[gibbermagash]

It seems that a lot of the libraries used to make this aren't available anymore on p5.

[sagarshah]

Can someone please answer my query..can I use Processing.js
and do the

[cmpuipf]

Hi, my server.js file looks exactly like yours but I still get the "cannot GET/" message on localhost:3000. i tried with + "/public")); but still no results, I can't get further; console sais "failed to load resource: the server responded with a sttus of 404( not found)" this is driving me insane what am I doing wrong

[GerardoSabetta]

How can you save the canvas content so new users can join the current canvas drawing instead of seeing a new blank canvas?

[malaaa]

Hey. Where can I find WebSocket/p5.js Project Source Code? It is 404 now