What is the origin of a body with fixtures?

[clankill3r]

I'm trying to create a logo using planck.js. The idea is to create a SVG based on the state of the physics.

I'm pretty far but I can't figure out what is going on with the positions.

Those boxes:

Should match in some way this:

It only looks correct at the animation start.

I made a codepen https://codepen.io/clankill3r/pen/bXvvaP

Hope you can have a look.

[zOadT]

I might figured it out, here is the relevant code:

vecs_A_0 = rescale_offset_and_make_vec2(vecs_A_0, scale, -97, 377 - 88);
vecs_A_1 = rescale_offset_and_make_vec2(vecs_A_1, scale, -97, 377 - 88);
vecs_A_2 = rescale_offset_and_make_vec2(vecs_A_2, scale, -97, 377 - 88);
vecs_P_0 = rescale_offset_and_make_vec2(vecs_P_0, scale, -214, 377 - 88);
vecs_P_1 = rescale_offset_and_make_vec2(vecs_P_1, scale, -214, 377 - 88);
vecs_R_0 = rescale_offset_and_make_vec2(vecs_R_0, scale, -328, 377 - 88);
vecs_R_1 = rescale_offset_and_make_vec2(vecs_R_1, scale, -328, 377 - 88);
vecs_R_2 = rescale_offset_and_make_vec2(vecs_R_2, scale, -328, 377 - 88);
vecs_I_0 = rescale_offset_and_make_vec2(vecs_I_0, scale, -410, 377 - 88);


function create_body(name, vecs_arrays, pos) {

    var body = world.createBody({
        position : pos,
        type : 'dynamic',
        allowSleep : false
    });

    body.name = name;

    for (var i = 0; i < vecs_arrays.length; i++) {
        var vecs = vecs_arrays[i];
        body.createFixture(pl.Polygon(vecs), 2.0); // what is 2.0?
    }

    return body;
}



body_A_0 = create_body("A_0", [vecs_A_0, vecs_A_1, vecs_A_2], Vec2(-r + 0.1633 * (r+r), 2*88*scale));
body_P   = create_body("P", [vecs_P_0, vecs_P_1],             Vec2(-r + 0.3603 * (r+r), 2*88*scale));
body_R   = create_body("R", [vecs_R_0, vecs_R_1, vecs_R_2],   Vec2(-r + 0.5526 * (r+r), 2*88*scale));
body_I   = create_body("I", [vecs_I_0],                       Vec2(-r + 0.6904 * (r+r), 2*88*scale));
body_A_1 = create_body("A_1", [vecs_A_0, vecs_A_1, vecs_A_2], Vec2(-r + 0.8407 * (r+r), 2*88*scale));

// . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

testbed.step = function() {

    update_apria_svg_logos();

};


function dbg_test(body, color, width, height) {

    var x = map(body.getPosition().x, -15, 15, 0, 100);
    var y = map(body.getPosition().y-2*88*scale, -15, 15, 100, 0);

    var a = -body.getAngle() * R2D;

    var hx = width/2;
    var hy = height/2;

    d3.selectAll(".apria_logo")
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height)
    .attr("style", "fill:"+color)
    .attr("transform", "translate("+x+", "+y+") rotate("+a+", "+hx+", "+hy+")")
    ;

}

So I basically changed the offset parameter to 377 - 88, so the shapes are centered around the origin, and changed hx and hy, so that the rect is rotated around its center.

Let me know if it works.

[zOadT]

BTW: You duplicated the coordinates in your vecs array. I think

vecs_A_0 = [116, 201, 148, 377, 119, 377, 113, 338, 116, 201];
[...]

should also work.

[shakiba]

Is the problem solved? By the way, this is so cool! :)

[shakiba]

I just published a small change to make it possible to change testebed y-axis direction and match it with svg coordinate. From v0.3.9 you can set testbed.scaleY *= -1 and it will reverse y direction. Here is same code (with zOadT's changes) and reversed y-axis (please note gravity is positive now): https://codepen.io/piqnt/pen/GVYMLK

[clankill3r]

Sorry for the late reply, I was on vacation.

@zOadT @shakiba

The problem is still there, It is better but after a while when things rotated more you can see the issues:

I made a new codepen (using version 0.39) where I remade a lot of things. I wanted to understand the problem and not eyeball a fix.

One thing I did was wrong was the point of rotation. I am nearly there, the only thing wrong is that the position is a bit off.

https://codepen.io/clankill3r/pen/jONwvdY

[clankill3r]

Alright, the big wheel is not centered, but it's rotating off center. Place your cursor at the top of the wheel for example and keep watching. The fix should be really simple but I don't know how.

[shakiba]

Cool! Your hint was actually very helpful, the problem was reusing y variable, here is the fix.

[shakiba]

~I randomized boxes' location, probably you want to remove that!~