I do a bit of animation geekery as a side hobby, mostly in Javascript (DOM and canvas based) as well as having done a bit in C# and other technologies. However most of it has been based on sprites, bounding boxes, simple pixel movements etc - and now I'm interested in using vector graphics and implementing a character with realistic moving joints driven by physics forces. I'd like to get something going either in the canvas element or SVG.
There are plenty of questions on here relating to inverse kinematics, but most of them are a bit low level and assume a prior knowledge of vectors, forces, and engineering terminology. What I'd really appreciate is some pointers on the fundamental principles behind how a basic stickman with hip, knee, ankle joints etc can be made to move semi-realistically.
I use Knockout.js a lot and have been wondering if I can implement the positioning of each joint via Knockout's computed functions, where for example the location of the knee joint is computed from the positions of the hip and ankle joints and forces operating on them. But I'm having a hard time finding a starting point: I've been walking in slow motion around my house like an insane man trying to isolate which parts of the human body actually move first and how each part responds to the movements of the others. Is there a generalized approach to how the humanoid figure is set in motion in games and animations?
Bearing in mind that I'm used to working with pixel coordinates as opposed to vectors and forces, am I being naive to try to tackle this in isolation? Will I find that I immediately also need to learn about centres of gravity, momentum, and all the rest?
Any help appreciated, including links to noob tutorials!
Almost 3 years on, I can offer an answer of sorts to my own question. I discovered the JavaScript libraries Physics.js and p2.js, and I delved into their demos and source to try to learn the "physics mindset". In a nutshell, and still speaking as a physics noob - you generally don't move objects explicitly, but rather you model a simplified physics world where bodies have basic physical properties such as mass, and they obey constraints with other bodies, and react to forces acting upon them such as gravity or an explicit directional force such as when a foot kicks a ball. This causes them to attain velocity and angular velocity. The library handles resolution of the center of mass of a body based upon the shapes it is comprised of (e.g. a complex polygon plus a rectangle plus a circle might form a single physics body). The various forces and constraints at play will be in a conflict of sorts, and the library does the work of resolving where and how, after a given "time step" of the physics world, everything should be positioned. This is done via various "solver function" implementations which perform as many iterations as computation allows for the required accuracy.
Both of those libraries separate their physics modeling core from the visual rendering aspect, and allow for different rendering implementations. When I started using p2.js I saw that it was using Pixi.js for rendering in its demos so I ended up building my own simple JavaScript framework which built upon that integration: https://github.com/TomWHall/p2Pixi I haven't constructed a walking humanoid as such, but I have created a "circus unicycle" demo with a humanoid figure which for simplicity is constrained to its unicycle: http://booleanoperations.com/experiments/p2/unicycle/ When the rider is moved left and right (arrow keys or mouse click on either side of the canvas) negative or positive speed is applied to a motorized revolute constraint between the wheel and the shaft, and correctional forces are also applied to various parts of the unicycle and the rider to simulate some form of balancing. Rotational constraints are in place to fix the rider's feet to the pedals of the unicycle and his leg segments together, with rotational limits for the joints. Gravity keeps pulling the wheel down onto the ground, and the movement of the wheel causes the attached leg segments to move with it. This is obviously the reverse of how a unicycle and its rider work together - in reality, the leg segments move as a result of piston-like action of the tendons upon bones, and that leads ultimately to the rotation of the wheel. But that was an unnecessarily complex model of my circus world :-)