Table of Contents

<--   Back

Simple 2-Joint Inverse Kinematic With Isosceles Triangle

Math Formula

Formula to get height of isosceles triangle from one side aa and base bb, you can use it to find the elbow position.

h(a,b)=a2b24h(a,b) = \sqrt{a^2-\frac{b^2}{4}}

TypeScript version.

function getHeight(a: number, b: number){
  return Math.sqrt((a ** 2) - ((b ** 2) / 4));


Let’s say you have shoulder p1\bold{p_1}, hand p2\bold{p_2}, and aa is half length of your arm. You want to find where the elbow position is.

a=10b=(p2p1)c^=p2p1bd=c^h(a,b)k=p1+c^b2+[d1cos(90°)d2sin(90°)d1sin(90°)+d2cos(90°)]\begin{aligned} a &= 10\\ b &= |(\bold{p_2} - \bold{p_1})|\\ \bold{\hat{c}} &= \frac{\bold{p_2} - \bold{p_1}}{b}\\ \bold{d} &= \bold{\hat{c}}h(a,b)\\ \bold{k} &= \bold{p_1} + \bold{\hat{c}}\frac{b}{2} + \begin{bmatrix} d_1 \cos(90\degree) - d_2 \sin(90\degree) \\ d_1 \sin(90\degree) + d_2 \cos(90\degree) \end{bmatrix} \end{aligned}

TypeScript version (vector library using vecti).

import { Vector } from "vecti";
const p1 = new Vector(10, 10);
const p2 = new Vector(150, 150);
const a = 100;
const b = p2.subtract(p1).length();
const c = p2.subtract(p1).normalize();
const d = c.multiply(getHeight(a, b));
const k = p1.add(c.multiply(b / 2)).add(d.rotateByDegrees(90)); // because SVG and Canvas using top to bottom you can use -90, you can also use this to switch direction


Open GitHub Discussions