Coding Challenge #59: Steering Behaviors

Subscribers:
1,750,000
Published on ● Video Link: https://www.youtube.com/watch?v=4hA7G3gup-4



Duration: 30:56
183,788 views
3,758


In this coding challenge, I look at extracting font path points from text in p5.js with p5.Font.textToPoints(). I render the text as particles with steering behaviors that react to the mouse. Code: https://thecodingtrain.com/challenges/59-steering-behaviors

๐Ÿ•น๏ธ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/q7O2v_zqQ

๐ŸŽฅ Previous video: https://youtu.be/dbs4IYGfAXc?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ Next video: https://youtu.be/O_0fRV4MTZo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
๐Ÿ““ Steering Behaviors paper: http://www.red3d.com/cwr/steer/

Videos:
๐ŸŽฅ Nature of Code Steering Behaviors Playlist: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YHt0dtyf4uiw8tKOxQLvlW
๐Ÿ”ด Live Stream #79: https://youtu.be/L1nHni9HMBw?t=6833s

Related Coding Challenges:
๐Ÿš‚ #69 Evolutionary Steering Behaviors: https://youtu.be/flxOkx0yLrY
๐Ÿš‚ #124 Flocking Simulation: https://youtu.be/mhjuuHl6qHM

Timestamps:
0:00 Introduction
4:14 textToPoints
7:39 Craig Reynold's steering behavior
11:17 vehicle.js
12:07 Prototypes
16:14 Behaviors
17:53 Seek function
21:05 Arrive function
24:24 Random starting points
25:00 Flee the mouse

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

๐Ÿš‚ Website: http://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://discord.gg/hPuGy2g
๐Ÿ’– Membership: http://youtube.com/thecodingtrain/join
๐Ÿ›’ Store: https://standard.tv/codingtrain
๐Ÿ–‹๏ธ Twitter: https://twitter.com/thecodingtrain
๐Ÿ“ธ Instagram: https://www.instagram.com/the.coding.train/

๐ŸŽฅ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

๐Ÿ”— p5.js: https://p5js.org
๐Ÿ”— p5.js Web Editor: https://editor.p5js.org/
๐Ÿ”— Processing: https://processing.org

๐Ÿ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#steeringbehaviors #craigreynoldssteering #texttopoints #p5js #javascript







Tags:
JavaScript (Programming Language)
live
programming
daniel shiffman
creative coding
p5.js
coding challenge
p5.js tutorial
p5js
javascript (programming language)
tutorial
javascript
coding
challenges
coding train
the coding train
steering behaviors
steering p5.js
steering behaviors js
craig reynolds steering behavior
Craig Reynolds steering
textToPoints
text to points
font.texttopoints
p5.js texttopoint
text reacting to mouse