# Rotation control?

## Recommended Posts

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

##### Share on other sites

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...

##### Share on other sites

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)

##### Share on other sites

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).

##### Share on other sites

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.

##### Share on other sites

Thanks!! will try that out tomorrow

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

##### Share on other sites

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.

##### Share on other sites

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);
``````

##### Share on other sites

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

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.