※現在、「wonderfl build flash online」求人コンテンツ制作に関してのアンケートを実施中です！みなさまのお力添えを頂いて、続々とアンケート結果が集まっていますが、まだまだ募集しております。ご協力のほど、どうぞよろしくお願いいたします！

wonderfl運営事務局
→アンケートページ（※ログインしてからお答えいただけるようになっています。）

 notice: Flash editor updated! Join the development! Thanks to MiniBuilder


embed

noswf download fullscreen
flash swf thumbnail play
reload download fullscreen
FORKED
>sort

光を描いて3Dで回すエフェクト 004:forked from: 光を描いて3Dで回すエフェクト [diff(478)]

  1. // forked from KinkumaDesign's 光を描いて3Dで回すエフェクト
  2. /*
  3. * PerfumeのPV 'baby cruising Love'の中に出てくる光のエフェクトを再現してみました。
  4. * 1:13他　何回か出てきます
  5. * 
  6. * Youtube [PV] "Perfume" baby cruising Love 2nd Enc
  7. * http://www.youtube.com/watch?v=76yVixuKqGY
  8. * 
  9. * マウスドラッグで光を描きます
  10. * ハートの形とか可愛いかも
  11. * 
  12. * http://www.kuma-de.com/blog/1-programming/1-javascript/2009-09-07/1202
  13. */
  14. package {
  15.     import flash.display.Sprite;
  16.     import flash.events.Event;
  17.     
  18.     import flash.display.Bitmap;
  19.     import flash.display.BitmapData;
  20.     import flash.geom.ColorTransform;
  21.     import flash.geom.Rectangle;
  22.     
  23.     [SWF(backgroundColor="0x000000")]
  24.     public class Main extends Sprite{
  25.         private var _red:Sample6;
  26.         private var _blue:Sample6;
  27.         private var _bitmapData:BitmapData;
  28.         public function Main():void {
  29.             _red = new Sample6(-50);
  30.             this.addChild(_red);
  31.             _blue = new Sample6(50);
  32.             this.addChild(_blue);
  33.             
  34.             _bitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,0x000000);
  35.             addChild(new Bitmap(_bitmapData))
  36.             addEventListener(Event.ENTER_FRAME, loop);
  37.         }
  38.         
  39.         private function loop(e:Event):void {
  40.             //_red.update(null);
  41.             //_blue.update(null);
  42.             
  43.             _bitmapData.lock();
  44.             _bitmapData.fillRect(new Rectangle(0,0,stage.stageWidth,stage.stageHeight), 0x000000);
  45.             _bitmapData.draw(_red, null,new ColorTransform(1,0,0,1,0,0,0,0));
  46.             _bitmapData.draw(_blue, null,new ColorTransform(0,1,1,1,0,0,0,0), "add");
  47.             _bitmapData.unlock();
  48.         }
  49.     }
  50. }
  52. import flash.display.Bitmap;
  53. import flash.display.BitmapData;
  54. import flash.display.Graphics;
  55. import flash.display.Sprite;
  56. import flash.events.Event;
  57. import flash.events.MouseEvent;
  58. import flash.filters.BitmapFilter;
  59. import flash.filters.BitmapFilterQuality;
  60. import flash.filters.BlurFilter;
  61. import flash.filters.GlowFilter;
  62. import flash.geom.ColorTransform;
  63. import flash.geom.Matrix;
  64. import flash.geom.Matrix3D;
  65. import flash.geom.PerspectiveProjection;
  66. import flash.geom.Point;
  67. import flash.geom.Rectangle;
  68. import flash.geom.Utils3D;
  69. import flash.geom.Vector3D;
  70. import flash.sampler.NewObjectSample;
  71. import flash.text.TextField;
  72. import flash.text.TextFormat;
  74. [SWF(width = "480", height = "480", backgroundColor = 0x000000, frameRate = "30")]
  75. class Sample6 extends Sprite
  76. {
  77.     public var penSp:Sprite;
  78.     public var canvas:Bitmap;
  79.     public var currentBmd:BitmapData;
  80.     public var lastDrawPoint:Point;
  81.     public var drawPoints:Vector.<DrawPoint>;
  82.     public var proj:Matrix3D;
  83.     public var vout:Vector.<Number> = new Vector.<Number>();
  84.     public var uvts:Vector.<Number> = new Vector.<Number>();
  85.     public var projverts:Vector.<Number> = new Vector.<Number>();
  86.     public var moveCount:int = 0;
  87.     
  88.     public var hsw:Number;
  89.     public var hsh:Number;
  90.     
  91.     public var logText:TextField;
  92.     
  93.     private var _dX:Number;
  94.     public function Sample6(dX:Number) 
  95.     {
  96.         _dX = dX;
  97.         this.addEventListener(Event.ADDED_TO_STAGE, onStage);
  98.         //stage.addEventListener(MouseEvent.MOUSE_DOWN, initHD);
  99.     }
  100.     private function onStage(event:Event):void {
  101.         stage.addEventListener(MouseEvent.MOUSE_DOWN, initHD);
  102.         
  103.     }
  104.     
  105.     private function initHD(e:MouseEvent):void 
  106.     {
  107.         stage.removeEventListener(MouseEvent.MOUSE_DOWN, initHD);
  108.         
  109.         hsw = stage.stageWidth / 2;
  110.         hsh = stage.stageHeight / 2;
  111.         
  112.         var perse:PerspectiveProjection = new PerspectiveProjection();
  113.         perse.focalLength = 350;
  114.         proj = perse.toMatrix3D();
  115.         drawPoints = new Vector.<DrawPoint>();
  116.         initCanvas();
  117.         initLog();
  118.         
  119.         stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHD);
  120.         stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHD);
  121.         stage.addEventListener(Event.ENTER_FRAME, update);
  122.     }
  123.     
  124.     private function initLog():void
  125.     {
  126.         logText = new TextField();
  127.         addChild(logText);
  128.         logText.x = 8;
  129.         logText.y = 6;
  130.         var tf:TextFormat = new TextFormat();
  131.         tf.color = 0xffffff;
  132.         tf.size = 10;
  133.         tf.font = "_gothicMono";
  134.         logText.selectable = false;
  135.         logText.defaultTextFormat = tf;
  136.     }
  137.     
  138.     private function initCanvas():void
  139.     {
  140.         var w:Number = stage.stageWidth;
  141.         var h:Number = stage.stageHeight;
  142.         currentBmd = new BitmapData(w, h, true, 0xff000000);
  143.         canvas = new Bitmap(currentBmd);
  144.         addChild(canvas);
  145.         canvas.x = _dX*0.7;
  146.         
  147.         penSp = new Sprite();
  148.         penSp.filters = [getGlowFilter(), getBlurFilter()];
  149.     }
  150.     
  151.     private function getGlowFilter():GlowFilter {
  152.         var color:Number = 0xFFF2D3;
  153.         var alpha:Number = 0.85;
  154.         var blurX:Number = 16;
  155.         var blurY:Number = 16;
  156.         var strength:Number = 3;
  157.         var inner:Boolean = false;
  158.         var knockout:Boolean = false;
  159.         var quality:Number = BitmapFilterQuality.HIGH;
  160.         
  161.         return new GlowFilter(color,
  162.             alpha,
  163.             blurX,
  164.             blurY,
  165.             strength,
  166.             quality,
  167.             inner,
  168.             knockout);
  169.     }
  170.     
  171.     private function getBlurFilter():BlurFilter {
  172.         var blurX:Number = 2;
  173.         var blurY:Number = 2;
  174.         return new BlurFilter(blurX, blurY, BitmapFilterQuality.HIGH);
  175.     }
  176.     
  177.     
  178.     private function update(e:Event):void 
  179.     {
  180.         updateDrawPoints();
  181.         updateDraw();
  182.         
  183.         var r:Rectangle = currentBmd.rect;
  184.         currentBmd.lock();
  185.         currentBmd.fillRect(r, 0x000000);
  186.         currentBmd.draw(penSp, new Matrix(), new ColorTransform(), null, r);
  187.         currentBmd.unlock();
  188.         logText.text = "POINTS:" + drawPoints.length.toString();
  189.     }
  190.     
  191.     private function updateDraw():void
  192.     {
  193.         var g:Graphics = penSp.graphics;
  194.         g.clear();
  195.         var len:int = drawPoints.length;
  196.         var drawPoint:DrawPoint;
  197.         
  198.         var verts:Vector.<Number> = new Vector.<Number>();
  199.         var i:int;
  200.         for (i = 0; i < len; i++) {
  201.             drawPoint = drawPoints[i];
  202.             verts.push(drawPoint.drawX, drawPoint.drawY);
  203.         }
  204.         if (verts.length > 8) {
  205.             drawThickSprine(g, verts, 3);
  206.         }
  207.     }
  208.     
  209.     //参考　FrocessingではじめるActionScriptドローイング 第4回　スケッチしてみよう
  210.     //http://gihyo.jp/design/feature/01/frocessing/0004?page=4
  211.     private function drawThickSprine(g:Graphics, verts:Vector.<Number>, thick:Number):void
  212.     {
  213.         var verts0:Vector.<Number> = new Vector.<Number>();
  214.         var verts1:Vector.<Number> = new Vector.<Number>();
  215.         
  216.         var i:int;
  217.         var len:int = verts.length;
  218.         var vx:Number, vy:Number;
  219.         var pt:Point;
  220.         var px0:Number = verts[0];
  221.         var py0:Number = verts[1];
  222.         var px1:Number, py1:Number;
  223.         var drawPoint:DrawPoint;
  224.         for (i = 2; i + 1 < len; i += 2) {
  225.             px1 = verts[i];
  226.             py1 = verts[i + 1];
  227.             vx = px1 - px0;
  228.             vy = py1 - py0;
  229.             pt = new Point(vx, vy);
  230.             pt.normalize(1);
  231.             verts0.push(Math.floor(px0 + pt.y * thick));
  232.             verts0.push(Math.floor(py0 - pt.x * thick));
  233.             verts1.push(Math.floor(px0 - pt.y * thick));
  234.             verts1.push(Math.floor(py0 + pt.x * thick));
  235.             px0 = px1;
  236.             py0 = py1;
  237.         }
  238.         
  239.         var dVerts0:Vector.<Number> = new Vector.<Number>();
  240.         var dVerts1:Vector.<Number> = new Vector.<Number>();
  241.         
  242.         //初期値
  243.         dVerts0.push(0, 0, verts0[0], verts0[1], verts0[2], verts0[3], verts0[4], verts0[5]);
  244.         dVerts1.push(verts1[4], verts1[5], verts1[2], verts1[3], verts1[0], verts1[1], 0, 0);
  245.         
  246.         //描画
  247.         len -= 2;
  248.         for (i = 6; i + 1 < len; i += 2) {
  249.             dVerts0.shift();
  250.             dVerts0.shift();
  251.             dVerts0.push(verts0[i], verts0[i + 1]);
  252.             dVerts1.unshift(verts1[i], verts1[i + 1]);
  253.             dVerts1.pop();
  254.             dVerts1.pop();
  255.             drawPoint = drawPoints[Math.floor(i / 2)];
  256.             g.beginFill(0xFFFEF1, drawPoint.timeFactor);
  257.             g.moveTo(dVerts0[2], dVerts0[3]);
  258.             splineTo(g, dVerts0, 3);
  259.             g.lineTo(dVerts1[2], dVerts1[3]);
  260.             splineTo(g, dVerts1, 3);
  261.             g.lineTo(dVerts0[2], dVerts0[3]);
  262.             g.endFill();
  263.         }
  264.     }
  265.     
  266.     //参考　Catmull-Rom スプライン曲線
  267.     //http://l00oo.oo00l.com/blog/archives/264
  268.     
  269.     //verts: (x0, y0, x1, y1, x2, y2, x3, y3)
  270.     private function splineTo(g:Graphics, verts:Vector.<Number>, numSegments:int):void
  271.     {
  272.         var i:int;
  273.         var len:int = verts.length;
  274.         var t:Number;
  275.         for (i = 0; i < numSegments; i++) {
  276.             t = (i + 1) / numSegments;
  277.             g.lineTo(
  278.                 catmullRom(verts[0], verts[2], verts[4], verts[6], t),
  279.                 catmullRom(verts[1], verts[3], verts[5], verts[7], t)
  280.             );
  281.         }
  282.     }
  283.     
  284.     private function catmullRom(p0:Number, p1:Number, p2:Number, p3:Number, t:Number):Number
  285.     {
  286.         var v0:Number = (p2 - p0) * 0.5;
  287.         var v1:Number = (p3 - p1) * 0.5;
  288.         return (2 * p1 - 2 * p2 + v0 + v1) * t * t * t + ( -3 * p1 + 3 * p2 - 2 * v0 - v1) * t * t + v0 * t + p1;
  289.     }
  290.     
  291.     //時間がきたら消去
  292.     public function updateDrawPoints():void
  293.     {
  294.         if (drawPoints.length < 1) {
  295.             return;
  296.         }
  297.         var drawPoint:DrawPoint = drawPoints[0];
  298.         
  299.         while (drawPoint.nextPoint != null){
  300.             drawPoint.aliveTime--;
  301.             if (drawPoint.aliveTime < 1) {
  302.                 drawPoints.shift();
  303.             }
  304.             updateDrawPoint(drawPoint);
  305.             drawPoint = drawPoint.nextPoint;
  306.         }
  307.         updateDrawPoint(drawPoint);
  308.         drawPoint.aliveTime--;
  309.         if (drawPoint.aliveTime < 1) {
  310.             drawPoints.shift();
  311.         }
  312.     }
  313.     
  314.     //時間に応じてY軸回転
  315.     private function updateDrawPoint(drawPoint:DrawPoint):void
  316.     {
  317.         var mat:Matrix3D = new Matrix3D();
  318.         mat.appendRotation((1 - drawPoint.timeFactor) * 540, Vector3D.Y_AXIS);
  319.         mat.appendTranslation(-_dX, 0, 500);
  320.         mat.transformVectors(Vector.<Number>([drawPoint.x, drawPoint.y, drawPoint.z]), vout);
  321.         Utils3D.projectVectors(proj, vout, projverts, uvts);
  322.         drawPoint.drawX = projverts[0] + hsw;
  323.         drawPoint.drawY = projverts[1] + hsh;
  324.     }
  325.     
  326.     private function mouseUpHD(e:MouseEvent):void 
  327.     {
  328.         stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHD);
  329.     }
  330.     
  331.     private function mouseDownHD(e:MouseEvent):void 
  332.     {
  333.         stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHD);
  334.     }
  335.     
  336.     private function mouseMoveHD(e:MouseEvent = null):void 
  337.     {
  338.         //制御点をあまりとりすぎないように間引く
  339.         moveCount++;
  340.         if (moveCount % 3 != 0) {
  341.             return;
  342.         }
  343.         moveCount = 0;
  344.         
  345.         //領域を超えたら描画しない
  346.         if (stage.mouseX > stage.stageWidth || stage.mouseY > stage.stageHeight) {
  347.             return;
  348.         }
  349.         
  350.         var drawPoint:DrawPoint = new DrawPoint(stage.mouseX -hsw, stage.mouseY -hsh);
  351.         if (drawPoints.length > 0) {
  352.             drawPoints[drawPoints.length - 1].nextPoint = drawPoint;
  353.         }
  354.         drawPoints.push(drawPoint);
  355.     }
  356. }
  358. import flash.display.Sprite;
  360. class DrawPoint 
  361. {
  362.     public var x:Number;
  363.     public var y:Number;
  364.     public var z:Number;
  365.     public var aliveTime:int = 300;
  366.     public var nextPoint:DrawPoint;
  367.     public var drawX:Number;
  368.     public var drawY:Number;
  369.     public function get timeFactor():Number 
  370.     {
  371.         return aliveTime / 300;
  372.     }
  373.     
  374.     public function DrawPoint(x:Number, y:Number) {
  375.         this.x = x;
  376.         this.y = y;
  377.         this.z = 0;
  378.     }
  379. }
noswf

光を描いて3Dで回すエフェクト forked from: 光を描いて3Dで回すエフェクト [diff(2)]

  1. // forked from KinkumaDesign's 光を描いて3Dで回すエフェクト
  2. /*
  3.  * PerfumeのPV 'baby cruising Love'の中に出てくる光のエフェクトを再現してみました。
  4.  * 1:13他　何回か出てきます
  5.  * 
  6.  * Youtube [PV] "Perfume" baby cruising Love 2nd Enc
  7.  * http://www.youtube.com/watch?v=76yVixuKqGY
  8.  * 
  9.  * マウスドラッグで光を描きます
  10.  * ハートの形とか可愛いかも
  11.  * 
  12.  * http://www.kuma-de.com/blog/1-programming/1-javascript/2009-09-07/1202
  13.  */
  15. package  
  16. {
  17.     import flash.display.Bitmap;
  18.     import flash.display.BitmapData;
  19.     import flash.display.Graphics;
  20.     import flash.display.Sprite;
  21.     import flash.events.Event;
  22.     import flash.events.MouseEvent;
  23.     import flash.filters.BitmapFilter;
  24.     import flash.filters.BitmapFilterQuality;
  25.     import flash.filters.BlurFilter;
  26.     import flash.filters.GlowFilter;
  27.     import flash.geom.ColorTransform;
  28.     import flash.geom.Matrix;
  29.     import flash.geom.Matrix3D;
  30.     import flash.geom.PerspectiveProjection;
  31.     import flash.geom.Point;
  32.     import flash.geom.Rectangle;
  33.     import flash.geom.Utils3D;
  34.     import flash.geom.Vector3D;
  35.     import flash.sampler.NewObjectSample;
  36.     import flash.text.TextField;
  37.     import flash.text.TextFormat;
  38.     
  39.         [SWF(width = "480", height = "480", backgroundColor = 0x000000, frameRate = "30")]
  40.     public class Main extends Sprite
  41.     {
  42.         public var penSp:Sprite;
  43.         public var canvas:Bitmap;
  44.         public var currentBmd:BitmapData;
  45.         public var lastDrawPoint:Point;
  46.         public var drawPoints:Vector.<DrawPoint>;
  47.         public var proj:Matrix3D;
  48.         public var vout:Vector.<Number> = new Vector.<Number>();
  49.         public var uvts:Vector.<Number> = new Vector.<Number>();
  50.         public var projverts:Vector.<Number> = new Vector.<Number>();
  51.         public var moveCount:int = 0;
  52.         
  53.         public var hsw:Number;
  54.         public var hsh:Number;
  55.         
  56.         public var logText:TextField;
  57.         
  58.         
  59.         public function Main() 
  60.         {
  61.             stage.addEventListener(MouseEvent.MOUSE_DOWN, initHD);
  62.         }
  63.         
  64.         private function initHD(e:MouseEvent):void 
  65.         {
  66.             stage.removeEventListener(MouseEvent.MOUSE_DOWN, initHD);
  68.             hsw = stage.stageWidth / 2;
  69.             hsh = stage.stageHeight / 2;
  70.             
  71.             var perse:PerspectiveProjection = new PerspectiveProjection();
  72.             perse.focalLength = 350;
  73.             proj = perse.toMatrix3D();
  74.             drawPoints = new Vector.<DrawPoint>();
  75.             initCanvas();
  76.             initLog();
  77.             
  78.             stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHD);
  79.             stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHD);
  80.             stage.addEventListener(Event.ENTER_FRAME, update);
  81.         }
  82.         
  83.         private function initLog():void
  84.         {
  85.             logText = new TextField();
  86.             addChild(logText);
  87.             logText.x = 8;
  88.             logText.y = 6;
  89.             var tf:TextFormat = new TextFormat();
  90.             tf.color = 0xffffff;
  91.             tf.size = 10;
  92.             tf.font = "_gothicMono";
  93.             logText.selectable = false;
  94.             logText.defaultTextFormat = tf;
  95.         }
  96.         
  97.         private function initCanvas():void
  98.         {
  99.             var w:Number = stage.stageWidth;
  100.             var h:Number = stage.stageHeight;
  101.             currentBmd = new BitmapData(w, h, true, 0xff000000);
  102.             canvas = new Bitmap(currentBmd);
  103.             addChild(canvas);
  104.             
  105.             penSp = new Sprite();
  106.             penSp.filters = [getGlowFilter(), getBlurFilter()];
  107.         }
  108.         
  109.         private function getGlowFilter():GlowFilter {
  110.             var color:Number = 0xFFF2D3;
  111.             var alpha:Number = 0.85;
  112.             var blurX:Number = 16;
  113.             var blurY:Number = 16;
  114.             var strength:Number = 3;
  115.             var inner:Boolean = false;
  116.             var knockout:Boolean = false;
  117.             var quality:Number = BitmapFilterQuality.HIGH;
  119.             return new GlowFilter(color,
  120.                                   alpha,
  121.                                   blurX,
  122.                                   blurY,
  123.                                   strength,
  124.                                   quality,
  125.                                   inner,
  126.                                   knockout);
  127.         }
  128.         
  129.         private function getBlurFilter():BlurFilter {
  130.             var blurX:Number = 2;
  131.             var blurY:Number = 2;
  132.             return new BlurFilter(blurX, blurY, BitmapFilterQuality.HIGH);
  133.         }
  135.         
  136.         private function update(e:Event):void 
  137.         {
  138.             updateDrawPoints();
  139.             updateDraw();
  140.             
  141.             var r:Rectangle = currentBmd.rect;
  142.             currentBmd.lock();
  143.             currentBmd.fillRect(r, 0x000000);
  144.             currentBmd.draw(penSp, new Matrix(), new ColorTransform(), null, r);
  145.             currentBmd.unlock();
  146.             logText.text = "POINTS:" + drawPoints.length.toString();
  147.         }
  148.         
  149.         public function updateDraw():void
  150.         {
  151.             var g:Graphics = penSp.graphics;
  152.             g.clear();
  153.             var len:int = drawPoints.length;
  154.             var drawPoint:DrawPoint;
  155.             
  156.             var verts:Vector.<Number> = new Vector.<Number>();
  157.             var i:int;
  158.             for (i = 0; i < len; i++) {
  159.                 drawPoint = drawPoints[i];
  160.                 verts.push(drawPoint.drawX, drawPoint.drawY);
  161.             }
  162.             if (verts.length > 8) {
  163.                 drawThickSprine(g, verts, 3);
  164.             }
  165.         }
  166.         
  167.         //参考　FrocessingではじめるActionScriptドローイング 第4回　スケッチしてみよう
  168.         //http://gihyo.jp/design/feature/01/frocessing/0004?page=4
  169.         private function drawThickSprine(g:Graphics, verts:Vector.<Number>, thick:Number):void
  170.         {
  171.             var verts0:Vector.<Number> = new Vector.<Number>();
  172.             var verts1:Vector.<Number> = new Vector.<Number>();
  173.             
  174.             var i:int;
  175.             var len:int = verts.length;
  176.             var vx:Number, vy:Number;
  177.             var pt:Point;
  178.             var px0:Number = verts[0];
  179.             var py0:Number = verts[1];
  180.             var px1:Number, py1:Number;
  181.             var drawPoint:DrawPoint;
  182.             for (i = 2; i + 1 < len; i += 2) {
  183.                 px1 = verts[i];
  184.                 py1 = verts[i + 1];
  185.                 vx = px1 - px0;
  186.                 vy = py1 - py0;
  187.                 pt = new Point(vx, vy);
  188.                 pt.normalize(1);
  189.                 verts0.push(Math.floor(px0 + pt.y * thick));
  190.                 verts0.push(Math.floor(py0 - pt.x * thick));
  191.                 verts1.push(Math.floor(px0 - pt.y * thick));
  192.                 verts1.push(Math.floor(py0 + pt.x * thick));
  193.                 px0 = px1;
  194.                 py0 = py1;
  195.             }
  196.             
  197.             var dVerts0:Vector.<Number> = new Vector.<Number>();
  198.             var dVerts1:Vector.<Number> = new Vector.<Number>();
  199.             
  200.             //初期値
  201.             dVerts0.push(0, 0, verts0[0], verts0[1], verts0[2], verts0[3], verts0[4], verts0[5]);
  202.             dVerts1.push(verts1[4], verts1[5], verts1[2], verts1[3], verts1[0], verts1[1], 0, 0);
  203.             
  204.             //描画
  205.             len -= 2;
  206.             for (i = 6; i + 1 < len; i += 2) {
  207.                 dVerts0.shift();
  208.                 dVerts0.shift();
  209.                 dVerts0.push(verts0[i], verts0[i + 1]);
  210.                 dVerts1.unshift(verts1[i], verts1[i + 1]);
  211.                 dVerts1.pop();
  212.                 dVerts1.pop();
  213.                 drawPoint = drawPoints[Math.floor(i / 2)];
  214.                 g.beginFill(0xFFFEF1, drawPoint.timeFactor);
  215.                 g.moveTo(dVerts0[2], dVerts0[3]);
  216.                 splineTo(g, dVerts0, 3);
  217.                 g.lineTo(dVerts1[2], dVerts1[3]);
  218.                 splineTo(g, dVerts1, 3);
  219.                 g.lineTo(dVerts0[2], dVerts0[3]);
  220.                 g.endFill();
  221.             }
  222.         }
  223.     
  224.         //参考　Catmull-Rom スプライン曲線
  225.         //http://l00oo.oo00l.com/blog/archives/264
  226.         
  227.         //verts: (x0, y0, x1, y1, x2, y2, x3, y3)
  228.         private function splineTo(g:Graphics, verts:Vector.<Number>, numSegments:int):void
  229.         {
  230.             var i:int;
  231.             var len:int = verts.length;
  232.             var t:Number;
  233.             for (i = 0; i < numSegments; i++) {
  234.                 t = (i + 1) / numSegments;
  235.                 g.lineTo(
  236.                     catmullRom(verts[0], verts[2], verts[4], verts[6], t),
  237.                     catmullRom(verts[1], verts[3], verts[5], verts[7], t)
  238.                 );
  239.             }
  240.         }
  241.     
  242.         private function catmullRom(p0:Number, p1:Number, p2:Number, p3:Number, t:Number):Number
  243.         {
  244.             var v0:Number = (p2 - p0) * 0.5;
  245.             var v1:Number = (p3 - p1) * 0.5;
  246.             return (2 * p1 - 2 * p2 + v0 + v1) * t * t * t + ( -3 * p1 + 3 * p2 - 2 * v0 - v1) * t * t + v0 * t + p1;
  247.         }
  248.         
  249.         //時間がきたら消去
  250.         public function updateDrawPoints():void
  251.         {
  252.             if (drawPoints.length < 1) {
  253.                 return;
  254.             }
  255.             var drawPoint:DrawPoint = drawPoints[0];
  256.             
  257.             while (drawPoint.nextPoint != null){
  258.                 drawPoint.aliveTime--;
  259.                 if (drawPoint.aliveTime < 1) {
  260.                     drawPoints.shift();
  261.                 }
  262.                 updateDrawPoint(drawPoint);
  263.                 drawPoint = drawPoint.nextPoint;
  264.             }
  265.             updateDrawPoint(drawPoint);
  266.             drawPoint.aliveTime--;
  267.             if (drawPoint.aliveTime < 1) {
  268.                 drawPoints.shift();
  269.             }
  270.         }
  271.         
  272.         //時間に応じてY軸回転
  273.         private function updateDrawPoint(drawPoint:DrawPoint):void
  274.         {
  275.             var mat:Matrix3D = new Matrix3D();
  276.             mat.appendRotation((1 - drawPoint.timeFactor) * 540, Vector3D.Y_AXIS);
  277.             mat.appendTranslation(0, 0, 500);
  278.             mat.transformVectors(Vector.<Number>([drawPoint.x, drawPoint.y, drawPoint.z]), vout);
  279.             Utils3D.projectVectors(proj, vout, projverts, uvts);
  280.             drawPoint.drawX = projverts[0] + hsw;
  281.             drawPoint.drawY = projverts[1] + hsh;
  282.         }
  283.         
  284.         private function mouseUpHD(e:MouseEvent):void 
  285.         {
  286.             stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHD);
  287.         }
  288.         
  289.         private function mouseDownHD(e:MouseEvent):void 
  290.         {
  291.             stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHD);
  292.         }
  293.         
  294.         private function mouseMoveHD(e:MouseEvent = null):void 
  295.         {
  296.             //制御点をあまりとりすぎないように間引く
  297.             moveCount++;
  298.             if (moveCount % 3 != 0) {
  299.                 return;
  300.             }
  301.             moveCount = 0;
  302.             
  303.             //領域を超えたら描画しない
  304.             if (stage.mouseX > stage.stageWidth || stage.mouseY > stage.stageHeight) {
  305.                 return;
  306.             }
  307.             
  308.             var drawPoint:DrawPoint = new DrawPoint(stage.mouseX -hsw, stage.mouseY -hsh);
  309.             if (drawPoints.length > 0) {
  310.                 drawPoints[drawPoints.length - 1].nextPoint = drawPoint;
  311.             }
  312.             drawPoints.push(drawPoint);
  313.         }
  314.     }
  315. }
  317. import flash.display.Sprite;
  319. class DrawPoint 
  320. {
  321.     public var x:Number;
  322.     public var y:Number;
  323.     public var z:Number;
  324.     public var aliveTime:int = 300;
  325.     public var nextPoint:DrawPoint;
  326.     public var drawX:Number;
  327.     public var drawY:Number;
  328.     public function get timeFactor():Number 
  329.     {
  330.         return aliveTime / 300;
  331.     }
  332.     
  333.     public function DrawPoint(x:Number, y:Number) {
  334.         this.x = 2x;
  335.         this.y = y;
  336.         this.z = 0;
  337.     }
  338. }
noswf

光を描いて3Dで回すエフェクト forked from: 光を描いて3Dで回すエフェクト [diff(1)]

  1. // forked from KinkumaDesign's 光を描いて3Dで回すエフェクト
  2. /*
  3.  * PerfumeのPV 'baby cruising Love'の中に出てくる光のエフェクトを再現してみました。
  4.  * 1:13他　何回か出てきます
  5.  * 
  6.  * Youtube [PV] "Perfume" baby cruising Love 2nd Enc
  7.  * http://www.youtube.com/watch?v=76yVixuKqGY
  8.  * 
  9.  * マウスドラッグで光を描きます
  10.  * ハートの形とか可愛いかも
  11.  * 
  12.  * http://www.kuma-de.com/blog/1-programming/1-javascript/2009-09-07/1202
  13.  */
  15. package  
  16. {
  17.     import flash.display.Bitmap;
  18.     import flash.display.BitmapData;
  19.     import flash.display.Graphics;
  20.     import flash.display.Sprite;
  21.     import flash.events.Event;
  22.     import flash.events.MouseEvent;
  23.     import flash.filters.BitmapFilter;
  24.     import flash.filters.BitmapFilterQuality;
  25.     import flash.filters.BlurFilter;
  26.     import flash.filters.GlowFilter;
  27.     import flash.geom.ColorTransform;
  28.     import flash.geom.Matrix;
  29.     import flash.geom.Matrix3D;
  30.     import flash.geom.PerspectiveProjection;
  31.     import flash.geom.Point;
  32.     import flash.geom.Rectangle;
  33.     import flash.geom.Utils3D;
  34.     import flash.geom.Vector3D;
  35.     import flash.sampler.NewObjectSample;
  36.     import flash.text.TextField;
  37.     import flash.text.TextFormat;
  38.     
  39.         [SWF(width = "480", height = "480", backgroundColor = 0x000000, frameRate = "30")]
  40.     public class Main extends Sprite
  41.     {
  42.         public var penSp:Sprite;
  43.         public var canvas:Bitmap;
  44.         public var currentBmd:BitmapData;
  45.         public var lastDrawPoint:Point;
  46.         public var drawPoints:Vector.<DrawPoint>;
  47.         public var proj:Matrix3D;
  48.         public var vout:Vector.<Number> = new Vector.<Number>();
  49.         public var uvts:Vector.<Number> = new Vector.<Number>();
  50.         public var projverts:Vector.<Number> = new Vector.<Number>();
  51.         public var moveCount:int = 0;
  52.         
  53.         public var hsw:Number;
  54.         public var hsh:Number;
  55.         
  56.         public var logText:TextField;
  57.         
  58.         
  59.         public function Main() 
  60.         {
  61.             stage.addEventListener(MouseEvent.MOUSE_DOWN, initHD);
  62.         }
  63.         
  64.         private function initHD(e:MouseEvent):void 
  65.         {
  66.             stage.removeEventListener(MouseEvent.MOUSE_DOWN, initHD);
  68.             hsw = stage.stageWidth / 2;
  69.             hsh = stage.stageHeight / 2;
  70.             
  71.             var perse:PerspectiveProjection = new PerspectiveProjection();
  72.             perse.focalLength = 350;
  73.             proj = perse.toMatrix3D();
  74.             drawPoints = new Vector.<DrawPoint>();
  75.             initCanvas();
  76.             initLog();
  77.             
  78.             stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHD);
  79.             stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHD);
  80.             stage.addEventListener(Event.ENTER_FRAME, update);
  81.         }
  82.         
  83.         private function initLog():void
  84.         {
  85.             logText = new TextField();
  86.             addChild(logText);
  87.             logText.x = 8;
  88.             logText.y = 6;
  89.             var tf:TextFormat = new TextFormat();
  90.             tf.color = 0xffffff;
  91.             tf.size = 10;
  92.             tf.font = "_gothicMono";
  93.             logText.selectable = false;
  94.             logText.defaultTextFormat = tf;
  95.         }
  96.         
  97.         private function initCanvas():void
  98.         {
  99.             var w:Number = stage.stageWidth;
  100.             var h:Number = stage.stageHeight;
  101.             currentBmd = new BitmapData(w, h, true, 0xff000000);
  102.             canvas = new Bitmap(currentBmd);
  103.             addChild(canvas);
  104.             
  105.             penSp = new Sprite();
  106.             penSp.filters = [getGlowFilter(), getBlurFilter()];
  107.         }
  108.         
  109.         private function getGlowFilter():GlowFilter {
  110.             var color:Number = 0xFFF2D3;
  111.             var alpha:Number = 0.85;
  112.             var blurX:Number = 16;
  113.             var blurY:Number = 16;
  114.             var strength:Number = 3;
  115.             var inner:Boolean = false;
  116.             var knockout:Boolean = false;
  117.             var quality:Number = BitmapFilterQuality.HIGH;
  119.             return new GlowFilter(color,
  120.                                   alpha,
  121.                                   blurX,
  122.                                   blurY,
  123.                                   strength,
  124.                                   quality,
  125.                                   inner,
  126.                                   knockout);
  127.         }
  128.         
  129.         private function getBlurFilter():BlurFilter {
  130.             var blurX:Number = 2;
  131.             var blurY:Number = 2;
  132.             return new BlurFilter(blurX, blurY, BitmapFilterQuality.HIGH);
  133.         }
  135.         
  136.         private function update(e:Event):void 
  137.         {
  138.             updateDrawPoints();
  139.             updateDraw();
  140.             
  141.             var r:Rectangle = currentBmd.rect;
  142.             currentBmd.lock();
  143.             currentBmd.fillRect(r, 0x000000);
  144.             currentBmd.draw(penSp, new Matrix(), new ColorTransform(), null, r);
  145.             currentBmd.unlock();
  146.             logText.text = "POINTS:" + drawPoints.length.toString();
  147.         }
  148.         
  149.         public function updateDraw():void
  150.         {
  151.             var g:Graphics = penSp.graphics;
  152.             g.clear();
  153.             var len:int = drawPoints.length;
  154.             var drawPoint:DrawPoint;
  155.             
  156.             var verts:Vector.<Number> = new Vector.<Number>();
  157.             var i:int;
  158.             for (i = 0; i < len; i++) {
  159.                 drawPoint = drawPoints[i];
  160.                 verts.push(drawPoint.drawX, drawPoint.drawY);
  161.             }
  162.             if (verts.length > 8) {
  163.                 drawThickSprine(g, verts, 3);
  164.             }
  165.         }
  166.         
  167.         //参考　FrocessingではじめるActionScriptドローイング 第4回　スケッチしてみよう
  168.         //http://gihyo.jp/design/feature/01/frocessing/0004?page=4
  169.         private function drawThickSprine(g:Graphics, verts:Vector.<Number>, thick:Number):void
  170.         {
  171.             var verts0:Vector.<Number> = new Vector.<Number>();
  172.             var verts1:Vector.<Number> = new Vector.<Number>();
  173.             
  174.             var i:int;
  175.             var len:int = verts.length;
  176.             var vx:Number, vy:Number;
  177.             var pt:Point;
  178.             var px0:Number = verts[0];
  179.             var py0:Number = verts[1];
  180.             var px1:Number, py1:Number;
  181.             var drawPoint:DrawPoint;
  182.             for (i = 2; i + 1 < len; i += 2) {
  183.                 px1 = verts[i];
  184.                 py1 = verts[i + 1];
  185.                 vx = px1 - px0;
  186.                 vy = py1 - py0;
  187.                 pt = new Point(vx, vy);
  188.                 pt.normalize(1);
  189.                 verts0.push(Math.floor(px0 + pt.y * thick));
  190.                 verts0.push(Math.floor(py0 - pt.x * thick));
  191.                 verts1.push(Math.floor(px0 - pt.y * thick));
  192.                 verts1.push(Math.floor(py0 + pt.x * thick));
  193.                 px0 = px1;
  194.                 py0 = py1;
  195.             }
  196.             
  197.             var dVerts0:Vector.<Number> = new Vector.<Number>();
  198.             var dVerts1:Vector.<Number> = new Vector.<Number>();
  199.             
  200.             //初期値
  201.             dVerts0.push(0, 0, verts0[0], verts0[1], verts0[2], verts0[3], verts0[4], verts0[5]);
  202.             dVerts1.push(verts1[4], verts1[5], verts1[2], verts1[3], verts1[0], verts1[1], 0, 0);
  203.             
  204.             //描画
  205.             len -= 2;
  206.             for (i = 6; i + 1 < len; i += 2) {
  207.                 dVerts0.shift();
  208.                 dVerts0.shift();
  209.                 dVerts0.push(verts0[i], verts0[i + 1]);
  210.                 dVerts1.unshift(verts1[i], verts1[i + 1]);
  211.                 dVerts1.pop();
  212.                 dVerts1.pop();
  213.                 drawPoint = drawPoints[Math.floor(i / 2)];
  214.                 g.beginFill(0xFFFEF1, drawPoint.timeFactor);
  215.                 g.moveTo(dVerts0[2], dVerts0[3]);
  216.                 splineTo(g, dVerts0, 3);
  217.                 g.lineTo(dVerts1[2], dVerts1[3]);
  218.                 splineTo(g, dVerts1, 3);
  219.                 g.lineTo(dVerts0[2], dVerts0[3]);
  220.                 g.endFill();
  221.             }
  222.         }
  223.     
  224.         //参考　Catmull-Rom スプライン曲線
  225.         //http://l00oo.oo00l.com/blog/archives/264
  226.         
  227.         //verts: (x0, y0, x1, y1, x2, y2, x3, y3)
  228.         private function splineTo(g:Graphics, verts:Vector.<Number>, numSegments:int):void
  229.         {
  230.             var i:int;
  231.             var len:int = verts.length;
  232.             var t:Number;
  233.             for (i = 0; i < numSegments; i++) {
  234.                 t = (i + 1) / numSegments;
  235.                 g.lineTo(
  236.                     catmullRom(verts[0], verts[2], verts[4], verts[6], t),
  237.                     catmullRom(verts[1], verts[3], verts[5], verts[7], t)
  238.                 );
  239.             }
  240.         }
  241.     
  242.         private function catmullRom(p0:Number, p1:Number, p2:Number, p3:Number, t:Number):Number
  243.         {
  244.             var v0:Number = (p2 - p0) * 0.5;
  245.             var v1:Number = (p3 - p1) * 0.5;
  246.             return (2 * p1 - 2 * p2 + v0 + v1) * t * t * t + ( -3 * p1 + 3 * p2 - 2 * v0 - v1) * t * t + v0 * t + p1;
  247.         }
  248.         
  249.         //時間がきたら消去
  250.         public function updateDrawPoints():void
  251.         {
  252.             if (drawPoints.length < 1) {
  253.                 return;
  254.             }
  255.             var drawPoint:DrawPoint = drawPoints[0];
  256.             
  257.             while (drawPoint.nextPoint != null){
  258.                 drawPoint.aliveTime--;
  259.                 if (drawPoint.aliveTime < 1) {
  260.                     drawPoints.shift();
  261.                 }
  262.                 updateDrawPoint(drawPoint);
  263.                 drawPoint = drawPoint.nextPoint;
  264.             }
  265.             updateDrawPoint(drawPoint);
  266.             drawPoint.aliveTime--;
  267.             if (drawPoint.aliveTime < 1) {
  268.                 drawPoints.shift();
  269.             }
  270.         }
  271.         
  272.         //時間に応じてY軸回転
  273.         private function updateDrawPoint(drawPoint:DrawPoint):void
  274.         {
  275.             var mat:Matrix3D = new Matrix3D();
  276.             mat.appendRotation((1 - drawPoint.timeFactor) * 540, Vector3D.Y_AXIS);
  277.             mat.appendTranslation(0, 0, 500);
  278.             mat.transformVectors(Vector.<Number>([drawPoint.x, drawPoint.y, drawPoint.z]), vout);
  279.             Utils3D.projectVectors(proj, vout, projverts, uvts);
  280.             drawPoint.drawX = projverts[0] + hsw;
  281.             drawPoint.drawY = projverts[1] + hsh;
  282.         }
  283.         
  284.         private function mouseUpHD(e:MouseEvent):void 
  285.         {
  286.             stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHD);
  287.         }
  288.         
  289.         private function mouseDownHD(e:MouseEvent):void 
  290.         {
  291.             stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHD);
  292.         }
  293.         
  294.         private function mouseMoveHD(e:MouseEvent = null):void 
  295.         {
  296.             //制御点をあまりとりすぎないように間引く
  297.             moveCount++;
  298.             if (moveCount % 3 != 0) {
  299.                 return;
  300.             }
  301.             moveCount = 0;
  302.             
  303.             //領域を超えたら描画しない
  304.             if (stage.mouseX > stage.stageWidth || stage.mouseY > stage.stageHeight) {
  305.                 return;
  306.             }
  307.             
  308.             var drawPoint:DrawPoint = new DrawPoint(stage.mouseX -hsw, stage.mouseY -hsh);
  309.             if (drawPoints.length > 0) {
  310.                 drawPoints[drawPoints.length - 1].nextPoint = drawPoint;
  311.             }
  312.             drawPoints.push(drawPoint);
  313.         }
  314.     }
  315. }
  317. import flash.display.Sprite;
  319. class DrawPoint 
  320. {
  321.     public var x:Number;
  322.     public var y:Number;
  323.     public var z:Number;
  324.     public var aliveTime:int = 300;
  325.     public var nextPoint:DrawPoint;
  326.     public var drawX:Number;
  327.     public var drawY:Number;
  328.     public function get timeFactor():Number 
  329.     {
  330.         return aliveTime / 300;
  331.     }
  332.     
  333.     public function DrawPoint(x:Number, y:Number) {
  334.         this.x = x;
  335.         this.y = y;
  336.         this.z = 0;
  337.     }
  338. }
noswf
Get Adobe Flash Player