Simple 2-Joint Inverse Kinematic With Isosceles Triangle

Math Formula

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

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

Application

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

\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

Table of Contents

Simple 2-Joint Inverse Kinematic With Isosceles Triangle

Math Formula

Application

Demo