Drawing a pipeline...

[silve69]

Hello friends,

I'm trying to draw a pipeline network for a demo game and I have problems deawing the pipeline pieces (like rectangles) with info loaded from XML file.
The received data include for each pipeline piece the follow: id, status, xStart, yStart, xEnd and yEnd.
I need to calculate the 4 coordinates for draw the rectangle.
With vertical and horizontal rectangles I don't have problem, but with inclinated rectangles I have problems for calculate the coordinates and obtain a symmetrical rectangle.
See the follow image:

http://www.hrtester.com/screen.jpg

Some suggestion???
Bests!

[lordofduct]

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.

[lordofduct]

of course, if you want this 'rect' to be a solid colour... you could just draw it with the line tool and set the line width to whatever you want.

canvas.graphics.lineStyle( COLOR, WIDTH, ... );

[silve69]

Thanks Lord by the very deep answer, now I'm trying to traslate it to actionscript... have a nice day!!

[silve69]

Thanks to LordOfDuct,

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