parpue.net » ベジェ曲線 http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 ベジェ曲線と、すごい単純な波の表現（２） http://parpue.net/web/347 http://parpue.net/web/347#comments Mon, 27 Oct 2008 10:39:10 +0000 okm http://parpue.net/?p=347 以前やったのを関数のベジェ曲線描画でやる。

参考にさせていただきました。
てっく煮ブログ - ベジエ曲線の仕組み (4) -ActionScript 3.0 でベジエ曲線を描く

参考
３次ベジェ曲線

Spriteを継承した、ベジェ曲線を描画するための
bezierTo 関数を持つクラスを作成して描画しました。

これを二つ並べて移動させることでナミナミさせてます。

bezierToは汎用的に使える予感です。

制御点 P0,P1,P2,P3として、
bezuerTo(P0.x,P0.y,P1.x,P1.y,P2.x,P2.y,P3.x,P3.y);

↓ ソース等


忙しく移動させてます。


二つ並べて移動させるだけのクラス

>>text
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.  
  5.     public class CurveTest extends Sprite
  6.     {
  7.         public var line:ThreeGBezier
  8.         public var line2:ThreeGBezier;
  9.        
  10.         public function CurveTest()
  11.         {
  12.             stage.scaleMode = "noScale";
  13.             stage.align = "TL";
  14.            
  15.             line = new ThreeGBezier;
  16.             line2 = new ThreeGBezier;
  17.             line.graphics.lineStyle(1,0x6481F5);
  18.             line.bezierTo(0,0,40,-40,160,40, 200,0);
  19.             line.y = 50;
  20.             line2.graphics.lineStyle(1,0x6481F5);
  21.             line2.bezierTo(0,0,40,-40,160,40,200,0);
  22.             line2.y = 50;
  23.             line2.x = 200;
  24.             this.addChild(line);
  25.             this.addChild(line2);
  26.            
  27.             this.addEventListener(Event.ENTER_FRAME, onEnterHandler);
  28.         }
  29.        
  30.         public function onEnterHandler(event:Event):void{
  31.             line.x -= 2;
  32.             line2.x -= 2;
  33.             if(line.x <= -200) line.x = 200;
  34.             if(line2.x <= -200) line2.x = 200;
  35.         }
  36.     }
  37. }

bezierToをもつクラス、こういう風にしておくと便利

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.geom.Point;
  5.  
  6.     public class ThreeGBezier extends Sprite
  7.     {
  8.         private var p1:Point = new Point;
  9.         private var p2:Point = new Point;
  10.         private var p0:Point = new Point;
  11.         private var p3:Point = new Point;
  12.        
  13.         public function ThreeGBezier(){};   
  14.         public function bezierTo(p0x:Number, p0y:Number,p1x:Number, p1y:Number,p2x:Number, p2y:Number,p3x:Number, p3y:Number):void{
  15.             this.p0.x = p0x;
  16.             this.p0.y = p0y;
  17.             this.p1.x = p1x;
  18.             this.p1.y = p1y;
  19.             this.p2.x = p2x;
  20.             this.p2.y = p2y;
  21.             this.p3.x = p3x;
  22.             this.p3.y = p3y;
  23.            
  24.             var pt:Point, pt2:Point, pt3:Point;
  25.             var t:Number;
  26.             var diff:Number = 1.0 / 6;
  27.  
  28.             graphics.moveTo(p0.x, p0.y);
  29.             graphics.moveTo(p0.x, p0.y);       
  30.             graphics.moveTo(p0.x, p0.y);
  31.             for(t = 0.0; t <= 1.0; t += 0.01)
  32.             {
  33.                 pt = getBezierPoint(t);
  34.                 graphics.lineTo(pt.x, pt.y);
  35.             }
  36.              graphics.lineTo(p3.x, p3.y);
  37.         }
  38.  
  39.     // にとよんさんのソース
  40.         private function getBezierPoint(t:Number) :P oint
  41.         {
  42.             return new Point(Math.pow(1 - t, 3)  * p0.x + 3 * t * Math.pow(1 - t, 2) * p1.x
  43.                        + 3 * t * t * (1 - t) * p2.x + t * t * t * p3.x,
  44.                          Math.pow(1 - t, 3)  * p0.y + 3 * t * Math.pow(1 - t, 2) * p1.y
  45.                        + 3 * t * t * (1 - t) * p2.y + t * t * t * p3.y);
  46.         }
  47. }
  48. }
]]> http://parpue.net/web/347/feed 1 ベジェ曲線、オートトレス等使って、イベント告知ページ作ってみた http://parpue.net/web/145 http://parpue.net/web/145#comments Tue, 29 Jul 2008 06:04:26 +0000 okm http://parpue.net/?p=145

ベジェ曲線練習するぞ宣言をしたら、
会社の総務の方が本を貸してくれた！

昨日はそれを読みながら、イベント告知ページを作ってみた。
まぁ習作ということで・・・。

→BearBornBaby vol.2
僕の所属しているバンドの企画イベントです。
興味もっていただけた方は足を運んでいただけると泣いて喜びます。

さて、illustratorのようにベクタ画像をひける便利なフリーソフトがあります。
→Inkscape
→mycom　ゼロからはじめるInkscape - Illustratorライクな無料ドローツール

今回のような画像をつくるのには、十分に力を発揮します。
wndows, macos, linux などのさまざまな環境で動作します。

それからビットマップ画像を自動的にベクター画像に変換する
Potraceというソフトも使用しました。

→potrace

どんな風にトレースされるか、こちらの方の比較画像がわかりやすい。
→Potraceでラスタ画像をベクタ画像に変換

これを比較しながら変換できるようにしたMac用のソフト cocoapotrace を使用して、
写真からトレースした画像なども用いました。
→Cocoapotrace

しかし、慣れないので、これだけの画像作るだけで相当時間かかりました・・・。

それでもベジェ曲線、大分言うこと聞いてくれるようになってきました。がんばろう。

]]> http://parpue.net/web/145/feed 0 ベジェ曲線と、すごい単純な波の表現 http://parpue.net/web/41 http://parpue.net/web/41#comments Thu, 10 Jul 2008 06:58:27 +0000 okm http://parpue.net/?p=41 僕がFlashを作るときに使う素材は、
Flashで描けるようなベクター画像ではなく、
ドローソフトで作ったラスター画像を使っています。

■参考
ベクターイメージ
PhotoShopでベジェ曲線に挑戦

ベクター画像を生成する場合、どんなソフトを使ってもだいたいベジェ曲線という作画法を用いるが、
僕はこれがどうにも苦手。

Flashの場合、LineToやらCurveToという関数でベクター画像を生成することもできるので、
もっぱら絵的なものはラスター画像で用意して、線的なものはFlashで描画してしまっている。

避けてばかりじゃいかんなーと思いたち、ペンタブレットも買ったことだし、
最近は知り合いに教わって、ベジェ曲線を使っての作画に挑戦している。

今回はレベル１ということで、ベジェ曲線で波形を描いて、
ナミナミさせてみた。

↓以下参考まで。。

Flashで一番単純な無限ループのやり方だと思う。
あんまり応用利かないやり方だけど・・・。

ステージと同じサイズのループ画像を作成して、
Flash上でシンボル化する。

ナミナミ

ステージにシンボルのインスタンスを２つ、
それぞれの x座標を、"0"と"ステージ幅のサイズ"、
y座標を等しくして置く。

あとはマイフレームごとに x 座標を減らしていって、
画面の外にはみ出した時点で、画面幅の位置に戻す。

>>text
ACTIONSCRIPT:
  1. function waveOnEnter(event){
  2.     this._x -= 10;
  3.     if(this._x == -400){
  4.         this._x = 400;
  5.     }
  6. }
  7. wave_1_mc.onEnterFrame = waveOnEnter;
  8. wave_2_mc.onEnterFrame = waveOnEnter;

これでとりあえず波を表現することができました。
表示しているFlashでは周期の違う波を重ねています。

]]> http://parpue.net/web/41/feed 2