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:
[ztriangle0.jpg] 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.
[ztriangle1.jpg] 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.
[ztriangle2.jpg] 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.
[ztriangle3.jpg] 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.
[ztriangle4.jpg] 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.jpg] triangle-transparent


More later.
----------------------------------------------------