Question of the Week

Isometric
Transformations - III
by Danko Kozar : 18 November 2004

Let's introduce two more new functions. These functions will aid in drawing empty and filled 3d boxes.

Note
 These two new functions work only when all previous functions mentioned in this tutorial are included.
box = function (x, y, z, a, b, c, color) {
style(1, color, 100);
plot(x, y, z);
draw(x+a, y, z);
draw(x+a, y+b, z);
draw(x, y+b, z);
draw(x, y, z);
plot(x, y+b, z);
draw(x+a, y+b, z);
draw(x+a, y+b, z+c);
draw(x, y+b, z+c);
draw(x, y+b, z);
plot(x, y, z);
draw(x, y+b, z);
draw(x, y+b, z+c);
draw(x, y, z+c);
draw(x, y, z);
};
boxFilled = function (x, y, z, a, b, c, color, fill) {
beginFill(fill);
style(1, color, 100);
plot(x, y, z);
draw(x+a, y, z);
draw(x+a, y+b, z);
draw(x, y+b, z);
draw(x, y, z);
plot(x, y+b, z);
draw(x+a, y+b, z);
draw(x+a, y+b, z+c);
draw(x, y+b, z+c);
draw(x, y+b, z);
plot(x, y, z);
draw(x, y+b, z);
draw(x, y+b, z+c);
draw(x, y, z+c);
draw(x, y, z);
endFill();
};

The parameters are:

x, y, z - box starting coordinate
a, b, c - box sizes in x, y and z directions (could be negative)
color - line color
fill - fill color

Let's draw two boxes:

// --- main ------------------------------------------
box(0, 0, 100, 100, 50, 100, "0x00FF00");
boxFilled(100, 0, 0, 100, 50, 100, "0xFFFFFF", "0xAAAAAA");

[ empty and filled box ]

Let's draw something even more complicated:

// --- main ------------------------------------------
// left wall
boxFilled(0, 0, 200, 200, 80, 0, "0xEE0000", "0xAA0000");
// right wall
boxFilled(200, 0, 0, 0, 80, 200, "0xEE0000", "0xAA0000");
// floor
boxFilled(0, 0, 0, 200, 0, 200, "0x00BB00", "0x00BB00");
// left door
boxFilled(80, 0, 200, 40, 60, 0, "0xCCCCCC", "0x999999");
// right door
boxFilled(200, 0, 80, 0, 60, 40, "0xCCCCCC", "0x000000");
// blue box
boxFilled(100, 0, 130, 30, 60, 30, "0x0000FF", "0x0000AA");
// grey box
boxFilled(80, 0, 80, 30, 30, 30, "0xAAAAAA", "0x555555");
// yellow box
boxFilled(60, 0, 70, 20, 20, 20, "0xFFFF00", "0xAAAA00");
// purple box
boxFilled(60, 0, 20, 30, 20, 40, "0xFF00FF", "0xAA00AA");

[ a room full of boxes]

Here's another example of what you can do:

// --- main ------------------------------------------
random_colors = Array("0xFF0000", "0x00FF00", "0x0000FF", "0xFFFF00", "0x00FFFF", "0xFF00FF", "0xFFFFFF");
function draw_chart() {
for (j=6; j>=0; j--) {
random_color = random_colors[j];
for (i=6; i>=0; i--) {
boxFilled(j*30, 0, i*30, 30, random(10)*10+10, 30, "0x999999", random_color);
}
}
}
draw_chart();

[ isometric bar chart - click it ]

As you can see, you can make a pretty good 3d bar chart using these functions.

Note
 On this stage of complexity, you are drawing shapes one on the top of another. Flash automatically puts every other shape on another level. It means that you have to draw further objects first, and closer objects last.

Onwards to the next page!

 page 3 of 4