Inverse Kinematics Solver using the Fabrik method

David — Sun, 22 Jun 2025 17:34:35 +0000

Want to learn how to implement an Inverse Kinematics(Ik) solver in Miniscript? In this post I'll teach you how.

Final Result:

Ik is one of the coolest things in programming. It can make animations look more realistic and can help achieving complex behaviors from simple rules. In this tutorial we'll be using a method called Fabrik which stands for “Forward And Backward Reaching Inverse Kinematics”. We are going to make a robot arm that tries to reach the mouse. Let's code!

Setup

Boot up MiniMicro, make a folder called “ik” with the command: mkdir “ik” and hit enter, navigate the folder by typing: cd “ik”. Note that the argument past to the command has to be between quotation marks. Now let's create our MiniScript file with: save “main”, and start editing by typing edit.

Starting Code

We'll start by clearing the screen with: clear. Now we define some variables, distance is the distance between joints, and points is a list in which we store joints so we can loop through them easily. The current code should look like this:

clear

distance = 64
points = []

Now let's create a custom class that extend the Sprite to add a handy function and avoid repeating complex code. Also let's load a basic image to see the points, and scale it up a little.

Download this sample image, rename it to "point.png" and place it next to your "main.ms" file.

Point = new Sprite
Point.image = file.loadImage("point.png")
Point.scale = 6
Point.normalize = function
    length = sqrt(self.x * self.x + self.y * self.y)
    if length != 0 then
        self.x /= length
        self.y /= length
    else
        self.x = 0
        self.y = 0
    end if
end function

Don't worry if you don't understand this code, just know that it converts the x and y values to arrange between 0 and 1. We make use of the Pythagorean theorem.

Ok, so now we add 3 items to the ‘points’ list. For that we use a basic for loop.

for i in range(2)
    p = new Point
    display(4).sprites.push p
    points.push p
end for

And finally, let's add a variable named anchor which will be the anchor point of the arm, let's set it to the center of the screen, and dir, which will store the direction from one point no another.

anchor = new Point
anchor.x = 480
anchor.y = 320

dir = new Point

The whole script should look like this:

clear

distance = 64
points = []

Point = new Sprite
Point.image = file.loadImage("bone.png")
Point.scale = 6
Point.normalize = function
    length = sqrt(self.x * self.x + self.y * self.y)
    if length != 0 then
        self.x /= length
        self.y /= length
    else
        self.x = 0
        self.y = 0
    end if
end function

for i in range(2)
    p = new Point
    display(4).sprites.push p
    points.push p
end for

anchor = new Point
anchor.x = 480
anchor.y = 320

dir = new Point

The Fun Part

Now that we got everything ready it's time to code the “ik” solver. Let's start a while loop and clear the screen to a white color.

while true
    gfx.clear color.white

        // Next will go here...

    yield
end while

A quick detail, the Fabrik method is done in two steps. We start from the last point, move it to the target position and then adjust all other points accordingly. In the second step we start from the first point, move it to the origin position and adjust all other points. That's why this method is called Fabrik, because we move forward and backwards, in the process, all points move to the best possible position in which they don't overlap, and the distance between each position is the one we desired.

With that said, let's code. First let's move all the points towards the target position, in our case, the coordinates of the mouse. Let's set the last point (the tip of the arm) to mouse position.

// forward iteration
points[points.len - 1].x = mouse.x
points[points.len - 1].y = mouse.y

Now we loop through the points left, starting from the penultimate. We calculate the direction to the next point and adjust the position of the current point using the direction multiplied by the length and subtracting that vector to the next point position.

for i in range(points.len-2, 0)
    dir.x = points[i + 1].x - points[i].x
    dir.y = points[i + 1].y - points[i].y
    dir.normalize

    points[i].x = points[i + 1].x - dir.x * distance
    points[i].y = points[i + 1].y - dir.y * distance
end for

The last step is very similar to the previous one, except we go in reverse. Let's set the first point (the arm anchor) to the origin position.

//backwards iteration
points[0].x = anchor.x
points[0].y = anchor.y

Now we loop again but skipping the first point since we already set it's position. We calculate the direction, this time with the previous point and adjust it's position.

for i in range(1, points.len - 1)
    dir.x = points[i - 1].x - points[i].x
    dir.y = points[i - 1].y - points[i].y
    dir.normalize

    points[i].x = points[i - 1].x - dir.x * distance
    points[i].y = points[i - 1].y - dir.y * distance
end for

Before we finish the loop let's draw a line that connects all points. We do that using the ‘gfx.line’ function, it takes from 4 to 6 arguments.

for i in range(1, points.len - 1)
    dir.x = points[i - 1].x - points[i].x
    dir.y = points[i - 1].y - points[i].y
    dir.normalize

    points[i].x = points[i - 1].x - dir.x * distance
    points[i].y = points[i - 1].y - dir.y * distance

    // Draw line
    gfx.line(
      points[i].x, // start x
      points[i].y, // start y
      points[i-1].x, // end x
      points[i-1].y, // end y
      color.gray,  // color
      16) // line width
end for

The complete script should be something like this:

clear

distance = 64
points = []

Point = new Sprite
Point.image = file.loadImage("bone.png")
Point.scale = 6
Point.normalize = function
    length = sqrt(self.x * self.x + self.y * self.y)
    if length != 0 then
        self.x /= length
        self.y /= length
    else
        self.x = 0
        self.y = 0
    end if
end function

for i in range(2)
    p = new Point
    display(4).sprites.push p
    points.push p
end for

anchor = new Point
anchor.x = 480
anchor.y = 320

dir = new Point

while true
        gfx.clear color.white

        // forward iteration
    points[points.len - 1].x = mouse.x
    points[points.len - 1].y = mouse.y

    for i in range(points.len-2, 0)
        dir.x = points[i + 1].x - points[i].x
        dir.y = points[i + 1].y - points[i].y
        dir.normalize

        points[i].x = points[i + 1].x - dir.x * distance
        points[i].y = points[i + 1].y - dir.y * distance
    end for

        // backwards iteration
    points[0].x = anchor.x
    points[0].y = anchor.y

    for i in range(1, points.len - 1)
        dir.x = points[i - 1].x - points[i].x
        dir.y = points[i - 1].y - points[i].y
        dir.normalize

        points[i].x = points[i - 1].x - dir.x * distance
        points[i].y = points[i - 1].y - dir.y * distance

                //Draw line
        gfx.line(
          points[i].x,
          points[i].y,
          points[i-1].x,
          points[i-1].y,
          color.gray,
          16)  
    end for

    yield
end while

Done! Hit F5 and move the mouse around, you'll see the robot arm trying to reach it and flex if it's in range.

This is a simple example but it can be adapted to more complex ones with some additions. Want to see how? Wait for the next tutorial to find out.

That's it for now, hope you enjoyed it and find it useful! If you have any questions feel free to leave a comment. Thanks for reading!!

Forem: David

Inverse Kinematics Solver using the Fabrik method

Setup

Starting Code

The Fun Part