__Triangles__

The very first thing I wanted to do, was to be able to make

a triangle, and place it on the Zinc canvas somewhere. Triangles

are about the easiest to start with, so here goes. I will show rectangles

too, for displaying messages. I will start with placing a few triangles

on the screen, and end up having 3 triangles doing "loop de loops" and

moving them in tandem, controlled by mouse clicks.

Please be aware that I'm use triangles in a unusual or simplified way,

in this triangles tutorial.

Triangles are better created with the "curve" item, and that should be

considered the normal and correct way. If you think about it, a triangle

is just a "closed non-smooth curve". So I will be using curves to make

triangles after this first introduction.

-----------------------------------------------------------------------

From Christophe Mertz:

Just a remark: you are using a triangles item (beware of the s at

triangleS) for drawing a triangle. You could have used a curve item

exactly for the same purpose, just by specifying that the curve is

closed. In fact triangles are really usefull only with openGL where you

can fill surfaces with many triangles and color gradients defined by ONE

triangles item

-----------------------------------------------------------------------

The one important lesson to learn from this first tutorial, is the TkZinc concept

of coordinates. When you specify coordinates for a widget, you are specifying

it's shape, and the coordinates do not change with the position of the widget

on the Zinc canvas. This is probably the hardest concept to grasp, for a beginner,

and it becomes especially important when doing rotations.

So here is a screenshot of the first script:

Htmlified script ztriangle0

ztriangle0 text

First we create the triangle. It is easiest to do it at the (0,0) origin.

That is the upper left hand corner, x increases as you move right, y increases

as you move down. Remember, the coordinates only determine the shape of the

triangle, not the position. Next we translate the triangle into position.

When Tab is hit, the triangle moves down 10 pixels, and when Esc is hit,

the script stops. Notice that I change the coords of the triangle at line 0078.

This changes the shape of the triangle, and the shape remains changed when you

hit Tab again.

So play around with the script, change values and see what happens when you run it

Next we create 3 triangles and make them move in a linear fashion.

Htmlified script ztriangle1

ztriangle1 text

So in this script, we use the clone method to make 3 identical triangles,

position them with translate, then setup key bindings to move them. In this

script, I change the shape of the triangle when Esc is hit, AND I move them back

up.

Now we get into the tricky aspect of rotation. This is where the idea of the default

origin becomes very important. The next script demonstrates this.

Htmlified script ztriangle2

ztriangle2 text

In this script, I've left the middle triangle stationary, and "try" to rotate

the other 2. But surprise! When you run the script, the triangles rotate around

(0,0) like a radar display. This is because the default origin for widgets and groups

is (0,0). Notice the rotation lines at lines 0098-0100. The angle of rotation is
specified in radians. It's just a different measure of angles. Just remember that

2*pi is equal to 360 degrees. So my .1416 is about 8 degrees.

Ok, now we will do a stationary rotation.

Htmlified script ztriangle3

ztriangle3 text

In this script, when we do the rotation at lines 0100-0102, we add some extra

arguments to the rotation function, the x and y coordinates to use as the origin

of rotation. This is where lines 0061-0063 make some sense. Those lines redefine

the position of the triangles to be the "centers". Otherwise, the rotation would

be around one of the triangle's vertices.

Ok, now you should be getting the idea. So the next script is going to put it all

together, and throw in some fancier mouse bindings. The following screenshot dosn't

really show the action, you must run the script.

Htmlified script ztriangle4

ztriangle4 text

This script will start when you hit Tab. The flying triangles will drift down, if

you hit the down arrow button, or the right mouse button (button 3). It will move up

if you hit the left mouse button, or the up arrow. It will become stationary if you

hit the left/right arrow, or the middle mouse button(button 2, or a simultaneous click

of both mouse buttons). The things to notice in this script is how the radius of spin

is affected by a translation after rotation at lines 0113-0115. You can experiment

with different values to see the effects.

There is something interesting with this script, if you hit Tab twice, you seemingly

double the speed of rotation.

So now you should grasp the ideas of translation and rotation with TkZinc.

This is just the very beginning. I havn't touched on groups, or mouse bindings

when over the triangles.

Finally, here is something from the TkZinc docs, it is a canvas, with a triangle,

and the empty portion of the canvas, is transparent without openGl(at least on my

fvwm2 linux desktop. The beige area is transparent.

triangle-transparent

More later.

----------------------------------------------------