# Proportional UV coorinate rotation problem

**URL:** <https://forum.kirupa.com/t/proportional-uv-coorinate-rotation-problem/332102>\
**Category:** flash\
**Created:** [January 29, 2014, 12:21am UTC](https://forum.kirupa.com/t/proportional-uv-coorinate-rotation-problem/332102 "2014-01-29T00:21:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![psykovsky](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/psykovsky/32/1386_2.png) [@psykovsky](https://forum.kirupa.com/u/psykovsky)\
**Post date:** [January 29, 2014, 12:21am UTC](https://forum.kirupa.com/t/proportional-uv-coorinate-rotation-problem/332102/1 "2014-01-29T00:21:50Z")

</div>

Hello,  
I’m trying to make tool to be able to select area of interest in a bitmap so that later on I could use it in other graphical and 3D manipulations. The fastest way for that, in my opinion, is adjusting the UV coordinates of the bitmap texture, because it’s drawn in the [FONT=courier new][COLOR=#0000FF]MovieClip[/COLOR][/FONT] through [FONT=courier new][COLOR=#0000FF]drawTriangles[/COLOR][/FONT] method, and it’s convenient not having to care about UV coordinates once I start doing perspective adjustments (homography).

As long as I work in straight horizontal and vertical lines - it gives me no trouble. However, if I try to rotate it skewing and tearing appears. I tried adding two sets of possible point positions so it would fit to proportions to blend between, but still during transitions it goes crazy.

Illustration:  
 ![](http://forum.kirupa.com/uploads/kirupa/6722/4a0bd73a2efdf2b6.jpg)

I handle UV rotation and scaling in separate class - basicly it has a center point and I store the distance to each point and an angle to it, so I can add rotation and scaling easily. Since UV operates in 0-1 coordinate space I realize there has to be some sort of proportion correction, but can’t figure what (during the rotation). If I simply multiply Y and X by aspectRatio, it gives me correct aspect every 90 degree turn, but inbetween it stays skewed.

**Live preview: [HERE](http://www.3dfactor.com/flash/)**

> **Instruction:**  
> Left Mouse Button: **PAN**  
> Middle Mouse Button: **Rotate** (around center)  
> Right Mouse Button: width and height **offset**  
> Mouse Wheel: **scale**  
> “R” key: **Reset** transformation

Function to initialize and reset UV area:

```auto
private function resetPoints():void
        {
            var tAspecth:Number = (height + hOff) / (width + wOff); // hOff and wOff are width/height offsets modified by user
            var tAspectv:Number = (width + wOff) / (height + hOff);
            var tPoint:Point = new Point(x, y);
            points[0].p = new Point(x - (width+wOff)/2, y - (height+hOff)/2);
            points[1].p = new Point(x + (width+wOff)/2, y - (height+hOff)/2);
            points[2].p = new Point(x + (width+wOff)/2, y + (height+hOff)/2);
            points[3].p = new Point(x - (width+wOff)/2, y + (height+hOff)/2);
                points[4].p = new Point(x - ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y - ((height+hOff)/2 + (height+hOff)/2 / tAspecth)); // points 4 - 7 are the ones with aspect ratio applied to them for blending between them later on.
                points[5].p = new Point(x + ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y - ((height+hOff)/2 + (height+hOff)/2 / tAspecth));
                points[6].p = new Point(x + ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y + ((height+hOff)/2 + (height+hOff)/2 / tAspecth));
                points[7].p = new Point(x - ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y + ((height+hOff)/2 + (height+hOff)/2 / tAspecth));
            points[0].angle = getAngle(tPoint, points[0].p); // getAngle just uses Math.atan2 to get angle between two points
            points[1].angle = getAngle(tPoint, points[1].p);
            points[2].angle = getAngle(tPoint, points[2].p);
            points[3].angle = getAngle(tPoint, points[3].p);
                points[4].angle = getAngle(tPoint, points[4].p);
                points[5].angle = getAngle(tPoint, points[5].p);
                points[6].angle = getAngle(tPoint, points[6].p);
                points[7].angle = getAngle(tPoint, points[7].p);
            distance = Point.distance(tPoint, points[0].p); //distance to all points in the square
                distance2 = Point.distance(tPoint, points[0].p);
                
        }

```

Then when asked by the parent to give the 4 corner points I create a tRot variable to know how far it rotated (0…90…0 → 0…1…0):

```auto
var tRot:Number = 1-Math.abs(Math.abs(rotation) % 180 - 90)/90;

```

And then for each point I return the value:

```auto
Point.polar((distance + (distance2 - distance)*tRot)*scale, ((points[k].angle + (points[k+4].angle - points[k].angle) * tRot) + rotation) * (Math.PI/180));

```

Spent all day trying to figure this out, I hope it’s something simple I missed that you guys could point out :asleep:  
Cheers! :beer2: