Drawing a pipeline...

[silve69]

Hello friends,

I'm using the AS3 graphics class for creating a demo game and I need to draw a pipeline network using data loaded from XML file.
I have the follow info for each pipeline piece: id, status, xStart, yStart, xEnd and yEnd... and I need to draw each pipeline piece (like rectangles) between coordinates.
If the pipeline is horizontal or vertical is very easy, but I have problems with leaned rectangles.
Please, see the follow image.



Some suggestion???

Bests!

[5TonsOfFlax]

Can you cheat and just set the lineStyle to very thick, and draw a single line between the points?

If not, you'll have to do some math. Get the slope of the line between start and end, and get the slope of the line perpendicular to that. find the endpoints on the line through start that are the right distance from start (do the same for end), then draw your lines between those points.

[silve69]

Thanks 5Tons,
I can't draw a single line because the pipeline will has an internal animation (showing the fluid movement)
About a math solution, I received a very detailed explanation of "lordofduct" in kirupa forum but I can't traslated it to actionscript successful.
Follow the explanation:

it's standard linear equation...

a line (with no end points) is defined as a point with a slope

two lines that are parallel have the same slope but pass through different points

the if you know two points on a line, you can easily deduce the slope as the delta in each dimension... or in 2d as the ratio of rise to run

Some other things that may be useful:

slope can be defined as a vector... < i, j> where i is the dt of x, and j is the dt of y.

to rotate a vector 90 degrees in 2d, you just swap i and j, and set either i or j negative.

multiplying a scalar (number) by a vector is performed piecewise... C<i,j> == <ci, cj>

adding two vectors is performed piecewise... <i1,j1> + <i2,j2> == <i1 + i2, j1 + j2>


So say you have xStart, yStart, xEnd, yEnd

the slope is: <xEnd - xStart, yEnd - yStart>

this vector points from start to end, the length OR magnitude of this vector is the length of the rectangle.

length = sqrt(i*i + j*j) //simple pythagorean

if we take a unit vector from this:

slopeVector / length == < i / len, j / len >

this vector is of length 1... we can now scale this vector easily to whatever length we want... in your image we're looking for 5. But FIRST we want to rotate it 90 degrees!

< j, -i> / len

now we scale it

offset = 5 * <j, -i> / len

now if we add this to <startX, startY> we get the BL, if we subtract if from <startX, startY> we get TL. If we add this to <endX, endY> we get BR, if we subtract it from <endX, endY> we got TR.

There you have your 4 points.

OR you could just get the 2 left points, and add the slopeVector to both of them to get the right points.

It's all relative... you essentially defined free floating vectors describing all 4 sides of the rectangle.


Some suggestion???

[5TonsOfFlax]

He explained it pretty well. What part are you having trouble with? The only gotcha I see there is that you have to handle vertical lines special since otherwise you'd divide by 0.

[silve69]

Hello friends, here the final AS3 code:

// initial coordinates
var startP:Point = new Point(150,150);
var endP:Point = new Point(180,210);
var slop:Point = new Point(startP.x - endP.x, startP.y - endP.y);
var length:Number = Math.sqrt(slop.x * slop.x + slop.y * slop.y);
var slopVector:Point = new Point(slop.x/length, slop.y/length);
var rHeight:int = 5; // rectangle height
var offset:Point = new Point(rHeight * slop.y / length, rHeight * -slop.x / length);

// obtaining 4 final points
var topLeft:Point = new Point(startP.x - offset.x, startP.y - offset.y);
var bottomLeft:Point = new Point(startP.x + offset.x, startP.y + offset.y);
var topRight:Point = new Point(endP.x - offset.x, endP.y - offset.y);
var bottomRight:Point = new Point(endP.x + offset.x, endP.y + offset.y);

// drawing the shape
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0x000000);
shape.graphics.beginFill(0xFF0000);
shape.graphics.moveTo(topLeft.x, topLeft.y);
shape.graphics.lineTo(topRight.x, topRight.y);
shape.graphics.lineTo(bottomRight.x, bottomRight.y);
shape.graphics.lineTo(bottomLeft.x, bottomLeft.y);
shape.graphics.lineTo(topLeft.x, topLeft.y);
shape.graphics.endFill();
addChild(shape);