Coding Challenge #59: Steering Behaviors

Подписаться 1,7 млн

Просмотров 188 тыс.

50% 1

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: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #58: ...
🎥 Next video: • Coding Challenge #60: ...
🎥 All videos: • Coding Challenges
References:
📓 Steering Behaviors paper: www.red3d.com/cwr/steer/
Videos:
🎥 Nature of Code Steering Behaviors Playlist: • 6: Autonomous Agents -...
🔴 Live Stream #79: • Live Stream #79: 3D Ea...
Related Coding Challenges:
🚂 #69 Evolutionary Steering Behaviors: • Coding Challenge #69: ...
🚂 #124 Flocking Simulation: • Coding Challenge 124: ...
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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#steeringbehaviors #craigreynoldssteering #texttopoints #p5js #javascript

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 278

@igotapochahontas 5 лет назад

Should've called the "flee algorithm" the 'elephant algorithm'. Because it's afraid of the mouse. I'm here all week...

@hue_dream3568 2 года назад

Thats so smart...

@RedHair651 Год назад

Very clever

@Lysness 7 лет назад

This is what I imagine coding with Bob Ross would be like.

@harukogaki 7 лет назад

111slb except he doesn't beat the devil out of anything

@nngogol244 6 лет назад

LUUUULZ

@mimiorbe8273 6 лет назад

Thanks for the Video! Excuse me for the intrusion, I would love your thoughts. Have you researched - Trentvorty Kids Science Theorem (do a google search)? It is a good one off guide for becoming an excellent parent minus the normal expense. Ive heard some amazing things about it and my mate after a lifetime of fighting got astronomical results with it.

@mikedoan5214 6 лет назад

that's not how you advertise efficiently

@michaldvorak2230 6 лет назад

ups, can't name the variable point, because it's already a p5.js function - HAPPY LITTLE ACCIDENTS!

@chrissesock4245 7 лет назад

Your positive attitude and cheer always put me in a good mood. These videos have become my go-to when I'm stressed out or nervous.

@TheCodingTrain 7 лет назад

That's so nice to hear!

@thecollectorsstudio4245 2 года назад

@@TheCodingTrain 8

@Grizix 7 лет назад

I already read your book, so I know most of the code in this challenge, but that's so much better when you do the train between theoretical explanation and hazardous coding. I really love your videos, even if it makes me regret I never had a teacher like you.

@AmeeliaK 4 года назад

I have searched for the "text to points" function all my (coding) life, I looked into every graphics library I saw, I even searched for it in the p5 doc but I didn't know how to call it, so I never found it. Now the creative ideas are flowing and I know how to implement them. Thank you so much!

@albertorep97 6 лет назад

Man, I know this video is pretty old, but you are amazing, probably my favorite channel in RU-vid (no kidding). I am motivated to learn about technology and code watching your videos man.

@kiriitoh 7 лет назад

You make my bus journey to college productive!!! Thanks!

@NeverBeenToBrisbane 7 лет назад

omg thank you so much for confirming a prototype tutorial! I'm super excited about it now :D you better stick to it!

@TheCodingTrain 7 лет назад

Part 1 is already published, check recent uploads!

@prashanthkumar0 6 лет назад

you are awsome bro you explain every little things required for programming in your all videos love your style😋

@___aZa___ 7 лет назад

you are the best teacher ever! :)

@TheCodingTrain 7 лет назад

Thanks for the nice feedback!

@c.toobitz7566 2 года назад

This is amazing. Thank you so much for the video!

@anogrotter1985 7 лет назад

Damn daniel back at it again with the white points. [I'm never getting tired of this meme] Great video as always. I'm really interested in this subject (actually discovered your channel through those old steering behavior videos) so it's always nice to see more of that. Would love to see some complex ideas you come up with in steering.

@TheCodingTrain 7 лет назад

Wait, what's the "points" meme?

@mrduck7957 7 лет назад

10:47 This is why I love you you are the best.

@stylextv 6 лет назад

The alpha in the text objectives is for pixels on the edge, so the edges don't look so pixelated.

@grainfrizz 7 лет назад

So beautiful, Dan! I love you already.

@Dimi-Tech 4 года назад

Dude thanks for everything, you are legend! U DA BOSS !!!

@kiriitoh 7 лет назад

Sooo COOL, nice vid!

@camelcase9225 7 лет назад

This was really great!

@robertborghesi4349 6 лет назад

Awesome, love it

@dr_frankenmiller2607 2 года назад

Thank you for all the great content and coding adventures, it's really fun to hang out here and be productive few hours expanding coding portfolio and developing cool skills You say "Uhh.." sounds exactly like BH from MTV's Beavis and Butthead HaHa I can't help it

@anusha8085 3 года назад

This is so cool...I first saw it in Anurag Hazra's project in his website. Totally blew up my mind

@tc536890 7 лет назад

Wacky but entertaining and informative as ever, love it !

@ErnestGWilsonII 7 лет назад

Another awesome video!

@asafshitrit3878 7 лет назад

another day another great challange ! keep up the good work dan :)

@TheCodingTrain 7 лет назад

Glad to hear you liked it!

@sibamarcel9428 6 лет назад

Wow so simple. You're the best...

@morphman86 5 лет назад

Everything is relative! Position is where things are. Velocity is change in that position. Acceleration is change in that velocity. (A bit misnamed, as it could also be a deceleration or nothingness, but the proper term of deltaV is harder to put in variables and much more confusing) So acceleration is the change in the change of the position.

@kmjohnny 7 лет назад

First I saw Steering Behaviour in Mat Buckland's book, still amazing stuff.

@AlissonNunes 7 лет назад

Awesome!!!

@muhammadzeeshan6965 6 лет назад

Awesome :)

@michaelsohnen6526 6 лет назад

If I didn't know about the p5 font library, I would write text to a p5 graphics and then analyze the pixels in the graphics object to see where the text-interior /text-border is

@anirudh6642 5 лет назад

I had a nightmare about that dance gif at the end. It was a gif in my dream for 20 days. shook.

@PilatusAnon 2 года назад

Man this guy is such a nerd. I love his videos

@pansilukv 4 года назад

WOW !!! He is the man.

@tinylittleanj2 5 лет назад

That was cool

@ssuntexx 7 лет назад

Watched the Stream Now Ganna Watch the video! Btw The Dots game ( The game you said you liked on your phone) is pretty fun, and I just realized something, this dots game, and this dot. Illuminati Confirmed

@JohnJ-xm3fg 7 лет назад

function Shiffman(){ this.dot = function(){alert("this.dot() song");}; this.dot("game"); }; var shiffman=(new Shiffman().dot()); for(;;;){ shiffman.dot(); }

@JensAndree 7 лет назад

This video only seems to be available from your playlist and not by browsing your videos... ...but apart from that I really liked what you did here! This was way harder to do with 68k assembler back in the days ;)

@TheCodingTrain 7 лет назад

This video will be officially released later this week. Glad you liked it! -MB

@JohnJ-xm3fg 7 лет назад

The Coding Train i just got a notification so i assume its released

@GABRIELFILMSTUDIOS 7 лет назад

Who is MB?

@haifengzeng464 7 лет назад

Great lesson, how can I get 'textBound' with a given font or any fonts ,or image bound?

@nikitamalpani8602 5 лет назад

V nice idea...

@karlduckett 7 лет назад

Awesome as usual! Can I ask why don't you use Atom + P5 library installed and use the preview panel for live updates? Is it better setting up the local host and continually switching to the browser?

@xnick_uy 7 лет назад

Good video! A new idea for a challenge: make a program that initially recognizes some mouse gestures, and then turn it into some sort of OCR, where you can draw letters using the mouse and the program can identify what you are writing (matching your drawing to a letter from the font file).

@mikstevan 7 лет назад

x nick That would be cool and would most likely entail using neural networks :)

@RupertBruce Год назад

@20.45 Have a display showing the animation and a prize for finding the text. It would be easy for AI (or a behavior-parsing algorithm from a clever student)

@flolow.4990 4 года назад

Here is the code for Processing(JAVA): ArrayList points = new ArrayList(); void setup() { //fullScreen(); size(800, 600); for (int x = 10; x < width; x += 10) { for (int y = 200; y < height-200; y += 50) { points.add(new Point(x, y)); } } } void draw() { background(0); for (Point p : points) { p.show(); p.test(); } } class Point { PVector rightloc; PVector loc; PVector move; float speed = 5; int radius = 150; Point(float x, float y) { rightloc = new PVector(x, y); loc = new PVector(x, y); move = new PVector(0, 0); } void show() { fill(255); stroke(255); ellipse(loc.x, loc.y, 10, 10); } void test() { PVector richtung = new PVector(0, 0); float d = dist(mouseX, mouseY, loc.x, loc.y); if (d < radius) { PVector mouse = new PVector(mouseX, mouseY); richtung = PVector.sub(loc, mouse); richtung.normalize(); richtung.mult(3); } else { richtung = PVector.sub(rightloc, loc); richtung.normalize(); } move.add(richtung); int genauigkeit = 10; if (!(d < radius) && rightloc.x = loc.x-genauigkeit && rightloc.y = loc.y-genauigkeit) { move.set(0, 0); loc.set(rightloc); } else { move.limit(30); move.mult(0.9); } loc.add(move); } }

@Guil118 7 лет назад

You should make the background color the number of the episode. It would be so meta.

@sariaghaziri6448 5 лет назад

I am trying SO hard to do this on Processing it is so different! Have you done any tutorials explaining how to extract font path points from Strings on Processing?? You're the best!

@TheCodingTrain 5 лет назад

Check out: www.ricardmarxer.com/geomerative/

@CherPsKy 7 лет назад

You are inspirational, sir. What did you study? You're a robot.

@SigmaSixSoftware 7 лет назад

Hey Dan do you know if the foreach loop was included in the latest version of Processing, It's just conviennient thats all

@GawblyOG 7 лет назад

Love your videos!!! I wonder why you're still using annotations, don't you think it's time to move to end screens?

@TheCodingTrain 7 лет назад

Yup, planning on trying this out soon!

@hoseinmovahedi999 5 лет назад

It's very interesting

@ekarademir 7 лет назад

The overall behaviour of the particles seems like springs. In fact the definition of arrive is just like Hooke's law.

@TheCodingTrain 7 лет назад

Ah, excellent point!

@jan_harald 7 лет назад

101th like... also...would be a nice loading screen...

@Grizix 7 лет назад

Don't you have to limit the velocity to maxspeed in Vehicle.update ?

@ddcddc_ 5 лет назад

So... a steering algorithm is a negative feedback loop, just like the ones in opamps and control systems?

@seamikiseamiki1825 7 лет назад

First of all let me express my gratitude because without your teaching method/style/examples i would have never got into coding. Is there a way to have the textToPoints() function to be consistent wit the textAlign() function? Playing around i found an offset between the points and the text whenever I aligned the text with textAlign(CENTER).

@Grizix 7 лет назад

I'd really like a coding challenge about random walking agents. Can't manage to make mine satisfying.

@sujals7108 5 лет назад

It's already made. Check the nature of code series

@realcygnus 7 лет назад

Neat-O

@cool-as-cucumber 7 лет назад

@The Coding Train How can get reference of current font? I didnt find any function to do something like font = currentFont(). It is necessary to load a external font?

@akshatamurdeshwar8867 4 года назад

In the video you have said how it would be possible to make the points from one word to form another one (ofcourse, that would require splitting or joining of points etc). For example on clicking, I am wondering how this could be done. I have been working on this for a long time but can't seem to figure it out. If anyone has any leads, could you point me towards them? Thank you all!

@FellippeHeitor 7 лет назад

At 20:55 it looks like what Apple added to the messaging app and called "Invisible Ink"

@ManosChalvatzopoulos 7 лет назад

Hello Daniel, first of all i would like to thank you for these awesome videos. I have a question. I realized that the atom editor is putting automatically ; at the brackets of prototype functions, and as a result the code was not working, then i removed ; and it worked just fine. Can you please explain me why did this happened ?

@lizabeti3457 5 лет назад

A mouse button press to keep the dots from every letter following the cursor then when releasing they would go on their places would be nice xD

@santhanam2855 5 лет назад

Adding a mouse motion light and mapping it with the motion of the dots would do that I'm thinking

@swaree 7 лет назад

A Gosper's Glider Gun or another automata machine would be great

@lucarodas1588 7 лет назад

Good.

@JuanGarcia-lo2el 4 года назад

Do you have a tutorial about how to set a computer with all the necessary to code with p5.js ?

@ThomasChen-ur2gt 6 лет назад

keeping showing loading when using loadFont, really don't know why. Can anyone help?

@cody1834 7 лет назад

Can you provide a link for the beginners to learning code? Down to the basics of using a few most popular softwares.

@dannyshf1993 7 лет назад

i tries to run the program on atom text editor, how do i see the output? all i received is JavaScript - attractor_repulsion.js:17

@Marcsine 7 лет назад

Makes this.r, a variable that holds the strokeWeight of the points. Forgets and just uses a hard-coded number...

@peterlang6911 7 лет назад

Coding Challange: can you programm conway's game of life pls?

@JohnJ-xm3fg 7 лет назад

Peter Lang +Daniel Shiffman Conway's game of life!

@TheCodingTrain 7 лет назад

I have a video about it already, but I like the idea of doing it as a challenge. Upvote here! github.com/CodingTrain/Rainbow-Topics/issues

@JohnJ-xm3fg 7 лет назад

The Coding Train TIP: dont forget "this dot" lol Great vids btw Have a good day

@Dhakshith1189 6 лет назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FWSR_7kZuYg.html

@benjamintroquereau6163 7 лет назад

could you implement dynamic grap with clusterization

@gakarik 7 лет назад

how can i implement font.textToPoints()? can u make a video to talk about it? i hope u will make that!

@user-xv9ni2jj7t 7 лет назад

I have a code challenge for you. Lets call it idk, "Shazam challenge". Try to find a song from a 2-5 sec. part song where its location is x1 and the parts position in original song is x2. Doing this for 3 months, would be awesome to see your way doing it. Paul

@maxwellbrookes1165 4 года назад

is there a Font.textToPoints() equivalent in java?

@BioHazardKillzHD 7 лет назад

Bob Ross of code - Dan

@benjaminvancleave2310 6 лет назад

It is slow loading on android mobile devices is an issue I seem to be having. Any help???

@Johanvanderschelling 6 лет назад

I'm completely stuck trying to load the font. I setup a local server with node.js. I get the following error: sketch.js:22 Uncaught TypeError: font.textToPoints is not a function at setup (sketch.js:22) at p5. (p5.js:8900) at _runIfPreloadsAreDone (p5.js:8853) at p5._decrementPreload (p5.js:8862) at p5.js:19362 at p5.js:1123 at XMLHttpRequest.request.onload (p5.js:972) Suggestions anyone?

@leimapapa 7 лет назад

Anybody know how to add multiple words with a carriage return? Like "train" on one line and "tracks" on the next? Like this: train tracks

@adpio6996 3 года назад

can we do same thing with outline of loaded svg?

@poorman-trending 5 лет назад

Towards the end you mention there are some ways to keep from slow down when doing comparisons between every object (n^2 order). Where can I find information on those techniques?

@097_shashanksahu6 5 лет назад

Hey,if i understood your problem. Correctly Quadtree is what you are looking for. DAN has already made some nice videos on them. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OJxEcs0w_kE.html

@PetrosPollakis 4 года назад

Console give me TypeError: undefined is not an object (evaluating 'font.textToPoints') why is that happen?

@1732ashish 5 лет назад

textToPoints function is cool.. do we have any equivalent in java API

@mbpl10 7 лет назад

How do You get Atom to insert spaces between + - * etc.?

@luiscraftpt3753 7 лет назад

were you get this font ?

@LoomisRex 7 лет назад

this steering is very familiar to PID controllers

@ryacdebarros1904 7 лет назад

It says i have a problem when trying to load the font. Is it essential?

@maximilientirard1720 7 лет назад

How close is the steering behavior to a PID or PD controller?

@harshitgupta2515 6 лет назад

"textToPoints is not defined" this statement is shown what I have to do please help me sir

@darknessfalls714 7 лет назад

Mac or Pc, and what specs ? I want to invest in a computer that will last me throughout college for multiple languages too

@haleemulhassan9158 7 лет назад

I have a question regarding p5.js. Could we maybe use other js libraries WITH p5.js? Like velocity.js or greensock or three.js etc? I think combining the drawing powers of p5 with other libraries would really yield even more awesome results and possibilities

@TheCodingTrain 7 лет назад

Absolutely yes! I'll try to cover this in future videos.

@haleemulhassan9158 7 лет назад

Awesome! Really looking forward to it. You are my programming hero

@sujals7108 5 лет назад

He has already used physics engines so I think it's already done.

@ouza1430 6 лет назад

how to change the color of the font ..not the background

@camilabianchi689 3 года назад

is it possible to do something similar on a WEBGL canvas ?

@quickscopesheep5994 3 года назад

This is who everyone wishes there IT teacher was

@BrunoBarcelosAlves 4 месяца назад

I haven't read Vehicles but I watched the Disney Pixar film adaptation.

@ritikkhatri 6 лет назад

10:45 Best Part

@kennethgreer 7 лет назад

When I'm working in atom and I make a change in my code and save it, chrome won't load the updated files until I rehost them on a different port using hode http server. Is this a problem with my chrome settings? Am I missing a step somewhere?

@kennethgreer 7 лет назад

Nevermind I found the disable cache option. I knew I would figure it out as soon as I posted this comment.

@hascheidl 6 лет назад

Any tips about an equivalent of "textToPoints" in Processing (java)?

@TheCodingTrain 6 лет назад

Try looking up the geomerative library.

@hascheidl 6 лет назад

The Coding Train thanks Dan! I was skeptical since the library hasn't been updated in a long time, but it worked like a charm! Needed to port the JS "Vehicles" to java-equivalent and combine with the code samples from geomerative... I will put it to github

@3stylaz 7 лет назад

Don't forget the script source, script source. 🎼Script sooource, script sooource, script source script source song DRY principles in coding train songs 😊

@FM-lc6hp 6 лет назад

why i get this error:( sorry i'm new here. "XMLHttpRequest cannot load file:///D:/Electron-Project/Repulsion_Force/AvenirNextLTPro-Demi. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

@ntarun2000 6 лет назад

Me too. I did a bit of debugging and found that loadFont() is causing that error. Anybody any idea?

@darkbabaf4899 6 лет назад

you need to run on localhost

@Dhakshith1189 4 года назад

Is there a text to points function in processing?

@charbelsarkis3567 7 лет назад

my file says could not load font why does it say that? by the way i am using Asimov.otf i tried another one name roboto.ttf both didn't work for me should i install the file before using it?

@leandroaraujo4201 5 лет назад

Maybe because you're not using a server to load the file, it's a CORS ( cross origin Resource Sharing ) security error. Btw you can use a local server, there are many ways to do that, via Python, Node.js, XAMPP, etc. Have a nice day.

@TheAverageDev1 6 лет назад

couldnt you also make like a line that is the same color as the background and put it behind the letters and make the line travel across the screen at a desired speed and make the circles that make up the letters repel from that line and make the circles fade out to the color of the background and make them where the circles dont come back and it is like the word explodes out and fades away, and also before the line goes across leave a little bit of time to have time to read it

@TheAverageDev1 6 лет назад

like if you agree