Posts Tagged “3D”

13 05 2008

3D line drawing with Papervision

Posted by: Romuald in experiments, tags: , , , , ,

Back to the line drawing I started in this post.

I wanted to get a snake-like line and I had a try with Papervision3D. It made me able to handle the vertices and then delete the end of the lines.

Draw 1 (demo)

I started from an excellent work from Xero (the.fontvir.us) on the Papervision3D mailing list but instead of using a Lorenz attractor, I used the Tweener Bezier property as I did on the 2D versions.

I set a number of vertices, that is giving me the length of the line. Here is the code:

Plain Text
Actionscript:
  1. /*
  2. * Lines3D1
  3. *
  4. * Copyright info: Free to use and change, an notification email will be welcome for a commercial use
  5. * Actionscript: built for actionscript 3.0
  6. * 05-2008
  7. *
  8. * @author      Romuald Quantin - romu@soundstep.com - www.soundstep.com
  9. * @version    1.0
  10. * @usage       
  11. *
  12. */
  13.  
  14. package {
  15.    
  16.     import org.papervision3d.core.geom.renderables.*;
  17.     import org.papervision3d.materials.special.*;
  18.     import org.papervision3d.core.geom.*;
  19.     import org.papervision3d.objects.*;
  20.     import org.papervision3d.cameras.*;
  21.     import caurina.transitions.Tweener;
  22.     import caurina.transitions.properties.CurveModifiers;
  23.     import flash.events.*;
  24.  
  25.     public class Lines3D1 extends BaseP3D {
  26.        
  27.         //------------------------------------
  28.         // private properties
  29.         //------------------------------------
  30.        
  31.         private var sight:DisplayObject3D;
  32.         private var lineMaterial:LineMaterial;
  33.         private var arrLines:Array = [];
  34.         private var _objArray:Array = [];
  35.         private var _linesNum:int = 5;
  36.         private var _maxRadius:int = 200;
  37.         private var _pointNum:uint = 80;
  38.         private var _verticesNum:uint = 50;
  39.         
  40.         //------------------------------------
  41.         // public properties
  42.         //------------------------------------
  43.        
  44.         //------------------------------------
  45.         // constructor
  46.         //------------------------------------
  47.         
  48.         public function Lines3D1() {
  49.             stage.frameRate = 81;
  50.             CurveModifiers.init();
  51.             super(600, 600);
  52.             b.addEventListener(MouseEvent.CLICK, reload);
  53.             addChild(b);
  54.         }
  55.        
  56.         //
  57.         // PRIVATE, PROTECTED
  58.         //________________________________________________________________________________________________
  59.        
  60.         override protected function init2D():void {
  61.             for (var u:int=0; u<_linesNum; u++) {
  62.                 var obj:Object = {};
  63.                 var newPos:Object = getRandomPos();
  64.                 obj['prevX'] = obj['x'] = newPos['x'];
  65.                 obj['prevY'] = obj['y'] = newPos['y'];
  66.                 obj['prevZ'] = obj['z'] = newPos['z'];
  67.                 obj['color'] = Math.random() * 0xFFFFFF;
  68.                 _objArray.push(obj);
  69.                 randomTween(getRandomData(obj));
  70.             }
  71.         }
  72.  
  73.         override protected function init3D():void {
  74.             camera.zoom = 5;
  75.             camera.z = -200;
  76.             sight = new DisplayObject3D();
  77.             camera.target = sight;
  78.             lineMaterial = new LineMaterial(Math.random()* 0xFFFFFF);
  79.             for (var f:int=0; f<_linesNum; f++) {
  80.                 var line:Lines3D = new Lines3D(lineMaterial, "line");
  81.                 arrLines.push(line);
  82.                 scene.addChild(line, "line");
  83.             }
  84.         }
  85.        
  86.         override protected function processFrame():void {
  87.             for (var h:int=0; h<_linesNum; h++) {
  88.                 arrLines[h].addLine(new Line3D(arrLines[h], new LineMaterial(_objArray[h]['color'], 1), 3, new Vertex3D(_objArray[h]['prevX'],_objArray[h]['prevY'],_objArray[h]['prevZ']), new Vertex3D(_objArray[h]['x'],_objArray[h]['y'],_objArray[h]['z'])));
  89.                 _objArray[h]['prevX'] = _objArray[h]['x'];
  90.                 _objArray[h]['prevY'] = _objArray[h]['y'];
  91.                 _objArray[h]['prevZ'] = _objArray[h]['z'];
  92.                 if (arrLines[h].lines.length> _verticesNum) arrLines[h].lines.shift();
  93.                 camera.x += (((mouseX -(stage.stageWidth*.5))*3)-camera.x)*.01;
  94.                 camera.y += (((mouseY-(stage.stageHeight*.5))*3)-camera.y)*.01;
  95.             }
  96.         }
  97.        
  98.         private function randomTween(o:Object):void {
  99.             Tweener.addTween(o, {x:o['x1'], y:o['y1'], z:o['z1'], _bezier:o['bezier'], time :o ['time'], transition:"linear", onComplete:
  100.                 function():void {
  101.                     randomTween(getRandomData(o));
  102.                 }
  103.             });
  104.         }
  105.        
  106.         private function getRandomData(o:Object):Object {
  107.             o['time'] = Math.random() * (_pointNum*.5) + (_pointNum*.25);
  108.             var newPos:Object = getRandomPos();
  109.             o['x1'] = newPos['x'];
  110.             o['y1'] = newPos['y'];
  111.             o['z1'] = newPos['z'];
  112.             o['bezier'] = [];
  113.             for (var i:int=0; i<_pointNum; i++) {
  114.                 var newBezierPos:Object = getRandomPos();
  115.                 o['bezier'].push({
  116.                     x:newBezierPos['x'],
  117.                     y:newBezierPos['y'],
  118.                     z:newBezierPos['z']
  119.                 });
  120.             }
  121.             return o;
  122.         }
  123.        
  124.         private function getRandomPos():Object {
  125.             var angleY:Number = Math.random() * 2 * Math.PI;
  126.             var angleXZ:Number = Math.random() * 2 * Math.PI;
  127.             var o:Object = {};
  128.             o['x'] = Math.cos(angleY) * Math.sin(angleXZ) * _maxRadius;
  129.             o['y'] = Math.sin(angleY) * Math.sin(angleXZ) * _maxRadius;
  130.             o['z'] = Math.cos(angleXZ) * _maxRadius;
  131.             return o;
  132.         }
  133.        
  134.         private function reload(e:MouseEvent = null):void {
  135.             Tweener.removeAllTweens();
  136.             for (var r:int=0; r<_linesNum; r++) {
  137.                 scene.removeChild(arrLines[r]);
  138.             }
  139.             _objArray = [];
  140.             arrLines = [];
  141.             init3D();
  142.             init2D();
  143.         }
  144.        
  145.         //
  146.         // PUBLIC
  147.         //________________________________________________________________________________________________
  148.        
  149.     }
  150.    
  151. }

Draw 2 (demo)

And a bit of fun with the Bitmap layer, the ColorMatrixFilter and the BlurFilter.

Plain Text
Actionscript:
  1. /*
  2. * Lines3D2
  3. *
  4. * Copyright info: Free to use and change, an notification email will be welcome for a commercial use
  5. * Actionscript: built for actionscript 3.0
  6. * 05-2008
  7. *
  8. * @author      Romuald Quantin - romu@soundstep.com - www.soundstep.com
  9. * @version    1.0
  10. * @usage       
  11. *
  12. */
  13.  
  14. package {
  15.    
  16.     import flash.geom.Point;   
  17.     import flash.display.Bitmap;   
  18.     import flash.display.BitmapData;   
  19.     import flash.filters.BlurFilter;   
  20.     import flash.filters.ColorMatrixFilter; 
  21.     import org.papervision3d.core.geom.renderables.*;
  22.     import org.papervision3d.materials.special.*;
  23.     import org.papervision3d.core.geom.*;
  24.     import org.papervision3d.objects.*;
  25.     import org.papervision3d.cameras.*;
  26.     import caurina.transitions.Tweener;
  27.     import caurina.transitions.properties.CurveModifiers;
  28.     import flash.events.*;
  29.    
  30.     public class Lines3D2 extends BaseP3D {
  31.        
  32.         //------------------------------------
  33.         // private properties
  34.         //------------------------------------
  35.        
  36.         private var sight:DisplayObject3D;
  37.         private var lineMaterial:LineMaterial;
  38.         private var arrLines:Array = [];
  39.         private var _objArray:Array = [];
  40.         private var _linesNum:int = 5;
  41.         private var _maxRadius:int = 200;
  42.         private var _pointNum:uint = 80;
  43.         private var _verticesNum:uint = 30;
  44.         private var _cmf:ColorMatrixFilter;
  45.         private var _bf:BlurFilter;
  46.         private var _bmd:BitmapData;
  47.         private var _bm:Bitmap;
  48.        
  49.         //------------------------------------
  50.         // public properties
  51.         //------------------------------------
  52.        
  53.         //------------------------------------
  54.         // constructor
  55.         //------------------------------------
  56.        
  57.         public function Lines3D2() {
  58.             stage.frameRate = 81;
  59.             CurveModifiers.init();
  60.             super(600, 600);
  61.             b.addEventListener(MouseEvent.CLICK, reload);
  62.             addChild(b);
  63.         }
  64.        
  65.         //
  66.         // PRIVATE, PROTECTED
  67.         //________________________________________________________________________________________________
  68.        
  69.         override protected function init2D():void {
  70.             _cmf = new ColorMatrixFilter([1.05,0,0,0,0,
  71.                                           0,1.05,0,0,0,
  72.                                           0,0,1.05,0,0,
  73.                                           0,0,0,.54,0]);
  74.             _bf = new BlurFilter(5, 5, 2);
  75.             createCanvas();
  76.             for (var u:int=0; u<_linesNum; u++) {
  77.                 var obj:Object = {};
  78.                 var newPos:Object = getRandomPos();
  79.                 obj['prevX'] = obj['x'] = newPos['x'];
  80.                 obj['prevY'] = obj['y'] = newPos['y'];
  81.                 obj['prevZ'] = obj['z'] = newPos['z'];
  82.                 obj['color'] = Math.random() * 0xFFFFFF;
  83.                 _objArray.push(obj);
  84.                 randomTween(getRandomData(obj));
  85.             }
  86.         }
  87.        
  88.         override protected function init3D():void {
  89.             camera.zoom = 5;
  90.             camera.z = -200;
  91.             sight = new DisplayObject3D();
  92.             camera.target = sight;
  93.             lineMaterial = new LineMaterial(Math.random()* 0xFFFFFF);
  94.             for (var f:int=0; f<_linesNum; f++) {
  95.                 var line:Lines3D = new Lines3D(lineMaterial, "line");
  96.                 arrLines.push(line);
  97.                 scene.addChild(line, "line");
  98.             }
  99.         }
  100.        
  101.         private function createCanvas():void {
  102.             _bmd = new BitmapData(600, 600, true, 0x000000);
  103.             _bm = new Bitmap(_bmd);
  104.             addChild(_bm);
  105.         }
  106.  
  107.         override protected function processFrame():void {
  108.             for (var h:int=0; h<_linesNum; h++) {
  109.                 arrLines[h].addLine(new Line3D(arrLines[h], new LineMaterial(_objArray[h]['color'], 1), 3, new Vertex3D(_objArray[h]['prevX'],_objArray[h]['prevY'],_objArray[h]['prevZ']), new Vertex3D(_objArray[h]['x'],_objArray[h]['y'],_objArray[h]['z'])));
  110.                 _objArray[h]['prevX'] = _objArray[h]['x'];
  111.                 _objArray[h]['prevY'] = _objArray[h]['y'];
  112.                 _objArray[h]['prevZ'] = _objArray[h]['z'];
  113.                 if (arrLines[h].lines.length> _verticesNum) arrLines[h].lines.shift();
  114.                 camera.x += (((mouseX -(stage.stageWidth*.5))*3)-camera.x)*.01;
  115.                 camera.y += (((mouseY-(stage.stageHeight*.5))*3)-camera.y)*.01;
  116.             }
  117.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
  118.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
  119.             _bmd.draw(this);
  120.         }
  121.        
  122.         private function randomTween(o:Object):void {
  123.             Tweener.addTween(o, {x:o['x1'], y:o['y1'], z:o['z1'], _bezier:o['bezier'], time :o ['time'], transition:"linear", onComplete:
  124.                 function():void {
  125.                     randomTween(getRandomData(o));
  126.                 }
  127.             });
  128.         }
  129.        
  130.         private function getRandomData(o:Object):Object {
  131.             o['time'] = Math.random() * (_pointNum*.5) + (_pointNum*.25);
  132.             var newPos:Object = getRandomPos();
  133.             o['x1'] = newPos['x'];
  134.             o['y1'] = newPos['y'];
  135.             o['z1'] = newPos['z'];
  136.             o['bezier'] = [];
  137.             for (var i:int=0; i<_pointNum; i++) {
  138.                 var newBezierPos:Object = getRandomPos();
  139.                 o['bezier'].push({
  140.                     x:newBezierPos['x'],
  141.                     y:newBezierPos['y'],
  142.                     z:newBezierPos['z']
  143.                 });
  144.             }