The Commands used in this Guide are as follows:

Capital letters (uppercase) are called " Absolutes " Small letters (lowercase) are called " Relatives "

" The First command used in Path Is M (Moveto ).

This Command is Always the First command ~ It puts the Path in motion .

Always put a space in between each command .

Example M? space ? space etc , which will look like this"
M? ? ? ? etc.

The Capital M (uppercase) indicates that absolute coordinates will follow.

m (lowercase) indicates that relative coordinates will follow.

If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates.

H and h = horizontal lines.

V and v = vertical lines

L and l = line to.

A and a = Draws an elliptical arc from the current point to (x, y). x =Width and y = height .

The size and orientation of the ellipse is defined by it`s width & height and the corresponding coordinates .

The width being the amount of rotation .( x-axis-rotation ) which indicates how the ellipse as a whole is rotated relative to the current coordinate .

0 0 0 and 0 0 1 position the arc up & down or Left and Right depending on the coordinates chosen.

For More Info on Position Numbers Click HERE..

Z are z closes the Path .
You use these only when you want your draw closed .
It works like a polygon it closes itself back to the start of the moveto .

By leaving the z`s off it leaves itself open like the polyline`s do .

More commands will be added at a later date.

I`ll start off by showing you a few examples of drawing lines with path and explaining the Moveto commands.

In the example below the coordinates for the Blue line and their meanings (i used a 400x400 background " Fill color (Blank) , Stroke color ( color of lines) Stroke width 3 for this example ) :

Blue Line.

M20 20 H300

M is your moveto command .

The first 20 (M20) is how far over from the left you want your line to begin .

The Next 20 is how far down you want your line to start .

The Capital H is a horizontal line (Absolute ).
By using the Uppercase H (capital/absolute) it moves your line 300 pixels from the outter edge of your background .

The line itself would be 280 pexils long .
Your M (moveto was M20 so 20 from the left minus the 300 would make your line 280 pexils. long.

If you had used the lower case " h " it would have been exactly 300 pexils from your M (moveto commands) .

The next line (Red)
M20 80 V30(uppercase)

The starting of your line would be 20 over and 80 down.

The V30 would bring the vertical line up to 30 pexils from the Top.

Black vertical line.

M40 30 v30

As you can see by using the lowercase v it is positioned exactly where you had commanded it to .

40 over from left , 30 down from top and vertical line 30 pexils long.

Orange line

On this example i`ll show putting horizontal and vertical together ..

M20 130 h300 v30

If i had of used the upper case V it would have brought the vertical live upwards to 30 pexils from the top.( it reverses the vertical lines.)

Purple line.

This one is a bit different . I used the L lower case.( line to command.

When using the lineto: command you need to use these position numbers along with it .

0 0 0 are 0 0 1

Without them the line will shoot all over the place ( every where except where you want it.

Purple line coordinates are:

M20 200 l250 ( that`s a lowercase L250) 0 0 0 0 0

Again the M20 is 20 pexils over from the Left & 200 from the top .

l250 is the lenght of the line.

0 0 0 Position

Next 0 indicates that i want it level , Not moved over any.

The last 0 indicates that i don`t want the end of my line to move up are down.

Those last two numbers are for width and height/depth

Brown line:

M20 275 l250 0 0 0 30 30

l250 lenght of line.

The first 30 in the last set moves the end of your line 30 pexils over.

The Last 30 moves the end of your line 30 pexils down .(view example above.)

The Gray line is basically the same as the Brown line .

Except i used a minus 30 at the end to put the end of the line in the " Opposie Position ".

M20 370 l250 0 0 0 30 -30

This next example will show all the above commands mixed together .

The next Example is the same as the above ~ EXCEPT it has a Z at the end to CLOSE the Path .. It closes it from the end of your Path back to the beginning of the Path.

These are the commands used .

Add the Z for the closeing your Path.

M10 10 h30 v20 h30 V10 h50 l0 0 0 0 20 30 l0 0 0 0 50 -30 h40 l40 0 0 0 50 30 l0 0 0 0 50 -30 h15 v130 l0 0 0 0 -350 0 V100 h50 v20 H200 v10 h70

Now to the ARC Commands.

In this first Example i will show you The purpose of the Position Numbers

0 0 0 & 0 0 1

And Explain how the Rotation of the Arc works.

This may seem confusing at the beginning but Hang in there .

It`ll smooth out a shortly . :-)

All the Arc`s in this example are 50 50

But by viewing them you would probably say NO WAY.

But Yes They Are and They are Not.

Told ya it might seem a bit confusing .. lol.

What determines it`s actual size is Not just the 50 50 are what ever size arc you choose , but also the last two numbers in the setting ~ which also determines it`s Rotation combined with the first set of numbers in the setting.

The first arc (Dark blue) 0n a 400x200 white bg ... Coordinates are (Uppercase/Absolute)

M50 50 A50 50 0 0 0 50 100

50 over , 50 down the start of the arc

A50 50 size of arc.

0 0 0 Position of arc.

50 over , 100 down for the ending of the arc.

Skyblue Arc.

The coordinates on this arc are Exactly the same as the Dark blue arc.

I put this one on to show you the importance of the Posiion Numbers.

Without them , Regardless of you coordinate setting`s , it will be at the top.

Red Arc.

M200 50 A50 50 0 0 0 150 100

M200 50 , 200 over from left and 50 down from top .

Start of arc.

0 0 0 Position

150 100 ~ 150 over & 100 down where your Arc Ends .

The Black Arc has the same cordinates as the red one .

Except for the Position number .

I Changed it to 0 0 1 so it would reverse the angle of the Arc .

Purple Arc.

Same coordinates as the "Black Arc " EXCEPT i used a lowercase a .

By doing this it Enlarged it because the lowercase "a" works from the ending point of your last coordinates in the settings (M200 50 ) And Not from the left of your bg , like the uppercase does .

In other words it added 150 pexils to it and pushed itself down to 100 from the M200 50 setting.

The Orange Arc Corrects this while still using the lowercase a , to make it the same as the others.

M200 50 a50 50 0 0 1 50 50

You can Play with different size Arc`s to achive your desired width and height and rotation .

The Arc`s do not have to be even numbers .

you can have the width bigger are smaller as well as the dept/height of your Arc different .

Example A50 10 , A10 20 , A100 50 etc .. what ever it takes to get the curve are rotaion you desire.

In this next Example i`ll add some lines to the Arc`s so you`ll get a better understanding of them.

Blue Arc with horizontal lines.

M20 40 h30 a10 5 0 0 0 50 0 h25 a10 25 0 0 0 50 0 h25 a10 5 0 0 1 80 0

The first arc is (a10 5) 10 wide , 5 deep and 50 pexils long.

The next arc (a10 25) you`ll notice i made the dept 25 pexils deep , you can narrow it or deepen it all thw way down by changing the depth of u`r arc`s.

Red Arc

M285 40 h50 a20 30 0 0 0 50 0 z

Fill color=Red , Stroke color = Black , Stroke width 3

M20 70 a30 10 0 0 1 5 20 v90

Brown Arc , Football shape
M70 185 A80 80 0 0 1 200 185 M70 185 A80 80 0 0 0 200 185

Purple Arc with line , Fill color Only , with Stroke width 3

M210 150 h130 a60 60 0 0 0 40 10

Gray Arc , same as Purple Arc , Except Position Number changed to 0 0 1

On this Last Arc Example i`ll illustrate the use of the lowercase/relative moveto:

The lowercase/relative m command moves the Path Over, up , down and back from the end of your last command.

Example , m20 10 would move the path over 20 pexils and 10 pexils down form the last command , minus can be used to bring the path back or up .

Blue Arc`s moveto:(m)

M10 30 A20 10 0 0 1 50 30 m-20 0 a30 20 0 0 1 50 0 m-20 0 a30 20 0 0 1 50 0 m-20 0 a30 20 0 0 1

If you`ll notice i have 4 m moveto`s in this part of the code.
What this does is move the Arc back 20 pexils(m-20) .
The zero afterwards tells the Path to remain the same - depth wise.

Part two of Blue Arc moveto :
m50 5 a30 20 0 0 1 50 0 m10 10 a30 20 0 0 1 50 0 m10 5 a30 20 0 0 1 50 0

These commands has your path to move over 50 and 5 down for the first arc.
and 10 over 10 down for the second arc .
10 over and 5 down for the last Blue Arc.

Red Arc`s

M10 90 A20 10 0 0 1 50 90 a20 10 0 0 1 40 0 m20 20 a20 10 0 0 1 40 10 a 20 10 0 0 0 40 20

Black Horizontals.

M250 90 h20 m20 20 h20 m-20 30 h-20 m-30 10 h-20

I will try to add more features of Path in the near future ..

Enjoy

Experiment

Practice is the Key.

But Most of all Have Fun .

I would like to give A Special Thanks to BDiana for her Help on getting me started with Path .

Truly a Genius/Master of the Imaging Arts ..

And also I`d like to Thank Jean , Flo , Becklpn and the Rest of the Members of Imagingartist News Group for giving me the inspiration to do this Tutorial ..

You Are The Greatest !

Flo of Imaging Artists has made another coordinates page of my Path work.Click here to check it out .

Also Check the rest of her site out ... She has some really neat things there .

_{THANK YOU FLO :-)}

Cali Kat an Excellent/Superb Imager of the Art`s has some great Path shares also.
Click here to check it out .

Also Check the rest of her site out ... She has some really neat things there also .

I`m Very Very Impressed with her work.

Check It Out.

~~~~~~~~~~~~~~

Quadratic Bezier the continuation of PathClick here

To continue on with Path.

~ SLEEper ~
_9/20/04