以前やったのを関数のベジェ曲線描画でやる。
参考にさせていただきました。
てっく煮ブログ - ベジエ曲線の仕組み (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);
↓ ソース等
忙しく移動させてます。
二つ並べて移動させるだけのクラス
ACTIONSCRIPT:
- package {
- import flash.display.Sprite;
- import flash.events.Event;
- public class CurveTest extends Sprite
- {
- public var line:ThreeGBezier
- public var line2:ThreeGBezier;
- public function CurveTest()
- {
- stage.scaleMode = "noScale";
- stage.align = "TL";
- line = new ThreeGBezier;
- line2 = new ThreeGBezier;
- line.graphics.lineStyle(1,0x6481F5);
- line.bezierTo(0,0,40,-40,160,40, 200,0);
- line.y = 50;
- line2.graphics.lineStyle(1,0x6481F5);
- line2.bezierTo(0,0,40,-40,160,40,200,0);
- line2.y = 50;
- line2.x = 200;
- this.addChild(line);
- this.addChild(line2);
- this.addEventListener(Event.ENTER_FRAME, onEnterHandler);
- }
- public function onEnterHandler(event:Event):void{
- line.x -= 2;
- line2.x -= 2;
- if(line.x <= -200) line.x = 200;
- if(line2.x <= -200) line2.x = 200;
- }
- }
- }
bezierToをもつクラス、こういう風にしておくと便利
ACTIONSCRIPT:
- package
- {
- import flash.display.Sprite;
- import flash.geom.Point;
- public class ThreeGBezier extends Sprite
- {
- private var p1:Point = new Point;
- private var p2:Point = new Point;
- private var p0:Point = new Point;
- private var p3:Point = new Point;
- public function ThreeGBezier(){};
- public function bezierTo(p0x:Number, p0y:Number,p1x:Number, p1y:Number,p2x:Number, p2y:Number,p3x:Number, p3y:Number):void{
- this.p0.x = p0x;
- this.p0.y = p0y;
- this.p1.x = p1x;
- this.p1.y = p1y;
- this.p2.x = p2x;
- this.p2.y = p2y;
- this.p3.x = p3x;
- this.p3.y = p3y;
- var pt:Point, pt2:Point, pt3:Point;
- var t:Number;
- var diff:Number = 1.0 / 6;
- graphics.moveTo(p0.x, p0.y);
- graphics.moveTo(p0.x, p0.y);
- graphics.moveTo(p0.x, p0.y);
- for(t = 0.0; t <= 1.0; t += 0.01)
- {
- pt = getBezierPoint(t);
- graphics.lineTo(pt.x, pt.y);
- }
- graphics.lineTo(p3.x, p3.y);
- }
- // にとよんさんのソース
- private function getBezierPoint(t:Number)
oint - {
- return new Point(Math.pow(1 - t, 3) * p0.x + 3 * t * Math.pow(1 - t, 2) * p1.x
- + 3 * t * t * (1 - t) * p2.x + t * t * t * p3.x,
- Math.pow(1 - t, 3) * p0.y + 3 * t * Math.pow(1 - t, 2) * p1.y
- + 3 * t * t * (1 - t) * p2.y + t * t * t * p3.y);
- }
- }
- }
- Newer: FIVe3Dで３Dテンキー
- Older: Box2d で風雨に揺れる葉っぱのようなもの
Comments:0
Trackbacks:1
- Trackback URL for this entry
- http://parpue.net/web/347/trackback
- Listed below are links to weblogs that reference
- ベジェ曲線と、すごい単純な波の表現（２） from parpue.net
- pingback from parpue.net - Flash,Degrafaで簡単に波を表現 (1) 09-04-15 (水) 3:02
-
[...] 前にかいたのと同じようなことを Degrafaを使用してやってみました。 [...]
