HTML and CSS Reference
In-Depth Information
moving down, the more lift you get. Likewise, if your foot moves backward when it hits, the horizontal
momentum goes back to your body, moving it forward. The faster your foot moves back, the more
horizontal thrust you get.
If you can keep track of the foot's x and y velocity, then when you get a collision, you can subtract that x
and y velocity from the
vx
and
vy
values. But, you don't have any feet yet. You can add some and
calculate their positions, or instead, use the position of virtual feet, which is the value returned by
getPin()
on the lower segments.
If you keep track of where the pin is before the segment moves and where it is after the segment moves,
you can subtract the two and get the foot's velocity on both x and y. You can do that in the walk function
and store the values in the
vx
and
vy
properties of the segment (now you see where those come in).
function walk (segA, segB, cyc) {
var angle0 = (Math.sin(cyc) * thighRangeSlider.value + thighBaseSlider.value) * Math.PI /
180,
angle1 = (Math.sin(cyc + calfOffsetSlider.value) * calfRangeSlider.value +
calfRangeSlider.value) * Math.PI / 180,
foot = segB.getPin();
segA.rotation = angle0;
segB.rotation = segA.rotation + angle1;
segB.x = segA.getPin().x;
segB.y = segA.getPin().y;
segB.vx = segB.getPin().x - foot.x;
segB.vy = segB.getPin().y - foot.y;
}
Each bottom segment has a
vx
and
vy
property, which represents not the velocity of the segment itself,
but the velocity of the bottom pivot point, or virtual foot.
So, what do you do with this velocity? You wait until you have a collision with the floor, and then you
subtract it from the overall velocity. In other words, if the foot moves down at 3 pixels per frame (a
vy
of 3)
when it hits, subtract 3 from the overall
vy
. You do the same with the
vx
. In code, it's really simple:
function checkFloor (seg) {
var yMax = seg.getPin().y + (seg.height / 2);
if (yMax > canvas.height) {
var dy = yMax - canvas.height;
segment0.y -= dy;
segment1.y -= dy;
segment2.y -= dy;
segment3.y -= dy;
vx -= seg.vx;
vy -= seg.vy;
}
}
This is an extremely simplified, and possibly a completely inaccurate, representation of how the forces
involved in walking actually work. If you test it, there is a pair of legs walking across the screen!
