« 
 »
08 05 2008

Line Bitmap drawing with Tweener Bezier

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

After having a look at the tutorial from Lee Brimelow, I used it to make some experiments.

I tried to find a way to draw a moving line on a bezier curve, like a snake. I didn't really reached it. If you have some ideas how to get a "snake line", please comment.

I used Tweener to animate.

Draw 1 (demo)

Just a simple drawing, a line on moving canvas. Here is the code:

Plain Text
Actionscript:
  1. /*
  2. * Class
  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 and flash player 9
  6. * Date: 01-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.display.*;
  17.     import flash.events.*;
  18.     import flash.geom.*;
  19.     import flash.ui.*;
  20.     import caurina.transitions.Tweener;
  21.    
  22.     public class Draw1 extends Sprite {
  23.        
  24.         //------------------------------------
  25.         // private properties
  26.         //------------------------------------
  27.        
  28.         private var _canvas:Sprite;
  29.         private var _obj:Object;
  30.        
  31.        
  32.         //------------------------------------
  33.         // public properties
  34.         //------------------------------------
  35.        
  36.        
  37.        
  38.         //------------------------------------
  39.         // constructor
  40.         //------------------------------------
  41.        
  42.         public function Draw1() {
  43.             stage.scaleMode = StageScaleMode.NO_SCALE;
  44.             stage.frameRate = 81;
  45.             _obj = {};
  46.             _obj.x = stage.stageWidth * .5;
  47.             _obj.y = stage.stageHeight * .5;
  48.             createCanvas();
  49.         }
  50.        
  51.         //
  52.         // PRIVATE
  53.         //________________________________________________________________________________________________
  54.        
  55.         private function createCanvas(width:int = 500, height:int = 400):void {
  56.             _canvas = new Sprite();
  57.             cacheAsBitmap = true;
  58.             _canvas.cacheAsBitmap = true;
  59.             _canvas.graphics.lineStyle(3, Math.random() * 0xFFFFFF, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  60.             _canvas.graphics.moveTo(_obj.x, _obj.y);
  61.             addChild(_canvas);
  62.             _canvas.addEventListener(Event.ENTER_FRAME, loop);
  63.             randomTween(getRandomData());
  64.         }
  65.        
  66.         private function loop(e:Event):void {
  67.             _canvas.x -= 4;
  68.             var p:Point = _canvas.globalToLocal(new Point(_obj.x, _obj.y));
  69.             _canvas.graphics.lineTo(p.x, p.y);
  70.         }
  71.        
  72.         private function randomTween(o:Object):void {
  73.             Tweener.addTween(_obj, {y:o.y, time :o .time, transition:"easeInOutElastic", onComplete:
  74.                 function():void {
  75.                     randomTween(getRandomData());
  76.                 }
  77.             });
  78.         }
  79.        
  80.         private function getRandomData():Object {
  81.             var o:Object = {};
  82.             o.y = Math.round(Math.random() * stage.stageHeight);
  83.             o.time = Math.random() * 3 + 1;
  84.             return o;
  85.         }
  86.        
  87.         // PUBLIC
  88.         //________________________________________________________________________________________________
  89.        
  90.    
  91.     }
  92.  
  93. }

Draw 2 (demo)

The second one I draw 5 lines contained in a circle. I used the bezier property of Tweener to build the curves. So I first draw the curve on a bitmapdata canvas and then use a color matrix filter to fade the line after each drawing.

Plain Text
Actionscript:
  1. /*
  2. * Class
  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 and flash player 9
  6. * Date: 01-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.display.*;
  17.     import flash.events.*;
  18.     import flash.filters.BlurFilter;
  19.     import flash.filters.ColorMatrixFilter;
  20.     import flash.geom.*;
  21.     import flash.ui.*;
  22.     import caurina.transitions.Tweener;
  23.     import caurina.transitions.properties.CurveModifiers;
  24.    
  25.     public class Draw2 extends Sprite {
  26.        
  27.         //------------------------------------
  28.         // private properties
  29.         //------------------------------------
  30.        
  31.         private var _lineNum:uint = 5;
  32.         private var _pointNum:uint = 5;
  33.         private var _lineArray:Array = [];
  34.         private var _objArray:Object = [];
  35.         private var _maxRadius:Number = 150;
  36.        
  37.         private var _cmf:ColorMatrixFilter;
  38.         private var _bf:BlurFilter;
  39.        
  40.         //------------------------------------
  41.         // public properties
  42.         //------------------------------------
  43.        
  44.         private var _bmd:BitmapData;
  45.        
  46.         //------------------------------------
  47.         // constructor
  48.         //------------------------------------
  49.        
  50.         public function Draw2() {
  51.             stage.scaleMode = StageScaleMode.NO_SCALE;
  52.             stage.frameRate = 41;
  53.             CurveModifiers.init();
  54.             //graphics.beginFill(0x222222);
  55.             //graphics.drawCircle((stage.stageWidth * .5), (stage.stageHeight * .5), _maxRadius);
  56.             _cmf = new ColorMatrixFilter([1,0,0,0,0,
  57.                                           0,1,0,0,0,
  58.                                           0,0,1,0,0,
  59.                                           0,0,0,.5,0]);
  60.             _bf = new BlurFilter(8, 8, 3);
  61.             createCanvas();
  62.             createLines();
  63.         }
  64.        
  65.         //
  66.         // PRIVATE
  67.         //________________________________________________________________________________________________
  68.        
  69.         public function createCanvas():void {
  70.             _bmd = new BitmapData(550, 400, true, 0x000000);
  71.             var bm:Bitmap = new Bitmap(_bmd);
  72.             addChild(bm);
  73.         }
  74.        
  75.         private function createLines():void {
  76.             for (var i:uint = 0; i <_lineNum; i++) {
  77.                 var obj:Object = { };
  78.                 obj.color = Math.random() * 0xFF0000;
  79.                 obj.x = getRandomPos().x;
  80.                 obj.y = getRandomPos().y;
  81.                 _objArray.push(obj);
  82.                 var l:Sprite = new Sprite();
  83.                 //l.filters = [new BlurFilter(2, 2, 3)]
  84.                 l.name = "line" + i;
  85.                 l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  86.                 addChild(l);
  87.                 _lineArray.push(l);
  88.                 randomTween(getRandomData(obj, l), l);
  89.             }
  90.             addEventListener(Event.ENTER_FRAME, loop);
  91.         }
  92.        
  93.         private function loop(e:Event):void {
  94.             for (var i = 0; i <_lineNum; i++) {
  95.                 _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
  96.             }
  97.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
  98.             //_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
  99.             _bmd.draw(this);
  100.         }
  101.        
  102.         private function randomTween(o:Object, line:Sprite):void {
  103.             line.graphics.clear();
  104.             line.graphics.lineStyle(3, o.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  105.             line.graphics.moveTo(o.x, o.y);
  106.             Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time :o .time, transition:"easeInOutQuad", onComplete:
  107.                 function():void {
  108.                     randomTween(getRandomData(o, line), line);
  109.                 }
  110.             });
  111.         }
  112.        
  113.         private function getRandomData(obj:Object, line:Sprite):Object {
  114.             obj.time = Math.random() * 2 + .8;
  115.             obj.x1 = getRandomPos().x;
  116.             obj.y1 = getRandomPos().y;
  117.             obj.bezier = [];
  118.             for (var i = 0; i <_pointNum; i++) {
  119.                 obj.bezier.push({
  120.                     x:getRandomPos().x,
  121.                     y:getRandomPos().y
  122.                 });
  123.             }
  124.             return obj;
  125.         }
  126.        
  127.         private function getRandomPos():Object {
  128.             var o:Object = {}
  129.             o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
  130.             o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
  131.             return o;
  132.         }
  133.        
  134.         // PUBLIC
  135.         //________________________________________________________________________________________________
  136.        
  137.    
  138.     }
  139.  
  140. }

Draw 3 (demo)

In this one, the technic is slightly different. I now update the drawing in the frame loop and use the color matrix filter to leave a trail.

Plain Text
Actionscript:
  1. /*
  2. * Class
  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 and flash player 9
  6. * Date: 01-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.display.*;
  17.     import flash.events.*;
  18.     import flash.filters.BlurFilter;
  19.     import flash.filters.ColorMatrixFilter;
  20.     import flash.geom.*;
  21.     import flash.ui.*;
  22.     import caurina.transitions.Tweener;
  23.     import caurina.transitions.properties.CurveModifiers;
  24.    
  25.     public class Draw3 extends Sprite {
  26.        
  27.         //------------------------------------
  28.         // private properties
  29.         //------------------------------------
  30.        
  31.         private var _lineNum:uint = 5;
  32.         private var _pointNum:uint = 40;
  33.         private var _lineArray:Array = [];
  34.         private var _objArray:Object = [];
  35.         private var _maxRadius:Number = 150;
  36.        
  37.         private var _cmf:ColorMatrixFilter;
  38.         private var _bf:BlurFilter;
  39.        
  40.         //------------------------------------
  41.         // public properties
  42.         //------------------------------------
  43.        
  44.         private var _bmd:BitmapData;
  45.        
  46.         //------------------------------------
  47.         // constructor
  48.         //------------------------------------
  49.        
  50.         public function Draw3() {
  51.             stage.scaleMode = StageScaleMode.NO_SCALE;
  52.             stage.frameRate = 41;
  53.             CurveModifiers.init();
  54.             _cmf = new ColorMatrixFilter([1,0,0,0,0,
  55.                                           0,1,0,0,0,
  56.                                           0,0,1,0,0,
  57.                                           0,0,0,.5,0]);
  58.             _bf = new BlurFilter(8, 8, 3);
  59.             createCanvas();
  60.             createLines();
  61.         }
  62.        
  63.         //
  64.         // PRIVATE
  65.         //________________________________________________________________________________________________
  66.        
  67.         public function createCanvas():void {
  68.             _bmd = new BitmapData(550, 400, true, 0x000000);
  69.             var bm:Bitmap = new Bitmap(_bmd);
  70.             addChild(bm);
  71.         }
  72.        
  73.         private function createLines():void {
  74.             for (var i:uint = 0; i <_lineNum; i++) {
  75.                 var obj:Object = { };
  76.                 obj.color = Math.random() * 0xFF0000;
  77.                 obj.x = obj.prevX = getRandomPos().x;
  78.                 obj.y = obj.prevY = getRandomPos().y;
  79.                 _objArray.push(obj);
  80.                 var l:Sprite = new Sprite();
  81.                 //l.filters = [new BlurFilter(2, 2, 3)]
  82.                 l.name = "line" + i;
  83.                 l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  84.                 addChild(l);
  85.                 _lineArray.push(l);
  86.                 randomTween(getRandomData(obj, l), l);
  87.             }
  88.             addEventListener(Event.ENTER_FRAME, loop);
  89.         }
  90.        
  91.         private function loop(e:Event):void {
  92.             for (var i = 0; i <_lineNum; i++) {
  93.                 _lineArray[i].graphics.clear();
  94.                 _lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  95.                 _lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
  96.                 _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
  97.                 _objArray[i].prevX = _objArray[i].x;
  98.                 _objArray[i].prevY = _objArray[i].y;
  99.             }
  100.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
  101.             //_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
  102.             _bmd.draw(this);
  103.         }
  104.        
  105.         private function randomTween(o:Object, line:Sprite):void {
  106.             Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time :o .time, transition:"linear", onComplete:
  107.                 function():void {
  108.                     randomTween(getRandomData(o, line), line);
  109.                 }
  110.             });
  111.         }
  112.        
  113.         private function getRandomData(obj:Object, line:Sprite):Object {
  114.             obj.time = Math.random() * 8 + 12;
  115.             obj.x1 = getRandomPos().x;
  116.             obj.y1 = getRandomPos().y;
  117.             obj.bezier = [];
  118.             for (var i = 0; i <_pointNum; i++) {
  119.                 obj.bezier.push({
  120.                     x:getRandomPos().x,
  121.                     y:getRandomPos().y
  122.                 });
  123.             }
  124.             return obj;
  125.         }
  126.        
  127.         private function getRandomPos():Object {
  128.             var o:Object = {}
  129.             o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
  130.             o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
  131.             return o;
  132.         }
  133.        
  134.         // PUBLIC
  135.         //________________________________________________________________________________________________
  136.        
  137.    
  138.     }
  139.  
  140. }

Draw 4 (demo)

Just a bit of fun on the second experiment with a blur filter, pretty nice if you like techno style :)

Plain Text
Actionscript:
  1. /*
  2. * Class
  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 and flash player 9
  6. * Date: 01-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.display.*;
  17.     import flash.events.*;
  18.     import flash.filters.BlurFilter;
  19.     import flash.filters.ColorMatrixFilter;
  20.     import flash.geom.*;
  21.     import flash.ui.*;
  22.     import caurina.transitions.Tweener;
  23.     import caurina.transitions.properties.CurveModifiers;
  24.    
  25.     public class Draw4 extends Sprite {
  26.        
  27.         //------------------------------------
  28.         // private properties
  29.         //------------------------------------
  30.        
  31.         private var _lineNum:uint = 5;
  32.         private var _pointNum:uint = 5;
  33.         private var _lineArray:Array = [];
  34.         private var _objArray:Object = [];
  35.         private var _maxRadius:Number = 150;
  36.        
  37.         private var _cmf:ColorMatrixFilter;
  38.         private var _bf:BlurFilter;
  39.        
  40.         //------------------------------------
  41.         // public properties
  42.         //------------------------------------
  43.        
  44.         private var _bmd:BitmapData;
  45.         private var _bm:Bitmap;
  46.        
  47.         //------------------------------------
  48.         // constructor
  49.         //------------------------------------
  50.        
  51.         public function Draw4() {
  52.             stage.scaleMode = StageScaleMode.NO_SCALE;
  53.             stage.frameRate = 41;
  54.             CurveModifiers.init();
  55.             btReload.addEventListener(MouseEvent.CLICK, reload);
  56.             _cmf = new ColorMatrixFilter([1,0,0,0,0,
  57.                                           0,1,0,0,0,
  58.                                           0,0,1,0,0,
  59.                                           0,0,0,1,0]);
  60.             _bf = new BlurFilter(6, 6, 2);
  61.             createCanvas();
  62.             createLines();
  63.         }
  64.        
  65.         //
  66.         // PRIVATE
  67.         //________________________________________________________________________________________________
  68.        
  69.         public function createCanvas():void {
  70.             _bmd = new BitmapData(550, 400, true, 0x000000);
  71.             _bm = new Bitmap(_bmd);
  72.             addChild(_bm);
  73.         }
  74.        
  75.         private function createLines():void {
  76.             for (var i:uint = 0; i <_lineNum; i++) {
  77.                 var obj:Object = { };
  78.                 obj.color = Math.random() * 0xFF0000;
  79.                 obj.x = getRandomPos().x;
  80.                 obj.y = getRandomPos().y;
  81.                 _objArray.push(obj);
  82.                 var l:Sprite = new Sprite();
  83.                 l.filters = [new BlurFilter(3, 3, 2)]
  84.                 l.name = "line" + i;
  85.                 l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  86.                 addChild(l);
  87.                 _lineArray.push(l);
  88.                 randomTween(getRandomData(obj, l), l);
  89.             }
  90.             addEventListener(Event.ENTER_FRAME, loop);
  91.         }
  92.        
  93.         private function loop(e:Event):void {
  94.             for (var i = 0; i <_lineNum; i++) {
  95.                 _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
  96.             }
  97.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
  98.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
  99.             _bmd.draw(this);
  100.         }
  101.        
  102.         private function randomTween(o:Object, line:Sprite):void {
  103.             line.graphics.clear();
  104.             line.graphics.lineStyle(3, o.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  105.             line.graphics.moveTo(o.x, o.y);
  106.             Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time :o .time, transition:"linear", onComplete:
  107.                 function():void {
  108.                     randomTween(getRandomData(o, line), line);
  109.                 }
  110.             });
  111.         }
  112.        
  113.         private function getRandomData(obj:Object, line:Sprite):Object {
  114.             obj.time = Math.random() * 2 + .8;
  115.             obj.x1 = getRandomPos().x;
  116.             obj.y1 = getRandomPos().y;
  117.             obj.bezier = [];
  118.             for (var i = 0; i <_pointNum; i++) {
  119.                 obj.bezier.push({
  120.                     x:getRandomPos().x,
  121.                     y:getRandomPos().y
  122.                 });
  123.             }
  124.             return obj;
  125.         }
  126.        
  127.         private function getRandomPos():Object {
  128.             var o:Object = {}
  129.             o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
  130.             o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
  131.             return o;
  132.         }
  133.        
  134.         // PUBLIC
  135.         //________________________________________________________________________________________________
  136.        
  137.         public function reload(e:MouseEvent = null):void {
  138.             Tweener.removeAllTweens();
  139.             removeEventListener(Event.ENTER_FRAME, loop);
  140.             for (var i:uint = 0; i <_lineNum; i++) {
  141.                 removeChild(_lineArray[i]);
  142.             }
  143.             removeChild(_bm);
  144.             _objArray = [];
  145.             _lineArray = [];
  146.             createCanvas();
  147.             createLines();
  148.         }
  149.    
  150.     }
  151.  
  152. }

Draw 5 (demo)

This one is mixing the colors and creating a shape little by little.

Plain Text
Actionscript:
  1. /*
  2. * Class
  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 and flash player 9
  6. * Date: 01-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.display.*;
  17.     import flash.events.*;
  18.     import flash.filters.BlurFilter;
  19.     import flash.filters.ColorMatrixFilter;
  20.     import flash.geom.*;
  21.     import flash.ui.*;
  22.     import caurina.transitions.Tweener;
  23.     import caurina.transitions.properties.CurveModifiers;
  24.    
  25.     public class Draw5 extends Sprite {
  26.        
  27.         //------------------------------------
  28.         // private properties
  29.         //------------------------------------
  30.        
  31.         private var _lineNum:uint = 5;
  32.         private var _pointNum:uint = 10;
  33.         private var _lineArray:Array = [];
  34.         private var _objArray:Object = [];
  35.         private var _maxRadius:Number = 150;
  36.        
  37.         private var _cmf:ColorMatrixFilter;
  38.         private var _bf:BlurFilter;
  39.        
  40.         //------------------------------------
  41.         // public properties
  42.         //------------------------------------
  43.        
  44.         private var _bmd:BitmapData;
  45.         private var _bm:Bitmap;
  46.        
  47.         //------------------------------------
  48.         // constructor
  49.         //------------------------------------
  50.        
  51.         public function Draw5() {
  52.             stage.scaleMode = StageScaleMode.NO_SCALE;
  53.             stage.frameRate = 41;
  54.             CurveModifiers.init();
  55.             btReload.addEventListener(MouseEvent.CLICK, reload);
  56.             _cmf = new ColorMatrixFilter([1.1,0,0,0,0,
  57.                                           0,1.1,0,0,0,
  58.                                           0,0,1.1,0,0,
  59.                                           0,0,0,.585,0]);
  60.             _bf = new BlurFilter(5, 5, 2);
  61.             createCanvas();
  62.             createLines();
  63.         }
  64.        
  65.         //
  66.         // PRIVATE
  67.         //________________________________________________________________________________________________
  68.        
  69.         public function createCanvas():void {
  70.             _bmd = new BitmapData(550, 400, true, 0x000000);
  71.             _bm = new Bitmap(_bmd);
  72.             addChild(_bm);
  73.         }
  74.        
  75.         private function createLines():void {
  76.             for (var i:uint = 0; i <_lineNum; i++) {
  77.                 var obj:Object = { };
  78.                 obj.color = Math.random() * 0xFF0000;
  79.                 obj.x = obj.prevX = getRandomPos().x;
  80.                 obj.y = obj.prevY = getRandomPos().y;
  81.                 _objArray.push(obj);
  82.                 var l:Sprite = new Sprite();
  83.                 l.filters = [new BlurFilter(2, 2, 2)]
  84.                 l.name = "line" + i;
  85.                 l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  86.                 addChild(l);
  87.                 _lineArray.push(l);
  88.                 randomTween(getRandomData(obj, l), l);
  89.             }
  90.             addEventListener(Event.ENTER_FRAME, loop);
  91.         }
  92.        
  93.         private function loop(e:Event):void {
  94.             for (var i = 0; i <_lineNum; i++) {
  95.                 _lineArray[i].graphics.clear();
  96.                 _lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  97.                 _lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
  98.                 _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
  99.                 _objArray[i].prevX = _objArray[i].x;
  100.                 _objArray[i].prevY = _objArray[i].y;
  101.             }
  102.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
  103.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
  104.             _bmd.draw(this);
  105.         }
  106.        
  107.         private function randomTween(o:Object, line:Sprite):void {
  108.             Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time :o .time, transition:"linear", onComplete:
  109.                 function():void {
  110.                     randomTween(getRandomData(o, line), line);
  111.                 }
  112.             });
  113.         }
  114.        
  115.         private function getRandomData(obj:Object, line:Sprite):Object {
  116.             obj.time = Math.random() * 3 + 3;
  117.             obj.x1 = getRandomPos().x;
  118.             obj.y1 = getRandomPos().y;
  119.             obj.bezier = [];
  120.             for (var i = 0; i <_pointNum; i++) {
  121.                 obj.bezier.push({
  122.                     x:getRandomPos().x,
  123.                     y:getRandomPos().y
  124.                 });
  125.             }
  126.             return obj;
  127.         }
  128.        
  129.         private function getRandomPos():Object {
  130.             var o:Object = {}
  131.             o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
  132.             o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
  133.             return o;
  134.         }
  135.        
  136.         // PUBLIC
  137.         //________________________________________________________________________________________________
  138.        
  139.         public function reload(e:MouseEvent = null):void {
  140.             Tweener.removeAllTweens();
  141.             removeEventListener(Event.ENTER_FRAME, loop);
  142.             for (var i:uint = 0; i <_lineNum; i++) {
  143.                 removeChild(_lineArray[i]);
  144.             }
  145.             removeChild(_bm);
  146.             _objArray = [];
  147.             _lineArray = [];
  148.             createCanvas();
  149.             createLines();
  150.         }
  151.    
  152.     }
  153.  
  154. }

Draw 6 (demo)

Almost the same test but I move the bitmapdata layer.

Plain Text
Actionscript:
  1. /*
  2. * Class
  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 and flash player 9
  6. * Date: 01-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.display.*;
  17.     import flash.events.*;
  18.     import flash.filters.BlurFilter;
  19.     import flash.filters.ColorMatrixFilter;
  20.     import flash.geom.*;
  21.     import flash.ui.*;
  22.     import caurina.transitions.Tweener;
  23.     import caurina.transitions.properties.CurveModifiers;
  24.    
  25.     public class Draw6 extends Sprite {
  26.        
  27.         //------------------------------------
  28.         // private properties
  29.         //------------------------------------
  30.        
  31.         private var _lineNum:uint = 5;
  32.         private var _pointNum:uint = 40;
  33.         private var _lineArray:Array = [];
  34.         private var _objArray:Object = [];
  35.         private var _maxRadius:Number = 150;
  36.        
  37.         private var _cmf:ColorMatrixFilter;
  38.         private var _bf:BlurFilter;
  39.        
  40.         //------------------------------------
  41.         // public properties
  42.         //------------------------------------
  43.        
  44.         private var _bmd:BitmapData;
  45.         private var _bm:Bitmap;
  46.        
  47.         //------------------------------------
  48.         // constructor
  49.         //------------------------------------
  50.        
  51.         public function Draw6() {
  52.             stage.scaleMode = StageScaleMode.NO_SCALE;
  53.             stage.frameRate = 41;
  54.             CurveModifiers.init();
  55.             btReload.addEventListener(MouseEvent.CLICK, reload);
  56.             _cmf = new ColorMatrixFilter([1.1,0,0,0,0,
  57.                                           0,1.1,0,0,0,
  58.                                           0,0,1.1,0,0,
  59.                                           0,0,0,.66,0]);
  60.             _bf = new BlurFilter(8, 8, 2);
  61.             createCanvas();
  62.             createLines();
  63.         }
  64.        
  65.         //
  66.         // PRIVATE
  67.         //________________________________________________________________________________________________
  68.        
  69.         public function createCanvas():void {
  70.             _bmd = new BitmapData(800, 400, true, 0x000000);
  71.             _bm = new Bitmap(_bmd);
  72.             addChild(_bm);
  73.         }
  74.        
  75.         private function createLines():void {
  76.             for (var i:uint = 0; i <_lineNum; i++) {
  77.                 var obj:Object = { };
  78.                 obj.color = Math.random() * 0xFF0000;
  79.                 obj.x = obj.prevX = getRandomPos().x;
  80.                 obj.y = obj.prevY = getRandomPos().y;
  81.                 _objArray.push(obj);
  82.                 var l:Sprite = new Sprite();
  83.                 l.filters = [new BlurFilter(2, 2, 2)]
  84.                 l.name = "line" + i;
  85.                 l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  86.                 addChild(l);
  87.                 _lineArray.push(l);
  88.                 randomTween(getRandomData(obj, l), l);
  89.             }
  90.             addEventListener(Event.ENTER_FRAME, loop);
  91.         }
  92.        
  93.         private function loop(e:Event):void {
  94.             for (var i = 0; i <_lineNum; i++) {
  95.                 _lineArray[i].graphics.clear();
  96.                 _lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
  97.                 _lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
  98.                 _lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
  99.                 _objArray[i].prevX = _objArray[i].x;
  100.                 _objArray[i].prevY = _objArray[i].y;
  101.             }
  102.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
  103.             _bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
  104.             _bmd.draw(this);
  105.             _bmd.scroll(-4, 0);
  106.         }
  107.        
  108.         private function randomTween(o:Object, line:Sprite):void {
  109.             Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time :o .time, transition:"linear", onComplete:
  110.                 function():void {
  111.                     randomTween(getRandomData(o, line), line);
  112.                 }
  113.             });
  114.         }
  115.        
  116.         private function getRandomData(obj:Object, line:Sprite):Object {
  117.             obj.time = Math.random() * 8 + 12;
  118.             obj.x1 = getRandomPos().x;
  119.             obj.y1 = getRandomPos().y;
  120.             obj.bezier = [];
  121.             for (var i = 0; i <_pointNum; i++) {
  122.                 obj.bezier.push({
  123.                     x:getRandomPos().x,
  124.                     y:getRandomPos().y
  125.                 });
  126.             }
  127.             return obj;
  128.         }
  129.        
  130.         private function getRandomPos():Object {
  131.             var o:Object = {}
  132.             o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5 + 200);
  133.             o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
  134.             return o;
  135.         }
  136.        
  137.         // PUBLIC
  138.         //________________________________________________________________________________________________
  139.        
  140.         public function reload(e:MouseEvent = null):void {
  141.             Tweener.removeAllTweens();
  142.             removeEventListener(Event.ENTER_FRAME, loop);
  143.             for (var i:uint = 0; i <_lineNum; i++) {
  144.                 removeChild(_lineArray[i]);
  145.             }
  146.             removeChild(_bm);
  147.             _objArray = [];
  148.             _lineArray = [];
  149.             createCanvas();
  150.             createLines();
  151.         }
  152.    
  153.     }
  154.  
  155. }

Source

You can download the source here.

More links

More details on the Tweener bezier curve and the color matrix filter use.

Tweener bezier

Abobe matrix

Grant Skinner matrix

Gimp doc

Vote in HexoSearch

This entry was posted on Thursday, May 8th, 2008 at 11:06 am and is filed under experiments. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply