Transformations - II
        by Danko Kozar : 18 November 2004

Now I will introduce a few functions that will help you draw lines in 3d isometric space. As an homage to the old Amstrad drawing functions, I am going to call two such functions plot and draw.

// --- drawing functions --------------------------------
style = function (a, b, c) {
// a: line width
// b: line color
// c: line alpha
lineStyle(a, b, c);
plot = function (x, y, z) {
moveTo(xFla(x, y, z), yFla(x, y, z));
draw = function (x, y, z) {
lineTo(xFla(x, y, z), yFla(x, y, z));

As you see, these functions use isometric transformations mentioned before. Now, what is our next step? First, we have to initialize our application with following parameters:

// --- initialization --------------------------------
xScreenSize = 400;
yScreenSize = 300;
xOrigin = xScreenSize/2;
yOrigin = yScreenSize-30;

With this initialization, we have set the origin of the isometric coordinate system slightly above the centre of the lower edge of the Flash screen.

For our first working example, we will try to draw three different colored lines, representing our three isometric axis.

// red line
style(1, "0xFF0000", 100);
plot(0, 0, 0);
draw(200, 0, 0);
// green line
style(1, "0x00FF00", 100);
plot(0, 0, 0);
draw(0, 200, 0);
// blue line
style(1, "0x0000FF", 100);
plot(0, 0, 0);
draw(0, 0, 200);

[ drawing isometric axis with "plot" and "draw" functions]

Download ZIP

Try to experiment with this functions - you can draw a pretty complex things, such as 3d graphs.

Onwards to the next page!

page 2 of 4


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.