title
Coding Challenge #59: Steering Behaviors
description
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
detail
{'title': 'Coding Challenge #59: Steering Behaviors', 'heatmap': [{'end': 299.013, 'start': 257.661, 'weight': 0.806}, {'end': 373.271, 'start': 350.7, 'weight': 0.896}, {'end': 416.476, 'start': 387.464, 'weight': 0.733}, {'end': 818.473, 'start': 771.437, 'weight': 0.755}, {'end': 949.041, 'start': 922.153, 'weight': 1}, {'end': 1188.771, 'start': 1149.745, 'weight': 0.749}, {'end': 1471.437, 'start': 1425.898, 'weight': 0.834}], 'summary': "Covers drawing and manipulating text with p5.js, implementing the texttopoints function for algorithmic text drawing, and demonstrating autonomous agents using desired velocity and steering forces inspired by craig reynolds' behaviors. it also explains vehicle steering algorithms, including the 'arrive' algorithm and additional features like flee and weight adjustments.", 'chapters': [{'end': 247.015, 'segs': [{'end': 40.137, 'src': 'embed', 'start': 0.309, 'weight': 0, 'content': [{'end': 4.051, 'text': 'Welcome aboard the train of coding stuff.', 'start': 0.309, 'duration': 3.742}, {'end': 5.633, 'text': "Here's another coding challenge.", 'start': 4.592, 'duration': 1.041}, {'end': 11.256, 'text': "What I'm going to do in this coding challenge is show you how to place points, your own geometry,", 'start': 5.653, 'duration': 5.603}, {'end': 17.821, 'text': 'your own designs along the paths of letters in JavaScript, using the p5.js library with the p5.font object.', 'start': 11.256, 'duration': 6.565}, {'end': 22.083, 'text': "And then I'm also going to apply something called a steering behavior from Craig Reynolds.", 'start': 18.141, 'duration': 3.942}, {'end': 24.165, 'text': "There'll be a lot more information in this video's description.", 'start': 22.123, 'duration': 2.042}, {'end': 30.31, 'text': "And I'm going to use steering behaviors for these objects to find their way to a target, as well as flee the mouse.", 'start': 24.745, 'duration': 5.565}, {'end': 35.273, 'text': 'So you can see the sort of inkling of a creative possibility here of what you could make with it.', 'start': 30.57, 'duration': 4.703}, {'end': 40.137, 'text': "And I'm sure you could come up with more creative designs, reasons for using text,", 'start': 35.394, 'duration': 4.743}], 'summary': "Using p5.js, place points along letters' paths and apply steering behaviors for objects in javascript coding challenge.", 'duration': 39.828, 'max_score': 0.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4309.jpg'}, {'end': 93.895, 'src': 'embed', 'start': 63.776, 'weight': 2, 'content': [{'end': 66.419, 'text': 'So first thing I want to do is I want to make a variable called font.', 'start': 63.776, 'duration': 2.643}, {'end': 68.52, 'text': "And I'm going to just use preload.", 'start': 67.159, 'duration': 1.361}, {'end': 72.74, 'text': 'Because I need to specify a specific font here.', 'start': 69.858, 'duration': 2.882}, {'end': 74.321, 'text': "I'm going to say font equals load font.", 'start': 72.76, 'duration': 1.561}, {'end': 82.827, 'text': 'And I have already put in the directory for this project, I have already put a, hold on, a font file.', 'start': 74.641, 'duration': 8.186}, {'end': 86.01, 'text': 'Show in Finder.', 'start': 85.409, 'duration': 0.601}, {'end': 88.051, 'text': "So there's the font file.", 'start': 87.11, 'duration': 0.941}, {'end': 89.492, 'text': "So I need this font file's name.", 'start': 88.071, 'duration': 1.421}, {'end': 91.113, 'text': "So I'm going to copy it.", 'start': 89.852, 'duration': 1.261}, {'end': 93.895, 'text': "And then I'm going to go back here and I'm going to put that in here.", 'start': 91.794, 'duration': 2.101}], 'summary': "Creating a variable 'font' using preload and loading a specific font file for the project.", 'duration': 30.119, 'max_score': 63.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-463776.jpg'}, {'end': 151.6, 'src': 'embed', 'start': 116.65, 'weight': 3, 'content': [{'end': 117.79, 'text': 'I think I might use train.', 'start': 116.65, 'duration': 1.14}, {'end': 118.811, 'text': 'This is a little bit shorter.', 'start': 117.81, 'duration': 1.001}, {'end': 120.192, 'text': 'Trainbow, so to speak.', 'start': 118.871, 'duration': 1.321}, {'end': 123.185, 'text': 'TM, Trainbow.', 'start': 121.724, 'duration': 1.461}, {'end': 131.633, 'text': "So text train, and I'm just going to say 10, 200, and I'm going to make text size.", 'start': 123.746, 'duration': 7.887}, {'end': 136.557, 'text': 'So these are some functions that are part of the p5.js library that allow me to draw text to the screen.', 'start': 132.373, 'duration': 4.184}, {'end': 139.019, 'text': "I'm going to say 128.", 'start': 136.577, 'duration': 2.442}, {'end': 140, 'text': 'And then I think if I say..', 'start': 139.019, 'duration': 0.981}, {'end': 151.6, 'text': "fill 255 and no stroke that'll color the text white and if I say background My favorite background color 51 that'll make the background 51.", 'start': 141.813, 'duration': 9.787}], 'summary': "Using p5.js library to draw text 'trainbow' with size 128 and white color on a background color of 51.", 'duration': 34.95, 'max_score': 116.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4116650.jpg'}], 'start': 0.309, 'title': 'Drawing and manipulating text with p5.js', 'summary': 'Covers techniques for placing points along text paths using p5.js and p5.font in javascript, as well as applying steering behavior from craig reynolds. it also explains the process of drawing and manipulating text, including loading fonts, creating canvas, and setting text attributes with p5.js.', 'chapters': [{'end': 63.396, 'start': 0.309, 'title': 'Coding challenge: placing points along text paths', 'summary': 'Explains how to place points along the paths of letters in javascript using the p5.js library and p5.font object, as well as applying steering behavior from craig reynolds to make objects find their way to a target and flee the mouse, with the creative possibility of making more designs and interacting with other sensors and physicality.', 'duration': 63.087, 'highlights': ['The chapter demonstrates how to place points along text paths in JavaScript using the p5.js library and p5.font object, along with applying steering behavior from Craig Reynolds.', 'The use of steering behavior allows objects to find their way to a target and flee the mouse, showcasing creative possibilities for making designs and interacting with other sensors and physicality.', 'The coding challenge encourages viewers to come up with more creative designs and reasons for using text, as well as exploring other ways of interacting with different types of sensors and physicality.', 'The chapter invites viewers to engage and share their thoughts in the comments, initiating a collaborative learning environment.']}, {'end': 247.015, 'start': 63.776, 'title': 'Using p5.js to draw text and manipulate fonts', 'summary': 'Details the process of using p5.js to draw and manipulate text, including loading fonts, creating canvas, setting text attributes, and accessing additional functions within the p5.js library.', 'duration': 183.239, 'highlights': ["The author explains the process of loading a specific font using the 'preload' function, emphasizing the need to specify the font and its directory for the project.", "A demonstration of creating a canvas of arbitrary size (800 by 300) and setting text attributes such as font, size, color, and background is provided to draw the word 'train' using p5.js functions.", "The chapter explores accessing additional functions within the p5.js library, including 'text bounds' and discusses the possibility of expanding the reference pages with volunteer efforts.", 'The author demonstrates the process of manipulating the drawn text by increasing its size from 128 to 192 using p5.js functions, showcasing the flexibility and creative possibilities within the library.']}], 'duration': 246.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4309.jpg', 'highlights': ['The chapter demonstrates how to place points along text paths in JavaScript using the p5.js library and p5.font object, along with applying steering behavior from Craig Reynolds.', 'The use of steering behavior allows objects to find their way to a target and flee the mouse, showcasing creative possibilities for making designs and interacting with other sensors and physicality.', "The author explains the process of loading a specific font using the 'preload' function, emphasizing the need to specify the font and its directory for the project.", "A demonstration of creating a canvas of arbitrary size (800 by 300) and setting text attributes such as font, size, color, and background is provided to draw the word 'train' using p5.js functions."]}, {'end': 451.852, 'segs': [{'end': 299.013, 'src': 'heatmap', 'start': 247.015, 'weight': 0, 'content': [{'end': 257.661, 'text': "I should credit him for a lot of this work is to say, I'm going to say var points equals font textToPoints.", 'start': 247.015, 'duration': 10.646}, {'end': 261.043, 'text': 'believe the function is called textToPoints and now I can take exactly this.', 'start': 257.661, 'duration': 3.382}, {'end': 267.667, 'text': "So I'm going to put that in there, and what that should give me, I believe, let's just console.log it.", 'start': 261.063, 'duration': 6.604}, {'end': 270.747, 'text': 'So we can see if this works.', 'start': 269.787, 'duration': 0.96}, {'end': 272.708, 'text': "Let's just see what does this function give us.", 'start': 270.927, 'duration': 1.781}, {'end': 275.668, 'text': "So I'm going to go back here.", 'start': 272.728, 'duration': 2.94}, {'end': 279.289, 'text': "We can see, look, it's a big array with all these objects.", 'start': 276.529, 'duration': 2.76}, {'end': 283.87, 'text': "And what's in each of these objects? An alpha and an x and a y.", 'start': 279.369, 'duration': 4.501}, {'end': 285.611, 'text': "Well, I didn't even know it had an alpha in there.", 'start': 283.87, 'duration': 1.741}, {'end': 287.251, 'text': 'An alpha and an x and a y.', 'start': 285.631, 'duration': 1.62}, {'end': 290.432, 'text': "So I'm just going to make use of the x and the y.", 'start': 287.251, 'duration': 3.181}, {'end': 291.352, 'text': "So what I'm going to do now.", 'start': 290.432, 'duration': 0.92}, {'end': 296.652, 'text': "Really soon I'm going to use a for each loop in one of my videos.", 'start': 294.171, 'duration': 2.481}, {'end': 299.013, 'text': 'everybody wants me to, but I just like.', 'start': 296.652, 'duration': 2.361}], 'summary': 'The transcript discusses using the texttopoints function to obtain an array of objects with alpha, x, and y values for further manipulation and exploration.', 'duration': 28.653, 'max_score': 247.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4247015.jpg'}, {'end': 359.807, 'src': 'embed', 'start': 324.724, 'weight': 2, 'content': [{'end': 325.445, 'text': 'Look what I just did.', 'start': 324.724, 'duration': 0.721}, {'end': 327.728, 'text': 'So this is really dangerous in JavaScript.', 'start': 325.465, 'duration': 2.263}, {'end': 332.996, 'text': "So I was like, I'll just make a variable called point because I'm going to store something called a point.", 'start': 328.87, 'duration': 4.126}, {'end': 340.05, 'text': "I have a function in p5 that's called point, that draws a point.", 'start': 335.246, 'duration': 4.804}, {'end': 344.794, 'text': "So I can't make up a variable with the same name as something that I'm using from a library in the global namespace,", 'start': 340.651, 'duration': 4.143}, {'end': 350.439, 'text': 'which is why things are typically in JavaScript libraries quote unquote namespace, meaning I would have to say p5.point.', 'start': 344.794, 'duration': 5.645}, {'end': 353.222, 'text': 'It also just makes things so inconvenient, especially for beginners.', 'start': 350.7, 'duration': 2.522}, {'end': 359.807, 'text': "So here I'm just going to say pt for point, and now I'm going to say pt.x, pt.y.", 'start': 353.482, 'duration': 6.325}], 'summary': 'In javascript, naming variables can clash with library namespaces, causing inconvenience for beginners.', 'duration': 35.083, 'max_score': 324.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4324724.jpg'}, {'end': 380.759, 'src': 'heatmap', 'start': 350.7, 'weight': 0.896, 'content': [{'end': 353.222, 'text': 'It also just makes things so inconvenient, especially for beginners.', 'start': 350.7, 'duration': 2.522}, {'end': 359.807, 'text': "So here I'm just going to say pt for point, and now I'm going to say pt.x, pt.y.", 'start': 353.482, 'duration': 6.325}, {'end': 361.429, 'text': "So let's see what I get now.", 'start': 360.348, 'duration': 1.081}, {'end': 363.982, 'text': 'And we can see, look at that.', 'start': 363.001, 'duration': 0.981}, {'end': 369.327, 'text': 'Look at all these nice green points, these green circles that are tracing the contour.', 'start': 364.382, 'duration': 4.945}, {'end': 373.271, 'text': "Now this is amazing because I don't need to draw the text anymore.", 'start': 369.608, 'duration': 3.663}, {'end': 377.115, 'text': 'This whole thing was just to see that that worked.', 'start': 375.314, 'duration': 1.801}, {'end': 380.759, 'text': 'And oh, by the way, oh, interesting.', 'start': 378.277, 'duration': 2.482}], 'summary': "Using 'pt' instead of 'point' made the process more efficient, generating green circles as a result.", 'duration': 30.059, 'max_score': 350.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4350700.jpg'}, {'end': 434.004, 'src': 'heatmap', 'start': 387.464, 'weight': 1, 'content': [{'end': 390.446, 'text': "Because what I'm going to do right now is I'm going to completely take this out.", 'start': 387.464, 'duration': 2.982}, {'end': 393.488, 'text': "The whole point of this was I don't need to draw the text.", 'start': 391.127, 'duration': 2.361}, {'end': 399.353, 'text': "And then I'm going to make these white and make them a little bit bigger.", 'start': 394.009, 'duration': 5.344}, {'end': 405.649, 'text': 'And we can see there is now the word train with lots of little dots.', 'start': 400.626, 'duration': 5.023}, {'end': 416.476, 'text': "So what's exciting about this is I have now drawn with my own algorithm the locations of all of these vertices in a piece of text.", 'start': 406.009, 'duration': 10.467}, {'end': 419.878, 'text': 'And so from here, your imagination can go wild.', 'start': 416.836, 'duration': 3.042}, {'end': 421.439, 'text': 'I can make them rainbow colors.', 'start': 420.198, 'duration': 1.241}, {'end': 424.221, 'text': 'I can make them move and follow the paths.', 'start': 421.499, 'duration': 2.722}, {'end': 425.122, 'text': 'I could have them.', 'start': 424.561, 'duration': 0.561}, {'end': 430.643, 'text': 'Explode and come back and shimmer and change to stars and hearts, or whatever you want to do,', 'start': 425.882, 'duration': 4.761}, {'end': 434.004, 'text': 'like I could make the word love and just Fill it with hearts.', 'start': 430.643, 'duration': 3.361}], 'summary': 'Algorithm draws vertices of text, allowing for creative customization.', 'duration': 46.54, 'max_score': 387.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4387464.jpg'}], 'start': 247.015, 'title': 'Texttopoints function and algorithmic text drawing in javascript', 'summary': 'Demonstrates the usage of the texttopoints function in javascript to convert text into an array of objects with x and y coordinates, and the use of algorithms to draw the locations of vertices in a piece of text, providing potential for diverse visual effects and transformations such as changing colors, movements, shapes, and turning dots into particles.', 'chapters': [{'end': 363.982, 'start': 247.015, 'title': 'Using texttopoints function in javascript', 'summary': 'Demonstrates using the texttopoints function in javascript to convert text into an array of objects with x and y coordinates, and the challenges of using variable names conflicting with library functions.', 'duration': 116.967, 'highlights': ['The textToPoints function in JavaScript converts text into an array of objects with x and y coordinates, facilitating the creation of visual elements. This can be seen in the demonstration of using the function to generate an array of objects for each character in the text.', "The speaker encounters an issue with naming a variable 'point' which conflicts with a function name from the p5 library, highlighting the challenges of namespace conflicts in JavaScript. The speaker resolves the issue by renaming the variable to 'pt'."]}, {'end': 451.852, 'start': 364.382, 'title': 'Algorithmic text drawing', 'summary': 'Demonstrates the use of an algorithm to draw the locations of vertices in a piece of text, offering the potential for diverse visual effects and transformations, such as changing colors, movements, and shapes, as well as turning dots into particles that can move around the screen.', 'duration': 87.47, 'highlights': ['The chapter showcases the use of an algorithm to draw the locations of all the vertices in a piece of text, offering the potential for diverse visual effects and transformations, such as changing colors, movements, and shapes. This presents numerous creative possibilities for visual design and animation.', 'The transcript describes the process of turning the drawn points into particles that can move around the screen, indicating the intention to expand the visual effects and interactions through dynamic movements and transformations.']}], 'duration': 204.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4247015.jpg', 'highlights': ['The chapter demonstrates the usage of the textToPoints function in JavaScript to convert text into an array of objects with x and y coordinates, facilitating the creation of visual elements.', 'The chapter showcases the use of an algorithm to draw the locations of all the vertices in a piece of text, offering the potential for diverse visual effects and transformations, such as changing colors, movements, and shapes.', "The speaker encounters an issue with naming a variable 'point' which conflicts with a function name from the p5 library, highlighting the challenges of namespace conflicts in JavaScript."]}, {'end': 1078.212, 'segs': [{'end': 478.753, 'src': 'embed', 'start': 452.072, 'weight': 0, 'content': [{'end': 455.876, 'text': "And to do this, I'm going to employ an algorithm known as steering.", 'start': 452.072, 'duration': 3.804}, {'end': 458.578, 'text': "Now, I have a whole set of tutorials that I'll link to this.", 'start': 456.176, 'duration': 2.402}, {'end': 466.284, 'text': "It's chapter six from Nature of Code book about autonomous agents, Braitenburg vehicles, and there's all this like inspiration and background.", 'start': 458.598, 'duration': 7.686}, {'end': 469.947, 'text': "But what I'm going to do is model off of Craig Reynolds steering behaviors.", 'start': 466.284, 'duration': 3.663}, {'end': 475.311, 'text': "There's a well-known paper from 1999 steering behaviors for autonomous characters, something like that,", 'start': 469.947, 'duration': 5.364}, {'end': 478.753, 'text': "And I'll link to that paper that you can read in this video's description.", 'start': 475.311, 'duration': 3.442}], 'summary': "Using steering algorithm based on craig reynolds' behaviors, referencing a 1999 paper for autonomous characters.", 'duration': 26.681, 'max_score': 452.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4452072.jpg'}, {'end': 583.011, 'src': 'embed', 'start': 559.013, 'weight': 1, 'content': [{'end': 566.698, 'text': 'If we know its current velocity and then we calculate a desired velocity, move as fast as possible to the target.', 'start': 559.013, 'duration': 7.685}, {'end': 574.463, 'text': 'the steering force as defined by Reynolds equals desired minus velocity.', 'start': 566.698, 'duration': 7.765}, {'end': 577.946, 'text': 'So this is an autonomous agent.', 'start': 574.843, 'duration': 3.103}, {'end': 581.049, 'text': 'This agent has some perception, awareness of its environment.', 'start': 578.146, 'duration': 2.903}, {'end': 583.011, 'text': 'It knows its current velocity.', 'start': 581.169, 'duration': 1.842}], 'summary': 'Autonomous agent with perception and velocity control moves towards desired velocity.', 'duration': 23.998, 'max_score': 559.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4559013.jpg'}, {'end': 818.473, 'src': 'heatmap', 'start': 771.437, 'weight': 0.755, 'content': [{'end': 779.619, 'text': "and let's give it a size, this.r equals eight, for example, and I am going to use whatever I just did right here.", 'start': 771.437, 'duration': 8.182}, {'end': 787.731, 'text': "we've got a lot of this dots, I'm sure I'm going to be forgetting stuff, this.pos.x, and this.pos.y.", 'start': 782.29, 'duration': 5.441}, {'end': 792.693, 'text': 'So now I have some vehicles with some basic physics the position, velocity, acceleration,', 'start': 788.171, 'duration': 4.522}, {'end': 798.935, 'text': 'a target and some updating of their whatever and then being able to draw them.', 'start': 792.693, 'duration': 6.242}, {'end': 811.048, 'text': "So now what I'm going to do is, in the sketch I'm going to say var vehicles equals empty array And instead of drawing a point in setup,", 'start': 799.015, 'duration': 12.033}, {'end': 818.473, 'text': "what I'm going to do is I'm going to say var vehicle equals a new vehicle at point.x, point.y.", 'start': 811.048, 'duration': 7.425}], 'summary': 'Creating vehicles with basic physics and drawing them in a sketch.', 'duration': 47.036, 'max_score': 771.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4771437.jpg'}, {'end': 949.041, 'src': 'heatmap', 'start': 922.153, 'weight': 1, 'content': [{'end': 932.47, 'text': "Now, just to prove that this is doing something, Let's go into vehicles and just say, I don't know, give them p5.vector.random2d.", 'start': 922.153, 'duration': 10.317}, {'end': 934.974, 'text': "So I'm going to just give each one a random velocity.", 'start': 932.51, 'duration': 2.464}, {'end': 938.652, 'text': "So you can see, instantly they're all moving.", 'start': 936.991, 'duration': 1.661}, {'end': 949.041, 'text': "Now, how could I have them get back to where they're meant to be? So what I want to do is implement this algorithm now.", 'start': 939.693, 'duration': 9.348}], 'summary': 'Implementing algorithm to restore vehicles to original position.', 'duration': 26.888, 'max_score': 922.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4922153.jpg'}], 'start': 452.072, 'title': 'Implementing autonomous agents', 'summary': "Introduces implementing autonomous agents using desired velocity and steering forces, inspired by craig reynolds' steering behaviors, and demonstrates creating vehicle objects with basic physics and applying seek behavior to calculate steering forces.", 'chapters': [{'end': 511.7, 'start': 452.072, 'title': 'Steering algorithms and autonomous agents', 'summary': "Introduces the concept of steering algorithms for autonomous agents, inspired by craig reynolds' steering behaviors, and mentions the nature of code book, braitenburg vehicles, and valentino breitenberg's work, with a reference to a well-known paper from 1999 on steering behaviors.", 'duration': 59.628, 'highlights': ['The chapter discusses employing the steering algorithm and references tutorials from chapter six of the Nature of Code book about autonomous agents and Braitenburg vehicles.', 'It mentions modeling off of Craig Reynolds steering behaviors and refers to a well-known paper from 1999 on steering behaviors for autonomous characters.', "The chapter also highlights the term 'vehicle' from a famous book called Vehicles by Valentino Breitenberg, an Italian neuroscientist, and suggests the idea of implementing Breitenberg vehicles in coding challenges."]}, {'end': 1078.212, 'start': 512.081, 'title': 'Implementing autonomous agents', 'summary': 'Explains the concept of implementing autonomous agents using desired velocity and steering forces to create lifelike motion and improvisational quality, and demonstrates the process of creating vehicle objects with basic physics and applying seek behavior to calculate steering forces.', 'duration': 566.131, 'highlights': ["The concept of implementing autonomous agents using desired velocity and steering forces creates lifelike and improvisational quality. The chapter discusses using the concept of desired velocity and steering forces to create a lifelike and improvisational quality in autonomous agents, as well as the application of Reynolds' technique for animating motion.", 'Demonstrating the process of creating vehicle objects with basic physics and applying seek behavior to calculate steering forces. The chapter demonstrates the process of creating vehicle objects with basic physics, including position, velocity, acceleration, and a target, and applies seek behavior to calculate steering forces based on the desired velocity and target.', 'Explanation of the concept of applying forces to steer autonomous agents based on the error between desired and current velocity. The chapter explains the concept of applying forces to steer autonomous agents by calculating the error between the desired and current velocity, illustrating scenarios where the steering force is zero if the velocities are equal and in the opposite direction if the current velocity is faster than the desired velocity.']}], 'duration': 626.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-4452072.jpg', 'highlights': ['The chapter discusses employing the steering algorithm and references tutorials from chapter six of the Nature of Code book about autonomous agents and Braitenburg vehicles.', 'The concept of implementing autonomous agents using desired velocity and steering forces creates lifelike and improvisational quality.', 'Demonstrating the process of creating vehicle objects with basic physics and applying seek behavior to calculate steering forces.']}, {'end': 1844.2, 'segs': [{'end': 1148.392, 'src': 'embed', 'start': 1122.7, 'weight': 0, 'content': [{'end': 1129.943, 'text': "Well, what I'm going to do is I'm going to actually create a new variable as part of this vehicle and I'm going to call it maxSpeed and I'm going to set it to five.", 'start': 1122.7, 'duration': 7.243}, {'end': 1137.207, 'text': 'So the idea here is its desired velocity is always its maximum speed, is at its maximum speed.', 'start': 1130.203, 'duration': 7.004}, {'end': 1144.45, 'text': "So what I'm going to do there, so I'm going to say then desired.setMag, this.maximumSpeed.", 'start': 1137.227, 'duration': 7.223}, {'end': 1148.392, 'text': 'Okay, so now, and then I need the steering force.', 'start': 1145.11, 'duration': 3.282}], 'summary': 'A new variable, maxspeed, is set to 5 for the vehicle to maintain a desired velocity.', 'duration': 25.692, 'max_score': 1122.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-41122700.jpg'}, {'end': 1203.397, 'src': 'heatmap', 'start': 1149.745, 'weight': 2, 'content': [{'end': 1156.527, 'text': 'Steer, and what did we say? Steering equals desired minus velocity.', 'start': 1149.745, 'duration': 6.782}, {'end': 1158.087, 'text': 'This should be easy.', 'start': 1156.547, 'duration': 1.54}, {'end': 1164.828, 'text': 'Steer equals p5 vector dot subtract desired minus this dot velocity.', 'start': 1158.827, 'duration': 6.001}, {'end': 1166.769, 'text': 'Return steer.', 'start': 1165.509, 'duration': 1.26}, {'end': 1174.07, 'text': "The idea here is that I'm going to calculate that force and return it because when I get it up here, I can then apply it.", 'start': 1167.209, 'duration': 6.861}, {'end': 1175.491, 'text': "So let's see how this goes.", 'start': 1174.471, 'duration': 1.02}, {'end': 1176.051, 'text': 'We should be good.', 'start': 1175.571, 'duration': 0.48}, {'end': 1183.969, 'text': 'Well, what did I forget? I forgot to actually call applyBehaviors.', 'start': 1179.147, 'duration': 4.822}, {'end': 1188.771, 'text': "So I'm going to say v.apply, or did I just call it behaviors? Behaviors.", 'start': 1185.089, 'duration': 3.682}, {'end': 1190.411, 'text': 'I could call it steering.', 'start': 1189.471, 'duration': 0.94}, {'end': 1191.672, 'text': "I don't know what would make sense to call it.", 'start': 1190.431, 'duration': 1.241}, {'end': 1194.733, 'text': "OK So now, look what's happening.", 'start': 1191.912, 'duration': 2.821}, {'end': 1196.374, 'text': "It's seeking that spot.", 'start': 1195.253, 'duration': 1.121}, {'end': 1197.214, 'text': "And it's doing it.", 'start': 1196.614, 'duration': 0.6}, {'end': 1198.415, 'text': "It's very good at seeking it.", 'start': 1197.334, 'duration': 1.081}, {'end': 1199.755, 'text': "So it's like finding it, moving back.", 'start': 1198.555, 'duration': 1.2}, {'end': 1203.397, 'text': 'So I got this like sort of crazy like, frenetic shaking things.', 'start': 1199.915, 'duration': 3.482}], 'summary': 'Calculating and applying force for effective steering and movement.', 'duration': 53.652, 'max_score': 1149.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-41149745.jpg'}, {'end': 1236.858, 'src': 'embed', 'start': 1213.263, 'weight': 4, 'content': [{'end': 1221.589, 'text': "So how good is it at steering? Because right now, it's kind of like an idealized vehicle that can steer as well as it ever might need to be.", 'start': 1213.263, 'duration': 8.326}, {'end': 1225.071, 'text': "So I'm going to say 0.3 is kind of a magnitude maximum.", 'start': 1221.709, 'duration': 3.362}, {'end': 1232.195, 'text': "And then when I calculate that steering force, I'm going to say steer limit this dot maximum force.", 'start': 1225.491, 'duration': 6.704}, {'end': 1236.858, 'text': "So what you'll see here is that steering force won't be as strong,", 'start': 1232.776, 'duration': 4.082}], 'summary': 'Testing steering performance with a 0.3 magnitude maximum force.', 'duration': 23.595, 'max_score': 1213.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-41213263.jpg'}, {'end': 1308.668, 'src': 'embed', 'start': 1260.184, 'weight': 1, 'content': [{'end': 1263.646, 'text': "I want to implement an algorithm that's known from the paper as arrive.", 'start': 1260.184, 'duration': 3.462}, {'end': 1267.109, 'text': 'And again, everything boils down to desired velocity.', 'start': 1264.267, 'duration': 2.842}, {'end': 1273.193, 'text': 'And what the arrive behavior says is, please go to the target, but not as fast as possible.', 'start': 1267.509, 'duration': 5.684}, {'end': 1280.278, 'text': 'You want to go, your speed, your magnitude of your velocity is relative to how far away from the target you are.', 'start': 1273.613, 'duration': 6.665}, {'end': 1283.239, 'text': "Meaning if I'm really far away.", 'start': 1280.738, 'duration': 2.501}, {'end': 1285, 'text': 'I want to go really fast.', 'start': 1283.359, 'duration': 1.641}, {'end': 1287.461, 'text': "but if I'm really close, I want to go really slow.", 'start': 1285, 'duration': 2.461}, {'end': 1291.262, 'text': "and what this will cause is, if I'm here And I am going really fast,", 'start': 1287.461, 'duration': 3.801}, {'end': 1299.025, 'text': "my steering force will cause me to slow down and if I'm at the target I want to be going, my desired velocity is zero the magnitude.", 'start': 1291.262, 'duration': 7.763}, {'end': 1308.668, 'text': 'So this is going to, instead of having the the object overshoot, it actually slow down and stop.', 'start': 1299.025, 'duration': 9.643}], 'summary': "Implement 'arrive' algorithm adjusts velocity based on distance to target.", 'duration': 48.484, 'max_score': 1260.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-41260184.jpg'}, {'end': 1471.437, 'src': 'heatmap', 'start': 1425.898, 'weight': 0.834, 'content': [{'end': 1436.905, 'text': "I'm going to change up here to say arrive equals this dot arrive the target, and then apply the arrive behavior.", 'start': 1425.898, 'duration': 11.007}, {'end': 1441.33, 'text': 'So you can see that this is now kind of working.', 'start': 1438.769, 'duration': 2.561}, {'end': 1443.512, 'text': "You know, there's some little like goofiness of.", 'start': 1441.53, 'duration': 1.982}, {'end': 1447.113, 'text': "maybe there's a little bit noise of it, sort of like jiggling, but it looks like they've all settled into a spot.", 'start': 1443.512, 'duration': 3.601}, {'end': 1448.834, 'text': "So let's see if this is really working.", 'start': 1447.354, 'duration': 1.48}, {'end': 1453.317, 'text': "The way to know if this is really working is I'm not going to start them at their target anymore.", 'start': 1449.535, 'duration': 3.782}, {'end': 1456.939, 'text': "I'm going to say random width, random height.", 'start': 1453.857, 'duration': 3.082}, {'end': 1462.762, 'text': "And now we're going to see them all move into their spot.", 'start': 1459.06, 'duration': 3.702}, {'end': 1464.763, 'text': "That's pretty good.", 'start': 1464.183, 'duration': 0.58}, {'end': 1468.936, 'text': 'Ta-da! So on the one hand, I could consider this finished.', 'start': 1466.294, 'duration': 2.642}, {'end': 1471.437, 'text': "There's so many possibilities here.", 'start': 1469.396, 'duration': 2.041}], 'summary': 'Testing arrive behavior for movement, observing settling into spots, considering possibilities.', 'duration': 45.539, 'max_score': 1425.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-41425898.jpg'}], 'start': 1080.013, 'title': 'Vehicle steering and arrive algorithms', 'summary': "Explains vehicle steering algorithm, discussing desired velocity, maximum speed, steering force, and introducing a variable for steering control. it also discusses implementing the 'arrive' algorithm, which adjusts the speed of an object relative to its distance from the target, showcasing the impact on the behavior and demonstrating additional features like flee and weight adjustments.", 'chapters': [{'end': 1236.858, 'start': 1080.013, 'title': 'Vehicle steering algorithm', 'summary': "Explains a vehicle's steering algorithm, discussing the calculation of desired velocity, maximum speed, steering force, and introducing a variable for steering control, referencing reynolds' paper and utilizing specific values such as a maximum speed of 5 and a steering limit of 0.3.", 'duration': 156.845, 'highlights': ["The chapter explains the calculation of desired velocity, where the desired vector is obtained by subtracting the target vector from the object's position, and sets the desired velocity to the maximum speed of 5.", 'It introduces a variable for steering control, setting a maximum force of 0.3 to limit the strength of the steering force.', 'The author discusses the process of calculating the steering force, emphasizing its application and control through the introduced variables.', "The chapter details the concept of seeking a target and the adjustment of the vehicle's behavior to seek and move towards the target."]}, {'end': 1844.2, 'start': 1236.858, 'title': 'Implementing the arrive algorithm', 'summary': "Discusses implementing the 'arrive' algorithm, which adjusts the speed of an object relative to its distance from the target, showcasing the impact on the behavior and demonstrating additional features like flee and weight adjustments.", 'duration': 607.342, 'highlights': ["Implementing the 'arrive' algorithm The chapter primarily focuses on implementing the 'arrive' algorithm to adjust the speed of an object relative to its distance from the target.", 'Impact on object behavior The algorithm causes objects to slow down and stop when approaching the target, preventing overshooting.', "Demonstration of additional features like flee and weight adjustments The chapter also demonstrates the integration of the 'flee' algorithm and the adjustment of weights for different forces, showcasing the impact on object behavior."]}], 'duration': 764.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4hA7G3gup-4/pics/4hA7G3gup-41080013.jpg', 'highlights': ['The chapter explains the calculation of desired velocity and sets the desired velocity to the maximum speed of 5.', "Implementing the 'arrive' algorithm to adjust the speed of an object relative to its distance from the target.", "The chapter details the concept of seeking a target and the adjustment of the vehicle's behavior to seek and move towards the target.", 'The algorithm causes objects to slow down and stop when approaching the target, preventing overshooting.', 'Introduces a variable for steering control, setting a maximum force of 0.3 to limit the strength of the steering force.']}], 'highlights': ['The chapter demonstrates the usage of the textToPoints function in JavaScript to convert text into an array of objects with x and y coordinates, facilitating the creation of visual elements.', 'The chapter showcases the use of an algorithm to draw the locations of all the vertices in a piece of text, offering the potential for diverse visual effects and transformations, such as changing colors, movements, and shapes.', 'The concept of implementing autonomous agents using desired velocity and steering forces creates lifelike and improvisational quality.', 'The chapter explains the calculation of desired velocity and sets the desired velocity to the maximum speed of 5.', 'The chapter discusses employing the steering algorithm and references tutorials from chapter six of the Nature of Code book about autonomous agents and Braitenburg vehicles.']}