Math problem rotating bitmapData, almost there, please help

[piterwilson]

Hello

Im trying to rotate a bitmapData object and then draw the rotated result to another bitmapData.

Problem is that after the rotation of the original,say at 45 degrees, the resulting bitmapData has a bigger size than the original.

The tutorial on trigonometry on this site got me close to what i wanted but i still can get it right.

How would you calculate the width and height of the resulting area rectangle after you rotate a bitmapData?

im attaching an image to explain myself:

http://www.piterwilson.com/stuff/problem.png

[wvxvw]

var bmp0:BitmapData = new BitmapData(100, 50, false, 0xff);
var bmp1:BitmapData = getRotated(30, bmp0);
var sprt0:Sprite = new Sprite();
var sprt1:Sprite = new Sprite();
function getRotated(i:int, b:BitmapData):BitmapData {
var n:Number = i*Math.PI/180;
var ibmp:BitmapData = b;
var obmp:BitmapData;
var w:int = ibmp.width;
var h:int = ibmp.height;
var a:Number = Math.PI/2 - n;
var nw:int = w*Math.cos(n)+h*Math.cos(a);
var nh:int = w*Math.cos(a)+h*Math.cos(n);
obmp = new BitmapData(nw, nh, false, 0xffff);
return obmp;
}
sprt0.addChild(new Bitmap(bmp1));
sprt1.addChild(new Bitmap(bmp0));
sprt1.rotation = 30;
sprt0.x = (stage.stageWidth - sprt0.width)/2;
sprt0.y = (stage.stageHeight - sprt0.height)/2;
sprt1.x = 50*Math.sin(Math.PI/6)+(stage.stageWidth - sprt1.width)/2;
sprt1.y = (stage.stageHeight - sprt1.height)/2;
addChild(sprt0);
addChild(sprt1);

[piterwilson]

wvxvw, thank you so much, this function works to figure out the new dimensions! i'm so happy!
I think matrix rotations are cool but, there shoudl be some built in methods to have a bitmap resize and reposition after a rotation, otherwise its very difficult to do something as simple as rotating a bitmapData and displaying the result.

Thanks again!

[piterwilson]

Actually,

I found a problem with the function. If you feed it an angle more than 90 degrees , its starts to fail. In the end you can get a bitmap of 0 width which is not correct nor legal in flash.

try this



var angle:Number=0
var bmp0:BitmapData = new BitmapData(200, 50, false, 0xff);
var bmp1:BitmapData = getRotated(angle, bmp0);
var sprite:Sprite=new Sprite()
var bitmap:Bitmap=new Bitmap()
bitmap.bitmapData=bmp1
sprite.addChild(bitmap)
addChild(sprite)

addEventListener(Event.ENTER_FRAME,rot)

function rot(ev:Event){
var bmp1:BitmapData = getRotated(angle, bmp0)
bitmap.bitmapData=bmp1
angle++
}

function getRotated(i:int, b:BitmapData):BitmapData {
var n:Number = i*Math.PI/180;
var ibmp:BitmapData = b;
var obmp:BitmapData;
var w:int = ibmp.width;
var h:int = ibmp.height;
var a:Number = Math.PI/2 - n;
var nw:int = Math.abs(w*Math.cos(n)+h*Math.cos(a));
var nh:int =Math.abs(w*Math.cos(a)+h*Math.cos(n));
trace(i+": "+nw+","+nh)
obmp = new BitmapData(nw, nh, false, 0xffff);
return obmp;
}


see what i mean?

[wvxvw]

Yes, you're right, if the angle is more than 90, you have to subtract the %90 part of it and, if the the quotient was odd - swap height and width. But if you just want to rotate bitmapdata, this would be an overkill =)

var bmp:BitmapData = new BitmapData(100, 50, false, 0xff);
var bp:Bitmap = new Bitmap(bmp);
bp.rotation = 30;
var sprt:Sprite = new Sprite();
sprt.addChild(bp);
addChild(sprt);
trace(sprt.height, sprt.width);

[piterwilson]

HA!
yeah i guess creating the second shape rotating it and then getting the width and height is the easiest way out! In the end i did do something like that, but i was a bit embarrased to not do it with Math.
From now on ill have no shame if i find a non-math solution :)
Thanx man

[NickZA]

Full explanation: http://www.visualharmonics.co.uk/actionscript-3/rotating-bitmapdata-centre/