Skew Function not accurate: need rounding... where are you mathematicians? :)

1

Hello you Flashers and Mathematicians,

i got a problem with a nice skew function From Ericlin of http://ericlin2.tripod.com/skew/skewt.html

Here is the content of the original Actionscript Function:

function skewObj (obj, mcW, mcH, pt0, ptH, ptW) {
	function distance (pt1, pt2) {
		var dy = pt2.y-pt1.y;
		var dx = pt2.x-pt1.x;
		var side = Math.sqrt(dy*dy+dx*dx);
		return side;
	}
	obj._x = pt0.x;
	obj._y = pt0.y;
	obj._yscale = 100;
	var angleP2 = Math.atan2(ptW.y-pt0.y, ptW.x-pt0.x);
	var angleP1 = Math.atan2(ptH.y-pt0.y, ptH.x-pt0.x);
	var dAngle = (angleP1-angleP2)/2;
	var arm = Math.sqrt(2)/2/Math.cos(dAngle);
	// original a 100x100 model , now use 1x1 model
	obj._rotation = (180/Math.PI)*(angleP1-dAngle);
	obj.mc._rotation = -45;
	obj._yscale = 100*Math.tan(dAngle);
	obj.mc._xscale = distance(ptW, pt0)*100/arm/mcW;
	obj.mc._yscale = distance(ptH, pt0)*100/arm/mcH;
}

So far so good. This kind of “three-point-skew” function is really great and working (check out the URL).

I use the function to transform a simple rect Movieclip that way it could be an isometric wall. this is not a very special transformation, so the point placement is pretty easy (look at the pt0, ptH and ptW variables):

H = obj.mc._height;
W = obj.mc._width;
pt0 = {x:0, y:0};
ptH = {x:0, y:H};
ptW = {x:W, y:(H/2)};
skewObj(obj, W, H, pt0, ptH, ptW);

i have prepared a small and plain .fla for you so you can check it out right here, its also attached to the posting (Flash MX 2004 File but should be ok for earlier versions?):

http://public.moonground.de/kirupa/skew-wall-test.fla

Here is the swf:
http://public.moonground.de/kirupa/skew-wall-test.swf

Well now here is the Problem:
while the borders of isometric walls are still exactly vertical (90 deg) the function is producing lines which are very slightly skew. might be something like 90.1 deg… but this inaccurancy produces ugly gaps between walls i put together later.

This function is maybe not accurate enough, maybe to accurate, i am not sure. But i need probably some rounding in there but i dont know where, really (is that a wonder? look at the script! ;))

you can check out the swf, or the fla, see url or also attached:

when you zoom in and look at the “orientation bar” (thick dark blue bar), you will notice that there is a very small gap on the top right corner but its bigger on the bottom right corner of the wall texture.

Question:
Can you fix the problem by changing the script?
Please give it a try!

2

here is another hint for what i am planning to do:

i want every corner just like snap into the “whole-pixel” grid. currently the problem is that due to matrematical transformations sometimes the corner of the image seems to be “out of place” because it should be placed at [font=Courier New]10.000 / 10.000[/font] but its placed at, say, [font=Courier New]10.050 / 9.990[/font]. because the rounding is not done by flash automatically, i guess. but if i try to change [color=blue]_width[/color] to [color=blue]Math.round(_width)[/color] i fail, the form is getting distored because of the previous transformations…

you have some hints?

by the way, I contacted the author, ericlin, maybe he can help a little bit out.