Coding Challenge #64.2: Inverse Kinematics

In this multi-part coding challenge, I demonstrate how to implement kinematics in Processing (Java). Code: thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ Kinematics - Part 1: editor.p5js.org/codingtrain/s...
🕹️ Kinematics - Part 2: editor.p5js.org/codingtrain/s...
🕹️ Kinematics - Part 3: editor.p5js.org/codingtrain/s...
🕹️ Kinematics - Part 4: editor.p5js.org/codingtrain/s...
Other Parts of this Challenge:
📺 Part 1: Forward Kinematics: • Coding Challenge #64.1...
📺 Part 3: Inverse Kinematics - Fixed Point: • Coding Challenge #64.3...
📺 Part 4: Inverse Kinematics - Multiple: • Coding Challenge #64.4...
🎥 Previous video: • Coding Challenge #63.1...
🎥 Next video: • Coding Challenge #65.1...
🎥 All videos: • Coding Challenges
References:
🗄 Kinematics on Wikipedia: en.wikipedia.org/wiki/Kinematics
Videos:
🎥 Polar Coordinates: • 3.4 Polar Coordinates ...
🎥 Interactive Fish Aquarium Desktop Wallpaper: • Interactive Fish Aquar...
🎥 Coding Math on KZbin: / codingmath
🔴 Livestream Archive: • Live Stream #86: More ...
Related Coding Challenges:
🚂 #3 The Snake Game: • Coding Challenge #3: T...
🚂 #111 Animated Sprites: • Coding Challenge #111:...
Timestamps:
0:00 What is the difference between forward and inverse kinematics?
3:15 Let's Code!
4:15 Segment class
8:46 Have the segment follow the mouse
11:12 Use heading() to find the angle
13:17 Move the segment to the mouse
20:30 Add a connected segment
22:05 Segment 2 follows the mouse
23:15 Add a linked list
25:52 The last segement is the "tentacle"
27:28 Add a child
29:00 Overload the follow function
34:00 Map the index to the strokeWeight of each segment
36:00 Conclusion and suggestions for variations
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: kzbin.infojoin
🛒 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...
#forwardkinematics #inversekinematics #tentacleanimation #linkedlists #arrays #processing

[@glogan2016]

my favorite part of these videos is it shows the struggle, it shows the work of making a program work. I often get discouraged because I struggle so much sometimes... this allows me to understand that it's not just me and all the people who look like they do it flawlessly also have this same process.

[@TheCodingTrain]

Thank you for this feedback!

[@PositiveANegative]

Absolutely ! Coding is learning from one's mistakes repetitively :)

[@SerBallister]

@@PositiveANegative It feels like programming is 10% writing code and 90% of the time fixing it.

[@NotEnoughAlpacas]

Absolutely! I have to keep in mind that when I watch someone's video of a project, most of the time they have cut out hours of frustration and trying to find solutions online. Very few of us are these absolute genius's that can figure everything out on our own. Especially when it comes to coding.

[@MiTheMer]

Always keep in mind, programming is 10% coding, 90% debugging ;) This is true in rough industry just like in games development.

[@241lolololol]

this man gives me hope in life.

[@TheOlian04]

Michael Douglas why?

[@Texplanations]

Because the answer to life universe and everything is 42 which equals to JS

[@cpdorli]

He's using Processing, which is Java based...

[@elfferich1212]

cpdorli java and javascript are a world of a difference. processing.js already tells you its not java.

[@Nicolas-ir9xy]

@@elfferich1212 There's processing and also processing.js which is a JavaScript port of Processing. The original version of Processing is written in Java.

[@wuzzems2850]

The Bob Ross of coding

[@PurushNahiMahaPurush]

If Bob Ross snorted a tablespoon of cocaine before filming

[@glowiever]

@@PurushNahiMahaPurush looool tru. he was speeeeedyyyy but I like it!

[@nullpointerworks4036]

There are no errors, just happy little refactoring.. :)

[@fragly]

lmfao

[@TECHN01200]

"Happy little trees", "Happy little clouds", "Happy little mountains" and "beat the devil out of it!"

[@WiperTF2]

I know nothing about Java but just randomly ended up watching this entire video, this was so brilliant! Your fun demeanor and the way you don't take yourself too serious makes a video like this so much fun to watch, and I learned a lot just watching it! Subscribed.

[@KelvenOne]

You're the best channel to teach scripting, thank you a lot, it's been months since i started searching for Inverse Kinematics, and now i found this video, your video for sure made it all easy

[@thetruth45678]

Whenever he runs into a problem, and has to do a jump cut, my brain inserts the Spongebob meme: 🌸 _Three hours later..._ 🏵

[@TheWeepingCorpse]

please do something about constraints, that's the hard part of IK.

[@PaulGoux]

Check out my implementation, its done in javascript though but it has some detailed notes. www.khanacademy.org/computer-programming/kinematics/6459923859341312

[@plazmotech5969]

@@PaulGoux Cool but it doesn't have constraints...

[@TheTessatje123]

github.com/tessavdheiden/tentacle_3d constraint in the base, is that what you mean?

[@boywithacoin]

What do you mean by constraints?

[@SerBallister]

@@boywithacoin For bones you have limited angle ranges (e.g. elbows and knees don't go backwards and are limited in how much they can twist) - this makes the IK solve more complicated as several different solutions can exist for certain poses. Think about a punching action, your shoulders, hips, elbows and everything is involved in the arm extension.

[@OleZZ222]

Even tough, I'm not familiar with Java, you explained the idea well enough so I can adapt this project for another programming language without rewatch anything. Thank you!

[@3dilson]

Randy would love this video

[@cutesexybabe69]

I never fully understood the Follow1, Follow2, Follow3 examples in Processing. This is an excellent explanation of them, thanks for that.

[@johnlime1469]

I wish I was this enthusiastic about casual programming, like how I was like 5 years ago.

[@billybollockhead5628]

Game programmer of 30 years.. never seen this explained in such a fun way.. wish I had this video 20 years ago .. I had to figure it out with boring man books

[@Kino-Imsureq]

btw, in order to do heading() function, you can just normalize the vector, and you get all of the results for the axes easily. EDIT: idk if this is right but it works for me. I'm giving this to you so your videos will be a lot easier if you try to replace PVector.heading() in 3D.

[@MrJellekeulemans]

I'd do the follows thing by keeping track of the end of the tail, and then calling a recursive function like: void follow(Seg current, XY mousepos) { if(current.parent == null) { current.follow(mousepos); return; } follow(current.parent, mousepos); current.follow(current.parent); } Of course updating and drawing also needs to happen, but with this example I wanted to show the power of recursion. It first sets the last segment to follow the mouse, and then back traces to its childs without needing a reference to child segments!

[@matsuridaisukii]

I've got the similar thing... actually we do not need both side of parent and child, only need one side when initializing it, and other side to keep follow

[@bombayvega7021]

This is my first video of ur channel, im not even half way done, and Im already your fan, Subscribed already.

[@kenan2386]

He is one of the reasons why i dont give up

[@derderrr7220]

i love the formulation and ease of comprehension of this coding squence

[@DD1tspk]

your videos are the best. hilarious and I learn a lot. 10/10 would watch again.

[@TheCodingTrain]

thank you!!

[@olatunjiomisore3461]

Very right. I am busy right now but gonna put on my mobile and watch in train!

[@cognasti]

Me coming back to watch this for the third time..

[@turtle8558]

I love this man's enthusiasm

[@TsetTsyung]

Wow, subbed. Looking forward to watching you fixed point video on the same subject. Many thanks.

[@valshaped]

This would be really good for budget mocap stuff (like using the position and rotation of a small number of points to plausibly move a 3-D model, for example)!

[@justinrose5700]

Thank you so much for doing this. You are a wonderful teacher!

[@TheCodingTrain]

Thank you so much!

[@foxfyre3600]

This is like my 'rope' simulation I made many years ago. I did not know it was called Inverse Kinematics back then. I used an array for the coordinates, the segments were at maximum a pixel apart. A mouse cursor/box/reticle, when clicked would grab a segment (search through and find a segment inside the cursor) While dragged, the algorithm would make the 'grabbed' segment follow the mouse. Let's say index 25 was grabbed. It would loop both directions. 24 follows 25, 23 follows 24 and so on back to index zero. Then 26 follows 25 and 27 follows 26 and so on to end of the rope. It behaved similar to yours, more like cotton thread than rope. Perhaps some damping might work? I am this.this close to subscribing and downloading P5, is your setup unique or default? Link video to setup? I use Windows 7

[@Yourrrr]

fox fyre3 1. this comment was so unnecessary and lengthy lol why? who asked?? 2. one of his first videos shows his work space set up

[@adamthedog1]

Unique Antoinette, I thought it was an interesting comment. No need to rag on someone for a relatively long comment.

[@Garfield100]

Unique Antoinette, who asked you :P I thought it was a nice comment.

[@clonkex]

@@Yourrrr Why do you have a problem with long comments? Nothing wrong with it. They're called comments for a reason. You don't ask someone for a comment, they just make it.

[@vaibhavpandey6640]

@@adamthedog1 yeah

[@reissner1967]

Love watching your videos! I don't have a JavaScript IDE on my iPad Pro, but if I did I would follow you.

[@RS3helper]

Software engineer here.. Thank you so much for breaking this down in terms of code.

[@yuxiang3147]

This channel deserves more subs than PewDiePie

[@Jarko1401]

Great video. Now we are waiting for IK with angle constraints,

[@pattisimus5944]

I'm so glad I found you on KZbin

[@ventezcamilo]

You Sir Are Brilliant!

[@pascalsigel]

That it is not exactly what inverse kinematics is, but is great to see other way to solve similar problem via other ideas.

[@deefstes]

14:36 - "There's probably some redundancies in the way I'm thinking about calculating this, as there always are, but let's just do this." That right there is why I enjoy these videos so much. Sure, you can always spend more time to think of a more elegant way to code a given task, but then you could spend your whole day refining your thinking and never actually coding. I'm often guilty of that; I waste so much time coming up with better ways of coding the thing that I need to code that I end up taking much too long getting it done.

[@HermanWillems]

Yes just make it work. Then if you walk against limits you can rewrite the code anyway.

[@Nastomeya]

This man make we think things easier..

[@DMSG1981]

This whole loop thing somehow defies the nesting idea... Why don't you just call the parent's update() inside of update? Same for show().

[@BlueyMcPhluey]

it's wild to see the code just pour out like this

[@alexandrosaugo7538]

That was very good but it wasnt the inv kinematics i expected :)

[@dwrobotics2180]

Argh, I've just started getting back to this for my full size humanoid robot. I forgot how much maths was involved. I'm a bit of a dummy when it comes to maths so I'll be watching this one a few time until it clicks back in my mind.

[@pianochannel100]

This final product looks suspiciously like forward kinematics. You should be able to move the end effector and have the starting position of the chain remain where it is.

[@ImErin.]

This is so cool. Ive been trying to make inverse kinematics work inside of a vr game called NeosVR for like a year now and this finally get me to the answer and now it works! Thank you

[@kstansimit4252]

you are genius! you are the man!

[@mrpantsful]

So much love

[@jesielr.lofhagen643]

I actually did manage to follow this tutorial, and translated to a game engine, I'm really surprised by that

[@corumemltanitim]

You are the best.

[@YueBeifong]

Dude you're hysterical

[@WikiPeoples]

This guy was born to be a teacher.

[@disdis6127]

That grey background is so pleasing to eyes,

[@simpasalsunda7244]

the approach is a bit different than classic mathematical model of inverse kinematics and feels so realistic to follow and implement on my project, gonna try this but on 3D plane.

[@user-gf6kf5ui6l]

Thank you .

[@ashish_prajapati_tr]

amazing

[@fikriaziz3194]

how can i know this guy at 2020 so awesome !!!

[@TheCatull]

You rock!

what did u do at 21:27 that fixed it? i cant see any change in code

[@wolf123450]

Good video, but you should be setting the child segment inside the segment class. Just parent.child = this; Doing this will help with portability of the segment class.

[@TheCodingTrain]

Great point, thank you!

[@ninjagong]

The way it moves reminds me of how claymation moves

[@cameron6464]

I perfectly translated this code from processing to p5 and it's completely broken. Why do processing functions behave differently depending on their platform?

[@nothingnoone8752]

P5 is only related to processing in spirit, definitely not syntax. Virtually *all* of the math functions work differently, most notably rotation and random()

[@chaitanya1999]

How do you adjust the speed by which the segment follows the cursor ?

[@kevnar]

Inverse Kinematics + flocking simulation = mindblown

[@vvp_id]

first i saw you, i remember the "Professor" on a Money Heist Movies.... some kind of genius man....

[@yinghaohu8784]

Is the method described here called: Cyclic-Coordinate Descent ?

[@NotEnoughAlpacas]

I really wish that the math classes required for my CS degree were CS specific. I would have had so much more interest in the math if it had been applied to code or things like this. Instead it was memorize this formula. Now plug and chug.

[@coldspade1590]

took me forever to realize this but the whole point of that plug and chug was so you would be able to do stuff like say "i have a problem...and i know an equation i can use to solve it". one great way to stay motivated is to find fun things to do with the math you learn. simple as rewriting a new equation in code or as complex as making a snake arm thingy move or whatever you want.

[@lt4376]

Motivating

[@roizdoci]

I guess you can offset the alignment and make a lot of "fishes" following the mouse

[@justinbuzon2225]

hahah you're great. Thanks for this. xD

[@lordofutub]

This guy is absolutely building terminator robots in his basement to subjugate humanity 100%.

[@terraprint9183]

Helped me to make inverse kinematics in roblox, with only a few changes to work with the different coding language, and the difference in how each segment would be made/represented!

[@ipadize]

Kinematics is also used in CNC machines

[@PacVan12]

I would really like to see you do this again, but then make a character walk with two legs or something

[@PacVan12]

This dude is so cool

[@tagaiismailov4235]

Please please please make DS and Algorithm series!!

[@coreyredmon5611]

If you wanted to make it so that it takes a second to catch up to the mouse, would you limit the magnitude of the target vector of the head?

[@TheCodingTrain]

Love this idea! You could also look at my "seek" example.

[@coreyredmon5611]

I made it in JavaScript: redmoncoreyl.github.io/snake/

[@olatunjiomisore3461]

Nice work on the link! This is very close to my project. Please can you share some experience on this with me. My email address is [e-mail]. I expect your email for conversation.

[@olatunjiomisore3461]

Hi Corey, I wonder if you got my last reply so I had to hit a reminder. I am currently working on modelling Inverse Please I will be glad if you offer to discuss with me. My email is [e-mail].

[@kingdavid_p]

Does someone know what the benefit of him using java instead of something like python which is what most use for IK?

[@baarg8672]

34:09 great you've made artistic lazy stroke!

[@RickTrajan]

When I was just looking how to use inverse kinematic in programming, and instead realize the importance of a goal.

[@furtosstelianemanuel85]

i am doing this in netbeans and i dont know what function to replace heading() with ,the Vec2d class doesnt seem to have anything like that ,what should i do ?

[@furtosstelianemanuel85]

nvm i used angle=Math.atan2(ty-a.y, tx-a.x); and it seems to work

[@furtosstelianemanuel85]

i cant belive it , i just made another java class , droppeD the source code for the pvector class ,and now i can use almost everything from it,THANK YOU

[@Iconejey]

@@furtosstelianemanuel85 isn't it (tx - a.x) before (ty - a.y)?

[@furtosstelianemanuel85]

@@Iconejey nope , that seemed strange to me at first aswell

[@anuragsati4825]

Can you do something other than p5.js

[@abundantharmony]

What could those backwards rainbow stickers possibly mean?

[@That_0ne_Dev]

I would love to just sit in a room with this man and let him talk.

[@quillaja]

To drive a group of 'snakes' around using steering behaviors/boids would be sweet.

[@quillaja]

Here's a simple example for anyone interested. I implemented my 'snakes' using a singly linked list instead, though. www.quillaja.net/snakes/

[@realcygnus]

super

[@phucwall121]

he's really funny inside and outside :))

[@qwertoony4243]

THIS GUY IS BIG SMART

[@angelcaru]

I changed the follow() function. Now it looks like this: void follow(PVector target){ follow(target.x,target.y); } void follow(float tx,float ty){ PVector target = new PVector(tx,ty); PVector dir = PVector.sub(target,a); angle=dir.heading(); dir.setMag(len); dir.mult(-1); a=PVector.add(target,dir); if(parent!=null){ parent.follow(a); }

[@lepruconx]

how could you combine inverse and forwards kinematics and what would it become?

[@melficexd]

Apply forward kinematics then inverse on the calculated pose, that's the normal approach. IK is usually used to fix FK into proper positioning

[@PaulGoux]

Something like this perhaps, please note its a work in progress. www.khanacademy.org/computer-programming/kinematics/6459923859341312

[@Bisskuits]

Hi everyone! This is working well in a 2D environment. But I'm trying to apply that inverse kinematics in a 3D environment. Any idea on how to calculate B based on xyz instead of just xy? Thanks by advance :)

[@nikkiofthevalley]

Did you figure it out at some point? I have the same problem

[@masterjcoz]

the 'we're actually done' xD (16:15)

[@grahambo-42]

I envision the next uber snake game. No more NSEW only. Now you can go at 30,45,60 degree turns.

[@robbie_]

No mention of Jacobians :).

[@numero7mojeangering]

your anlge is just: atan2(x2 - x1, y2 - y1)

[@numero7mojeangering]

@Rotten Brainz maybe

[@sasuke2910]

Why would you use heading()? Isn't the point of this to explain the maths? This turns it into a Processing specific tutorial where now we have to look for other sources or the Processing source code to write an implementation.

[@KnakuanaRka]

Jeru Sanders I think it would be pretty easy to implement calculating the heading in other languages, but yeah, that was an oversight.

[@avananana]

Mate, if this was about maths, he wouldn't be using Processing to begin with.

[@PaulGoux]

Thats what i thought too, but you can do it all withought processing or Pvector. The mouse sets the point for the first heading, take its x and y component separately and calculate the distance to the first point, then just apply dy/dx and do atan(dy/dx) to get the heading angle. Probably otherways of doing this but it works. Heres an example. www.khanacademy.org/computer-programming/kinematics/6459923859341312

[@blenderanimator6375]

Yes

[@abcqer555]

your awesome

[@TheCodingTrain]

Thank you!

[@hattybin]

Is it possible to incorporate a z axis?

[@Fool672]

Mike Hatfield For sure, it would just need some calculus if you wanted the segments to retain their volume

[@chaitanya1999]

Why do we need a = target vector + dir vector ? We can just directly set a = targetVector

[@chaitanya1999]

Got it myself. We need to set the point B on the target and not point A. PLUS- We can actually subtract dir from target vector instead of multiplying by -1 then adding to it.

[@linaalrashid]

any one can tell me , what's the using editor ?

[@MrDimonsky]

Why do we again, in the very beginning, make a statement ,that every next segment has an angle related to X, but not related to previous segment? In robotics with real motors it is actually so. The drive controller has no idea about orientation of the linked motor related to X. It has only a hardlink to the previous segment(s), and therefore the angle related X axis at every time moment is an unknown value, available only on a master-controller level - the controller that manages the motion of the whole "arm" can calculate it.

[@michalski9141]

what is he using to make windows and draw lines?

[@dave6012]

Perlin noise: *exists* Daniel: 👁👄👁

[@deter4122]

What font is he using?

[@King-Julien]

I saw the first mistake before you! I think much of myself, I'm still stupid though!

[@wyb314]

You are God!

[@yggdrasilthousandsand3124]

3:20 "jadi jada jada" this took away my last doubts about your broad general IT knowledge.