Home >
I haven't touched PaperVision3D in a while, and some of the recent articles here on insideria.com motivated me to dive in and take a look around. Here's what I came up with after sitting down with it for an evening...
I'm always looking for interesting ways to visualize data, and have built some interesting 3D charting using PaperVision3D in the past. Now, its time to dive in using the latest "Great White" build of PaperVision3D, which has some interesting new features.
One of the features in "GreatWhite" that intrigued me the most is the new Line3D class. You can use Line3D to draw lines in a three dimensional space. This enables a lot with respect to data visualization. You can use the three dimensional lines to create interactive 3d charting, modeling, or graphing components.
This example shows a really basic rotating 3D chart. There are two important things that it shows.
1) A three dimensional scatter plot.
2) A three dimensional line chart
The data points between the scatter plot and line chart are exactly the same. The combined effect is a 3D scatter plot with lines connecting each data point.
Here's the example:
The first thing this example does is setup the axes:
The x axis is red. The y axis green. The z axis is blue.
The next thing that it to does is setup the lines container and randomly add the data points. This could be changed to be dynamic based on collections, or specified through a public getter/setter, but for this example its just random. Perhaps in a later blog post I'll elaborate on it further. For each data point, it adds a sphere object, and a line3D object. The line3D objects will connect the sphere.
Once all of the data objects and 3d structures are setup, it enters a rendering cycle based on "enterframe" events. On every frame instance, it will rotate the chart around the y axis, and redraw the chart "scene".
And here's the code that makes it work:
You can find more information on PaperVision 3D at:
PaperVision3D Blog
PaperVision3D Downloads
PaperVision3D Wiki
PaperVision3D Forums
You can view this application in a new window at:
http://www.tricedesigns.com/portfolio/pv3dchart/Line3DChart.html
You can view the source at:
http://www.tricedesigns.com/portfolio/pv3dchart/srcview/
Update:
Here's a better example of what can be done with this. I just changed the random placement to be programmatic.
The only different is in the placement of the vertices:
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems http://www.cynergysystems.com
I'm always looking for interesting ways to visualize data, and have built some interesting 3D charting using PaperVision3D in the past. Now, its time to dive in using the latest "Great White" build of PaperVision3D, which has some interesting new features.
One of the features in "GreatWhite" that intrigued me the most is the new Line3D class. You can use Line3D to draw lines in a three dimensional space. This enables a lot with respect to data visualization. You can use the three dimensional lines to create interactive 3d charting, modeling, or graphing components.
This example shows a really basic rotating 3D chart. There are two important things that it shows.
1) A three dimensional scatter plot.
2) A three dimensional line chart
The data points between the scatter plot and line chart are exactly the same. The combined effect is a 3D scatter plot with lines connecting each data point.
Here's the example:
The first thing this example does is setup the axes:
The x axis is red. The y axis green. The z axis is blue.
The next thing that it to does is setup the lines container and randomly add the data points. This could be changed to be dynamic based on collections, or specified through a public getter/setter, but for this example its just random. Perhaps in a later blog post I'll elaborate on it further. For each data point, it adds a sphere object, and a line3D object. The line3D objects will connect the sphere.
Once all of the data objects and 3d structures are setup, it enters a rendering cycle based on "enterframe" events. On every frame instance, it will rotate the chart around the y axis, and redraw the chart "scene".
And here's the code that makes it work:
package
{
import flash.events.Event;
import org.papervision3d.core.geom.Lines3D;
import org.papervision3d.core.geom.renderables.Line3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.special.LineMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
[SWF(backgroundColor="#000000",width="425",height="350")]
public class Line3DChart extends BasicView
{
public var chartContainer:DisplayObject3D;
public var chart:DisplayObject3D;
private var dataPoints : Array;
private static const RADIUS : int = 20;
private static const MAX_SIZE : int = 600;
private static const AXIS_SIZE : int = 800;
public function Line3DChart()
{
super(stage.stageWidth, stage.stageHeight, false, true);
init();
}
private function init():void
{
chartContainer = new DisplayObject3D("Chart Container");
chart = new DisplayObject3D("Chart");
chartContainer.rotationY=-15;
chartContainer.rotationX=-15;
dataPoints = new Array();
var defaultMaterial : LineMaterial = new LineMaterial(0xFFFFFF, .1);
var xAxisMaterial : LineMaterial = new LineMaterial( 0xFF0000, .75 );
var yAxisMaterial : LineMaterial = new LineMaterial( 0x00FF00, .75 );
var zAxisMaterial : LineMaterial = new LineMaterial( 0x0000FF, .75 );
var dataMaterial : ColorMaterial = new ColorMaterial( 0xFFFFFF, .65, false );
var axes : Lines3D = new Lines3D( defaultMaterial, "Axes" );
axes.addLine( new Line3D( axes, xAxisMaterial, 2, new Vertex3D( -AXIS_SIZE,0,0 ), new Vertex3D( AXIS_SIZE,0,0 ) ));
axes.addLine( new Line3D( axes, yAxisMaterial, 2, new Vertex3D( 0,-AXIS_SIZE,0 ), new Vertex3D( 0,AXIS_SIZE,0 ) ));
axes.addLine( new Line3D( axes, zAxisMaterial, 2, new Vertex3D( 0,0,-AXIS_SIZE ), new Vertex3D( 0,0,AXIS_SIZE ) ));
var lines : Lines3D = new Lines3D( defaultMaterial, "Lines" );
chart.addChild( axes );
chart.addChild( lines );
var lastVertex : Vertex3D;
var currentVertex : Vertex3D = new Vertex3D();
for(var i:int = 0; i<50; i++)
{
lastVertex = currentVertex;
currentVertex = new Vertex3D();
currentVertex.x = Math.random() * MAX_SIZE * positiveOrNegative();
currentVertex.y = Math.random() * MAX_SIZE * positiveOrNegative();
currentVertex.z = Math.random() * MAX_SIZE * positiveOrNegative();
var point : Sphere = new Sphere( dataMaterial, RADIUS );
point.x = currentVertex.x;
point.y = currentVertex.y;
point.z = currentVertex.z;
chart.addChild( point );
var line : Line3D = new Line3D( lines, defaultMaterial, 3, lastVertex, currentVertex );
lines.addLine( line );
}
chartContainer.addChild(chart);
scene.addChild(chartContainer);
singleRender();
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(e:Event): void
{
chart.rotationY+=1;
singleRender();
}
private function positiveOrNegative() : int
{
var seed : Number = Math.random() * 100;
if ( seed > 50 )
return 1;
else
return -1;
}
}
}
You can find more information on PaperVision 3D at:
PaperVision3D Blog
PaperVision3D Downloads
PaperVision3D Wiki
PaperVision3D Forums
You can view this application in a new window at:
http://www.tricedesigns.com/portfolio/pv3dchart/Line3DChart.html
You can view the source at:
http://www.tricedesigns.com/portfolio/pv3dchart/srcview/
Update:
Here's a better example of what can be done with this. I just changed the random placement to be programmatic.
The only different is in the placement of the vertices:
currentVertex.x = i;
currentVertex.y = Math.cos( i )* i;
currentVertex.z = Math.sin( i )* i;
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems http://www.cynergysystems.com
well its really a nice example... to start with charting in 3d.. thax for such anice example..... i have one problem.. .could you tell me how to add different images tp same sphere
Here's a post showing actual application of the concepts in this blog post, with live data: http://www.cynergysystems.com/blogs/page/andrewtrice?entry=visualizing_data_in_multiple_dimensions
Hi Andrew,
I was looking your implementation, the link that you post above, and something came to my mind.
In this examples are you using flex chart class to calculate the positions of the 3d objects ?
Thanks,
No, it is calculating the vertex coordinates on its own. They are the same data values, so the will have the same shape, but the actual layout and rendering is completely separate.