Rotation control?

[dmko]

I'm porting over an old flash app that used to rely on this third-party contribution: 

http://proj.lamb-mei.com/handlesheet/ (you need to enable flash)

Source code is at https://github.com/lamb-mei/HandleSheet

It's basically just a button that you touch and move around, and it causes the target to rotate, scale, and move with it.

Looks like this:

Now I want to implement it from scratch in PIXI. I know I need to somehow get the rotation based on trigonometry calculations of the initial points and updated points of the button and target DisplayObject... and I'll experiment around with that, but thought someone here might know offhand

 

[Taz]

IDK the math offhand to calculate rotation between two points, but you can add the button sprite as a child of the target sprite, then just rotate, scale and move the target, for that part...

[dmko]

Thanks! Yeah - pinning it to the corner is also a problem and tying them together via the display list is helpful

I'm more stuck about the actual rotation value calculation though (and of course - it must be able to resume from whatever position it was in- not just when it starts at 0)

[Taz]

I think on pointerdown you could store the start rotation of the target and the start position for the button, then on pointermove set the target's rotation to start rotation + angle, where angle is Math.atan2(p2.y - p1.y, p2.x - p1.x), where p2 is the button's start position and p1 is the button's current position. That's just grabbing the formula and stuff off the top of my head but I think it would work -also the idea is adapted from drag-and-drop concepts that I learned from the projection example's drag and drop so maybe that could help too (the interaction code at the bottom of the example code I mean).

[ivan.popelyshev]

There are good examples on drag&drop in new plugin: https://pixijs.github.io/examples/#/projection/plane.js , I'm sure if you look closer into toLocal/toGlobal functions, you'll find the way to use it (the way, not the plugin). Sometimes its necessary to reset scale and rotation, then calculate rotation with those functions, then apply it.

[dmko]

Thanks!! will try that out tomorrow

Wow I never saw that projection example before... man... more stuff to learn!!

[ivan.popelyshev]

I think its time for you to look inside Container/DisplayObject/Transform and suggest how to improve them to be more compatible with modern frameworks, of course if its possible without performance loss or code style fails.

[dmko]

Update - I ended up installing the `gl-matrix` lib and storing my points as `vec2`

Once I had that a simple google on how to do rotation and scale with Vector2's was a piece of cake. Basically just 

const v1 = vec2.normalize(vec2.create(), originalVector);
const v2 = vec2.normalize(vec2.create(), moveVector);

const vAngle = Math.atan2(v2[1],v2[0]) - Math.atan2(v1[1],v1[0]);
const vScale = vec2.length(moveVector) / vec2.length(originalVector);

 

[ivan.popelyshev]

Congrats! Now try to use only vec2.js from gl-matrix, you dont need everything else. Dont add new dependencies