1.2: p5.js Workflow - p5.js Tutorial

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


Category:
Tutorial
Duration: 21:20
102,159 views
1,957

In this video, I cover my current workflow to create p5.js "sketches" in. If you are interested in following my "Foundations of Programming in JavaScript" playlist, this is a comprehensive introduction to the tools you can use (though some simpler options do exist!)

Download empty-example that works with this video!
https://www.dropbox.com/s/5o1kkwjfm3smc4c/empty-example.zip?dl=0

Using an online editor like codepen:
https://www.youtube.com/watch?v=5gfUgNpS6kY

Next video: https://www.youtube.com/watch?v=D1ELEeIs0j8&index=3&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://www.designbyhumans.com/shop/codingtrain/
To Support the Processing Foundation: https://processingfoundation.org/support

Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/

Tools discussed in this video:
Node.js: https://nodejs.org/en/
p5-manager: https://www.npmjs.com/package/p5-manager
p5.js library: https://p5js.org/
Atom text editor: https://atom.io/
Sublime Text editor: https://www.sublimetext.com/
Visual Studio Code: https://code.visualstudio.com/
git-bash: https://git-scm.com/downloads

Videos mentioned in this video:
Previous video on my workflow: https://youtu.be/d3OcFexe9Ik
p5-manager: https://youtu.be/LdWleSHQTcw
Local Server: https://youtu.be/UCHzlUiDD10
Node Playlist: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6b36TzJidYfIYwTFEq3K5qH

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For an Introduction to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Help us caption & translate this video!

https://amara.org/v/dXlD/

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



Other Videos By The Coding Train


2017-11-18Live Stream #107: Chrome Extensions Continued
2017-11-16Coding Challenge #82: Image Chrome Extension: The Ex-Kitten-sion!
2017-11-1511.4: Chrome Extensions: Background Scripts - Programming with Text
2017-11-1411.3: Chrome Extensions: Content Scripts - Programming with Text
2017-11-1311.2: Bookmarklets - Programming with Text
2017-11-1311.1: Introduction to Chrome Extensions - Programming with Text
2017-11-12Coding Train Live 106: Chrome Extensions - Part 2
2017-11-11Live Stream #106.1: Chrome Extensions - Part 1
2017-11-08Coding Challenge #81.2: Circle Morphing - Part 2
2017-11-01Coding Challenge #81.1: Circle Morphing - Part 1
2017-10-311.2: p5.js Workflow - p5.js Tutorial
2017-10-3016.3: ES6 Arrow Function - Topics of JavaScript/ES6
2017-10-28Live Stream #105: p5.js Workflow, Circle Morphing and Arrow Function
2017-10-25Guest Tutorial #7: Circle Morphing with Golan Levin
2017-10-24Guest Tutorial #6: The Modulo Operator with Golan Levin
2017-10-23Coding Challenge #80: Voice Chatbot with p5.Speech
2017-10-2010.4: Speech Recognition with p5.Speech - Programming with Text
2017-10-1910.3: Text-to-Speech with p5.Speech - Programming with Text
2017-10-177.5: Removing Objects from Arrays - p5.js Tutorial
2017-10-167.4: Mouse Interaction with Objects - p5.js Tutorial
2017-10-14Coding Train Live 104: Chatbots with p5.Speech, More OOP in JS & Paperclips!


Tags:
JavaScript (Programming Language)
live
programming
daniel shiffman
creative coding
coding challenge
tutorial
coding
challenges
coding train
the coding train
live stream
itp nyu
class
arrow functions
node
atom
sublime text
visual studio code
workflow javascript
python server
intro node
intro nodejs
http server
http local server
javascript intro
javascript intro workflow
javascript text editor
p5.js
p5.js tutorial
javascript
workflow
atom.io