Inverse Kinematics

Hi all,

I have had a jam at making easy to use Inverse kinematics for your games. Dynamic animations are now within your grasp!

Here is the project file for you all to look at. If you use this in your game, I would love to see what you do with it!

https://microstudio.io/i/SynKrown/inversekinematics/

You call new twice when creating an object from the IK class.

The first time you return a class and create it. (inversekinematics file)

  return new IK()

The second time is when you assign to the variable i (main file)

   i = new ik(0, 0); // Create a new Inverse Kinematics object

You can do it e.g. like this

this.ik = function(){
  class IK{ ... };

  class Abc{ ... };

  class Xyz { ... }
  
  return { IK, Abc, Xyz };
}


// main file 
init = function() {
  lib = ik();
  i = new lib.IK(0, 0); // Create a new Inverse Kinematics object
 // .... 
}

Oh right good catch man! Cheers for that. I didn't know return could return multiple items like that.

Aside from that, what are your thoughts on the project? I made it to implement into my game manager and thought the community could probably utilize it too

You code well!! do not stop !!

In the IsoMath library - the isUndefined function is missing.

You have a very good eye for code. I'll have to figure how isUndefined was structured as that polygon collision function was copied from pseudo code I found online long ago. When adding to the math lib(which was also written long ago) I must have overlooked the function or assumed it was a built in function in javascript lol.

Do you know if microStudio can pixelate the graphics with pixel rounding or anything like that? So instead of everything being clean and straight when angled, say a 320x240 sized view port stretched would make each pixel more noticeable as if it were zoomed in on a paint program. I hope that question makes sense

I think this function should look like this:

isUndefined = function(value) {
    return typeof value === 'undefined';
}

Or simply be replaced in the code by:

typeof minB === 'undefined'

do_polygons_intersect = function(a, b) {
    var polygons = [a, b];
    var minA, maxA, projected, i, i1, j, minB, maxB;

    for (i = 0; i < polygons.length; i++) {

        // for each polygon, look at each edge of the polygon, and determine if it separates
        // the two shapes
        var polygon = polygons[i];
        for (i1 = 0; i1 < polygon.length; i1++) {

            // grab 2 vertices to create an edge
            var i2 = (i1 + 1) % polygon.length;
            var p1 = polygon[i1];
            var p2 = polygon[i2];

            // find the line perpendicular to this edge
            var normal = { x: p2.y - p1.y, y: p1.x - p2.x };

            minA = maxA = undefined;
            // for each vertex in the first shape, project it onto the line perpendicular to the edge
            // and keep track of the min and max of these values
            for (j = 0; j < a.length; j++) {
                projected = normal.x * a[j].x + normal.y * a[j].y;
                if (typeof minA === 'undefined' || projected < minA) {
                    minA = projected;
                }
                if (typeof maxA === 'undefined' || projected > maxA) {
                    maxA = projected;
                }
            }

            // for each vertex in the second shape, project it onto the line perpendicular to the edge
            // and keep track of the min and max of these values
            minB = maxB = undefined;
            for (j = 0; j < b.length; j++) {
                projected = normal.x * b[j].x + normal.y * b[j].y;
                if (typeof minB === 'undefined' || projected < minB) {
                    minB = projected;
                }
                if (typeof maxB === 'undefined' || projected > maxB) {
                    maxB = projected;
                }
            }

            // if there is no overlap between the projects, the edge we are looking at separates the two
            // polygons, and we know there is no overlap
            if (maxA < minB || maxB < minA) {
                console.log("polygons don't intersect!");
                return false;
            }
        }
    }
    return true;
};

testing code :

init = function() {
  math = isoMath();
  obj_a = math.list_create()
  array_clear( obj_a )
  obj_b = math.list_create()
  for( let i = 0; i < 360; i+= 360 / 12 ){
    obj_a.push(  new math.vec2( math.sin( math.pi() / 180 * i ) * 50, math.cos( math.pi() / 180 * i ) * 50 ))
    obj_b.push(  new math.vec2(  150 + math.sin( math.pi() / 180 * i ) * 25, math.cos( math.pi() / 180 * i ) * 40 ))
  }  

}

update = function() {
  obj_b.forEach( item => item.x -= 1)
}

draw = function() {
  screen.clear()
  list = []
  obj_a.forEach( item => { list.push( item.x); list.push( item.y )})
  screen.drawPolygon( list, "red" )

  list = []
  obj_b.forEach( item => { list.push( item.x); list.push( item.y )})
  screen.drawPolygon( list, "green" )  
  print( math.do_polygons_intersect( obj_a, obj_b ));
}

combination of "setScale" and "setPixelated" .

screen.setPixelated( pixelated ) 

image.setPixelated( pixelated )

If this is not enough, you need to use the PIXI library. There is access to shaders.