In this recipe, we expand on drawing in multiple dimensions. For now, we've only shown a 2D graph translated to 3D. Now we will show how to draw two separate data sets and get a real three-dimensional graph.
Start by creating a copy of the Moving around the chart recipe. This will be the basis for the current recipe.
Now replace the data set with the following one:
private var _data:Array = [[0, 20, 40], [50, 70, 60], [100, 0, 10], [150, 150, 170], [200, 300, 280], [250, 200, 210], [300, 400, 350], [350, 20, 50], [400, 60, 70], [450, 250, 230], [500, 90, 110], [550, 400, 350], [600, 500, 400],[650, 450, 380],[700,320, 350]];
It's basically the same set as before, plus an additional one.
The current code should work as it is, but it will only display the first data set:
- To also display the second one, we only need to extend the
Graph3Dclass. Replace thedrawDataPointsmethod with the following code (rememberdrawFunctionis the method responsible for drawing individual datapoints):private function drawDataPoints():void { for (var i:int = 0; i < _data.length; i++) { for (var j:int = 1; j < _data[i].length; j++) { drawFunction(_data[i][0], _data[i][j], j*50); } } }Re-running the program will show both sets side-by-side. If you want to take a closer look at the second set, you can hover around the graph by dragging the mouse.
- Now let's draw the second data set in a different color. Replace the material variable with an array:
public var materials:Array = [new ColorMaterial(0xff9933), new ColorMaterial(0x3399ff)];
In the constructor we need to apply the light picker to all materials:
for (var i:int = 0; i < materials.length; i++) { materials[i].lightPicker = lightPicker; } - The material will now be passed to the
drawCubefunction as a parameter, so we add a parameter to the function declaration:private function drawCube(x:Number, y:Number, z:Number, material:MaterialBase):void
- And finally, we add that parameter to the function call in the
drawDataPointsfunction:drawFunction(_data[i][0], _data[i][j], j*50, materials[j-1]);
The program will now show both the data sets in different colors, as shown in the following screenshot:
Once you got this far in the chapter, you must've noticed that this is probably the easiest recipe of the entire chapter.
Instead of having one loop over the individual points, we now have two loops. The outer loop is still the same, while the inner loop makes sure that we draw both sets.
To make a distinction between the two sets, the z-coordinate is different for each set. The z-coordinate controls how close or far away the object is from the viewer.
In a similar vein, we also switch the material (and thus the color) based on the data set. If you have more data sets, make sure you have a material for each one, otherwise your dataset won't be displayed.
Now that we have code to create full 3D graphs, you can start to extend it in various ways.
Just like Sprite, materials also has an alpha channel and can be made transparent. For instance, add this to the Graph3D constructor:
materials[i].alpha = 0.8;
This will result in slightly transparent cubes. This can be useful if one data set hides another one.
Our data set has points exactly 50 units apart from each other. We use that fact in the Graph3D class on two separate occasions:
If you want a more generic function to draw data sets where you don't know the distance between points, you will need to obtain that value some way.
One option is to subtract the largest from the smallest value and divide by the number of datapoints. This will give a good approximation.
Another option is to add this as a parameter to the function so that you can change it on a case-by-case basis.
Of course, you can change the entire look of the different data sets even more. You can have one drawn with cubes and another one with cylinders.
In the next recipe we'll see even more ways to style and customize the look of the graph. All of these can be applied to individual data sets, or even individual points if you want to.