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

1 Comments

Pradeep said:

Hi,

I am a webdesigner / flash programmer.

I want to learn papervision3d, but i dont know how to start.

i want to know how to create any simple file in papervision3d.

can you guide me or can you give me the website link for download ebook or purchage any book for papervision3d

thanks in advance.

i am waiting for your positive replay

regards,
Pradeep Patel

Leave a comment


Tag Cloud

Question of the Week: Dream App

If you had an unlimited budget and unlimited resources what application would you build and why would you build it?

Answer

Latest Features

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.