Coding Challenge #59: Steering Behaviors

[@igotapochahontas]

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

[@hue_dream3568]

Thats so smart...

[@RedHair651]

Very clever

[@Lysness]

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

[@harukogaki]

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

[@nngogol244]

LUUUULZ

[@mimiorbe8273]

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]

that's not how you advertise efficiently

[@michaldvorak2230]

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

[@chrissesock4245]

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]

That's so nice to hear!

[@thecollectorsstudio4245]

@@TheCodingTrain 8

[@AmeeliaK]

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!

[@mrduck7957]

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

[@Grizix]

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.

[@___aZa___]

you are the best teacher ever! :)

[@TheCodingTrain]

Thanks for the nice feedback!

[@kiriitoh]

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

[@stylextv]

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

[@anusha8085]

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

[@morphman86]

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.

[@albertorep97]

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

[@NeverBeenToBrisbane]

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

[@TheCodingTrain]

Part 1 is already published, check recent uploads!

[@robertborghesi4349]

Awesome, love it

[@asafshitrit3878]

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

[@TheCodingTrain]

Glad to hear you liked it!

[@flolow.4990]

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); } }

[@michaelsohnen6526]

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

[@anogrotter1985]

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]

Wait, what's the "points" meme?

[@c.toobitz7566]

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

[@maxwellbrookes1165]

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

[@anirudh6642]

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

[@kmjohnny]

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

[@grainfrizz]

So beautiful, Dan! I love you already.

[@kiriitoh]

Sooo COOL, nice vid!

[@PilatusAnon]

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

[@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)

[@prashanthkumar0]

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

[@peterlang6911]

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

[@JohnJ-xm3fg]

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

[@TheCodingTrain]

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]

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

[@Dhakshith1189]

kzbin.info/www/bejne/fIi2g5JtoL-oj8k

[@karlduckett]

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?

[@JuanGarcia-lo2el]

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

[@ssuntexx]

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]

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

[@dr_frankenmiller2607]

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

[@camelcase9225]

This was really great!

[@haifengzeng464]

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

[@JensAndree]

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]

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

[@JohnJ-xm3fg]

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

[@GABRIELFILMSTUDIOS]

Who is MB?

[@Dimi-Tech]

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

[@Guil118]

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

[@SigmaSixSoftware]

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

[@adpio6996]

can we do same thing with outline of loaded svg?

[@Grizix]

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

[@sujals7108]

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

[@muhammadzeeshan6965]

Awesome :)

[@cool-as-cucumber]

@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?

[@sibamarcel9428]

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

[@Grizix]

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

[@tc536890]

Wacky but entertaining and informative as ever, love it !

[@ErnestGWilsonII]

Another awesome video!

[@kennethgreer]

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]

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

[@PetrosPollakis]

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

[@pansilukv]

WOW !!! He is the man.

[@kalush81]

Hello there. loadFont() function seems not working when using web editor p5, or am I doing something wrong? Please help.

[@TheCodingTrain]

Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@adityarawat7313]

try changing your font's extension to .ttf !

[@heidelbeere631]

@@adityarawat7313 thanks!

[@adityarawat7313]

@@heidelbeere631 you're welcome! 😇

[@ddcddc_]

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

[@Marcsine]

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

[@luiscraftpt3753]

were you get this font ?

[@dannyshf1993]

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

[@camilabianchi689]

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

[@CherPsKy]

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

[@GawblyOG]

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

[@TheCodingTrain]

Yup, planning on trying this out soon!

[@ManosChalvatzopoulos]

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 ?

[@xnick_uy]

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]

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

[@niravyogeshasher7082]

textToPoints is not working on my laptop. I even checked the p5 library and found out that there is no such function. Exact error is font.textToPoints is not a function. Please help me with this.

[@TheCodingTrain]

Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@niravyogeshasher7082]

The website can't be loaded

[@benjaminvancleave2310]

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

[@Slinx92OLD]

Why do you use processing very rarely?

[@lizabeti3457]

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]

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

[@gakarik]

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

[@Johanvanderschelling]

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?

[@ryacdebarros1904]

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

[@ekarademir]

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

[@TheCodingTrain]

Ah, excellent point!

[@Dr_Osipov]

hi! How to make a line feed? not working

[@darknessfalls714]

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

[@seamikiseamiki1825]

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).

[@toshii2198]

Is p5.js and processing different?

[@akshatamurdeshwar8867]

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!

[@fachriem]

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]

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

[@darkbabaf4899]

you need to run on localhost

[@GabrielMonette]

Is it possible to insert it easily in a "one page" html/javascript webpage?

[@PollederBoss]

yes, it´s very easy. it looks like you have no Idea, so I start with the basics: - you need to refer a Tag in your html header with the p5.js file. you get it here: p5js.org/libraries/ - then you need to refer a Tag in your html body with the scetch.js file. Thats the file where you write or copy your javascript code inside. check out the w3 school or mozilla.org for refence and syntax on basic html stuff. There is also a "how to get started" with p5 and html playlist on coding train. Daniel Shiffman is the best teacher. I guess you want to position the canvas as well: Let´s say you want an animated header. As far as I know, you cant just replace a header picture with a canvas element, but you can overlay it from the body. Use the p5 parent() function and refer it to the css header element. p5js.org/reference/#/p5.Element/parent That´s how I would do it, but it depends on your present layout how easy you can insert it. good luck!

[@12yatrik]

how to completely fill the text with points?

[@sariaghaziri6448]

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]

Check out: www.ricardmarxer.com/geomerative/

[@charbelsarkis3567]

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]

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.

[@ThomasChen-ur2gt]

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

[@maximilientirard1720]

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

[@harshitgupta2515]

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

[@vickymalhotra3182]

hello, I tried everything, and there is just one error "Uncaught TypeError: font.textToPoints is not a function" I guess you havent provided that function in p5.js intentionally, so we cant use them. This is so annoying. Maybe i am wrong, if so, can you tell me why is that so when every other function from p5 is working fine

[@jennywang1242]

try getting the newest version of p5 (I downloaded p5 yesterday and mine works)

[@vickymalhotra3182]

hmm, ill surely test it right away :) Thanx Jenny

[@vickymalhotra3182]

Uncaught TypeError: font.textToPoints is not a function . VERSION:0.5.7

[@jennywang1242]

mm did you set the font variable to whatever loadFont() returns? (1:06) I'm not sure of the significance of preload(), but it may change the functionality of the code

[@AlissonNunes]

Awesome!!!

[@jan_harald]

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

[@vamsi3421]

Is there any problem if we dont use prototypes?

[@mbpl10]

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

[@kaivanvelden4047]

is it okay if I steat soem of thes code? :O

[@procyon6093]

I know that I'm a bit late, but is there a Javascript equivalent of the textToPoints function?

[@leandroaraujo4201]

The textToPoints function actually is JavaScript (p5), you mean Java? Processing?

[@dungtrinh843]

Why does not my letter show up later, I gave it to localhost?

[@cody1834]

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

[@haleemulhassan9158]

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]

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

[@haleemulhassan9158]

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

[@sujals7108]

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

[@realcygnus]

Neat-O

[@ouza1430]

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

[@nirmalmattmusic3993]

The function textToPoints is giving me an error. I then used your code given in GitHub but that didn't work out. Please reach out Edit: never mind I got it.

[@darioesposito5308]

Hi, how? mine don't "draw" any points...

[@rosslahive]

Is anyone else having issues adding an otf file?

[@hascheidl]

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

[@TheCodingTrain]

Try looking up the geomerative library.

[@hascheidl]

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

[@user-xv9ni2jj7t]

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

[@poorman-trending]

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]

Hey,if i understood your problem. Correctly Quadtree is what you are looking for. DAN has already made some nice videos on them. kzbin.info/www/bejne/hXvbdpapZdySoac

[@BrunoBarcelosAlves]

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

[@swaree]

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

[@shashanksahu1971]

Does processing also hav a textToPoint function

[@TheCodingTrain]

No, but check out the Geomerative library!