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!

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

[@mrduck7957]

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

[@kiriitoh]

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

[@___aZa___]

you are the best teacher ever! :)

[@TheCodingTrain]

Thanks for the nice feedback!

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

[@stylextv]

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

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

[@grainfrizz]

So beautiful, Dan! I love you already.

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

[@anusha8085]

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

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

[@kmjohnny]

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

[@anirudh6642]

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

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

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

[@PilatusAnon]

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

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

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

[@c.toobitz7566]

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

[@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(); }

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

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

[@prashanthkumar0]

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

[@haifengzeng464]

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

[@asafshitrit3878]

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

[@TheCodingTrain]

Glad to hear you liked it!

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

[@robertborghesi4349]

Awesome, love it

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

[@Guil118]

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

[@camelcase9225]

This was really great!

[@tc536890]

Wacky but entertaining and informative as ever, love it !

[@kiriitoh]

Sooo COOL, nice vid!

[@Dimi-Tech]

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

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

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

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

[@sibamarcel9428]

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

[@maxwellbrookes1165]

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

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

[@3stylaz]

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

[@ErnestGWilsonII]

Another awesome video!

[@Marcsine]

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

[@quickscopesheep5994]

This is who everyone wishes there IT teacher was

[@JuanGarcia-lo2el]

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

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

[@adpio6996]

can we do same thing with outline of loaded svg?

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

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

[@SigmaSixSoftware]

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

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

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

[@swaree]

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

[@user-mg8jd4jv6e]

Why would you need the acceleration property on the vehicle? Since you are adding it to the velocity exactly once per update and reseting it afterwards, I think adding the force directly to the velocity would give the same result. I may just be dumb though.

[@leandroaraujo4201]

I think he did that to increase the velocity of the points over time, instead of having them always move at the same speed.

[@ddcddc_]

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

[@wilfreddv]

This at 1.5x speed... Oh my

[@igotapochahontas]

Hilgert Bos just tried it. Game changer.

[@muhammadzeeshan6965]

Awesome :)

[@jan_harald]

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

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

[@BioHazardKillzHD]

Bob Ross of code - Dan

[@cody1834]

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

[@gakarik]

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

[@BrunoBarcelosAlves]

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

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

[@pansilukv]

WOW !!! He is the man.

[@TheAverageDev1]

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]

like if you agree

[@AlissonNunes]

Awesome!!!

[@benjamintroquereau6163]

could you implement dynamic grap with clusterization

[@Grizix]

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

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

[@camilabianchi689]

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

[@PetrosPollakis]

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

[@FellippeHeitor]

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

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

[@LoomisRex]

this steering is very familiar to PID controllers

[@swaree]

I suggest a renewal of the Conway's game of life

[@TheCodingTrain]

Yes, I think I will do this soon!

[@maxbranco7321]

Vehicles, vehicles, vehicles, vehicles, vehicles, vehicles, vehicles, vehicles, vehicles... Vehicles has lost all it's meaning.

[@1732ashish]

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

[@luiscraftpt3753]

were you get this font ?

[@regnatus6031]

What Coding editor do you use for these videos?

[@stinkytoby]

Regnatus Programs used are on the left of the screen. It's "Brackets"

[@regnatus6031]

Thanks, looks like a nice clean editor so going to use it

[@Nola1222Piano]

Regnatus He used brackets one time. his regular editor is "Atom"

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

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

[@darknessfalls714]

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

[@nikitamalpani8602]

V nice idea...

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

[@hrthykw3255]

a basic question why p5.js and not processing

[@TheCodingTrain]

I choose somewhat arbitrarily. This time I used p5.js to make use of textToPoints() function.

[@drahmin4412]

Is there a similar function for processing? I have tried looking and haven't found much on a textToPoints() for processing

[@Slinx92OLD]

Why do you use processing very rarely?

[@jaminpie6757]

Hi Daniel, what atom package that you used for the auto indent ?

[@TheCodingTrain]

atom-beautify

[@jaminpie6757]

The Coding Train thanks for that

[@hoseinmovahedi999]

It's very interesting

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

[@anthonywhyte8173]

I am trying this project out but the preload function takes forever to load.

[@TheCodingTrain]

This is most likely an issue with the filename or file itself. Can you ask at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions and you can share code there easily! Feel free to link from here to your post.

[@tinylittleanj2]

That was cool

[@mbpl10]

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

[@maximilientirard1720]

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

[@rosslahive]

Is anyone else having issues adding an otf file?

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