Uploaded October 2021 | Updated September 2026, 1 week ago
Continuing the quest to implement all of Craig Reynolds’ steering behaviors in JavaScript with p5.js, in this video I tackle path following! Code: thecodingtrain.com/tracks/the-nature-of-code-2/noc/5-autonomous-agents/7-path-following
p5.js Web Editor Sketches:
🕹️ Path Following: editor.p5js.org/codingtrain/sketches/dqM054vBV
🕹️ Complex Path: editor.p5js.org/codingtrain/sketches/2FFzvxwVt
🎥 Previous video: youtu.be/DHPfoqiE4yQ?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
🎥 All videos: youtube.com/playlist?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
References:
🔗 Steering Behaviors for Autonomous Characters: red3d.com/cwr/steer
Videos:
🎥 Scalar Projection: youtu.be/DHPfoqiE4yQ
Timestamps:
0:00 Follow along, I look at path finding!
0:23 Let's create a Path class.
1:18 Now we need a follow force.
1:51 What are the steps to path following?
5:08 Step one: predict future position.
5:40 Modify vectorProjection() to findProjection().
8:12 Use findProjection() and the rest of the steps.
10:30 Refining the example.
11:49 What could you create?
13:28 I forgot to talk about direction!
14:43 No idea what's next but hope to see you there!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
✪ Nebula: go.nebula.tv/codingtrain
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#forbeginners #javascript #p5js
Continuing the quest to implement all of Craig Reynolds’ steering behaviors in JavaScript with p5.js, in this video I tackle path following! Code: thecodingtrain.com/tracks/the-nature-of-code-2/noc/5-autonomous-agents/7-path-following
p5.js Web Editor Sketches:
🕹️ Path Following: editor.p5js.org/codingtrain/sketches/dqM054vBV
🕹️ Complex Path: editor.p5js.org/codingtrain/sketches/2FFzvxwVt
🎥 Previous video: youtu.be/DHPfoqiE4yQ?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
🎥 All videos: youtube.com/playlist?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
References:
🔗 Steering Behaviors for Autonomous Characters: red3d.com/cwr/steer
Videos:
🎥 Scalar Projection: youtu.be/DHPfoqiE4yQ
Timestamps:
0:00 Follow along, I look at path finding!
0:23 Let's create a Path class.
1:18 Now we need a follow force.
1:51 What are the steps to path following?
5:08 Step one: predict future position.
5:40 Modify vectorProjection() to findProjection().
8:12 Use findProjection() and the rest of the steps.
10:30 Refining the example.
11:49 What could you create?
13:28 I forgot to talk about direction!
14:43 No idea what's next but hope to see you there!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
✪ Nebula: go.nebula.tv/codingtrain
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#forbeginners #javascript #p5js
