Home  >  

Fun With PaperVision3D & Graphics Filters

Author photo
AddThis Social Bookmark Button
Since diving back into PaperVision3D in my last post, I've been having some fun playing with 3D concepts. I forgot how cool 3D visualizations can be, but at the same time, they can get really confusing and really complicated very quickly. At the same time as they are getting complicated and confusing, they also start creating abstract shapes that are intriguing.

Next thing you know, its not a data visualization anymore... it may become just a neat trick, or perhaps a work of art. In my case, its just a neat trick achieved by manipulating the environment used to create the visualization.

I started playing around with the example from my previous post, take away this, add that, tweak this, tweak that. Earier today, I stumbled upon an older blog post from Keith Peters showing an interesting outline effect achieved using a GlowFilter.

Here's what happens when you apply that same effect and a drop shadow to a modified version of the 3D shapes from my previous post, created with PaperVision.


I changed the background color, removed the lines connecting the spheres, removed the axes from the visualization, changed node sizing, and added the graphics filters. You can see how its done here:

package  
{
 	import flash.events.Event;
 	import flash.filters.DropShadowFilter;
 	import flash.filters.GlowFilter;
 	
 	import org.papervision3d.core.geom.Lines3D;
 	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="#FFFFFF",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 = 75;
   		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(); 
   			this.filters = [new GlowFilter(0, 1, 4, 2, 2, 1, true, true), new DropShadowFilter( 15, 45, 0, .5 )];
   		}
   
  		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 dataMaterial : ColorMaterial = new ColorMaterial( 0xFFFFFF, .96, false );
    			var lines : Lines3D = new Lines3D( defaultMaterial, "Lines" );
    			
    			chart.addChild( lines );
    			
    			var lastVertex : Vertex3D;
    			var currentVertex : Vertex3D = new Vertex3D();
    			
   			for(var i:int = -MAX_SIZE; i<=MAX_SIZE; i+=20)
   			{
    				lastVertex = currentVertex;
    				currentVertex = new Vertex3D();
    				
    				currentVertex.x = i;
    				currentVertex.y = i * Math.cos( i );
    				currentVertex.z = i * Math.sin( i );
    				
    				var point : Sphere = new Sphere( dataMaterial, RADIUS );
    				point.x = currentVertex.x;
    				point.y = currentVertex.y;
    				point.z = currentVertex.z;
    				
    				chart.addChild( point ); 
    			}
    
    			chartContainer.addChild(chart);
   			scene.addChild(chartContainer); 
    
   			singleRender(); 
    
   			addEventListener(Event.ENTER_FRAME, onEnterFrame); 
   		}
   
  		private function onEnterFrame(e:Event): void 
  		{
   			chart.rotationY+=1; 
   			chart.rotationZ+=.5; 
   			singleRender(); 
   		}
  	}
}


You can find more information on PaperVision 3D at:
PaperVision3D Blog
PaperVision3D Downloads
PaperVision3D Wiki
PaperVision3D Forums

You can learn more about graphics filters from my previous post Flex Graphics Tricks Part 3: Graphics Filters.

___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com

Read more from Andrew Trice. Andrew Trice's Atom feed

Comments

Leave a comment


Type the characters you see in the picture above.

Tag Cloud

Poll: Sci-Fi Movies

What's Your Favorite Sci-Fi Movie of All Time?

Vote | View Poll Results | Read Related Blog Entry

Latest Features

  •     Welcome back to the series. This time we are goings to build a really exciting component that will be used to simply display information about the user. Well, you might say why to we need such a component, is there... Continue Reading
  •    Welcome back to our exciting Facebook ActionScript series. In this article we will discuss one of most important (and most exciting) features of the FB platform, it's the publishing of news. We all know when we log in to facebook,... Continue Reading
  • This article provides 10 tips and best practices (in no particular order) for maximizing the benefits that Dojo can bring to your next project. For a more thorough introduction to Dojo, see the article Dojo: The JavaScript Toolkit with... Continue Reading
  •     The notifications are one of the most interesting (and important) parts of the facebook area. In order to completely understand the Flash side of it, we need to understand the basics of the facebook notification, what it is and how... Continue Reading

Development Series

Get an overview of the tools and technologies that work together to allow developers to build Rich Internet Applications (RIAs) quickly and easily.

facebook icon Facebook Application Development

Anatomy of an Enterprise Flex RIA

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.