Jump to content

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


Link to comment
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)

Link to comment
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).

Link to comment
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.

Link to comment
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);


Link to comment
Share on other sites

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.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...