- 2008-04-23 (水) 21:55
- ActionScript
ちょい絶Vol.3で発表したものです。
ベジェ曲線にはアフィン不変性という特性があるので、CurveToを使って3Dを描画というネタでした。
赤色がアンカーポイント、緑色がコントロールポイントになってます。
左クリックしながらマウス移動で回転
8頂点でも、それなりに綺麗な正円が描画できます。
以下、主要部分のコード。
正円モデルデータの生成部分
Actionscript:
public function CreateCircle(r:Number,n:uint):void {
var radius:Number = r; // 円の半径
var num:uint = n; // 頂点の数
var nAngle:Number = 2*Math.PI / num; // 角度
vertices = new Array(); // アンカーポイント格納
controlls = new Array(); // コントロールポイント格納
// 指定数に分割
for (var i:uint=1;<=num;++i) {
var theta:Number = i*nAngle;
// アンカーポイントの座標
var anc:Vector = new Vector((r*Math.cos(theta)),(r*Math.sin(theta)),0);
// コントロールポイントの座標
var ctr:Vector = new Vector(
anc.x+r*Math.tan(nAngle/2)*Math.cos(theta-Math.PI/2),
anc.y+r*Math.tan(nAngle/2)*Math.sin(theta-Math.PI/2),0);
var radius:Number = r; // 円の半径
var num:uint = n; // 頂点の数
var nAngle:Number = 2*Math.PI / num; // 角度
vertices = new Array(); // アンカーポイント格納
controlls = new Array(); // コントロールポイント格納
// 指定数に分割
for (var i:uint=1;<=num;++i) {
var theta:Number = i*nAngle;
// アンカーポイントの座標
var anc:Vector = new Vector((r*Math.cos(theta)),(r*Math.sin(theta)),0);
// コントロールポイントの座標
var ctr:Vector = new Vector(
anc.x+r*Math.tan(nAngle/2)*Math.cos(theta-Math.PI/2),
anc.y+r*Math.tan(nAngle/2)*Math.sin(theta-Math.PI/2),0);
vertices.push(anc);
controlls.push(ctr);
}
}
描画部分
Actionscript:
var fvecstart:Vector = tform(vertices[0]);
var cvecstart:Vector = tform(controlls[0]);
var num:uint = vertices.length;
// 開始座標へ移動
g.moveTo(fvecstart.x,fvecstart.y);
g.beginFill(0x0000ff,1);
for(var i:uint=1;i<num ;++i){>
fvec = tform(vertices[i]);
cvec = tform(controlls[i]);
g.curveTo(cvec.x,cvec.y,fvec.x,fvec.y);
}
// 開始座標に戻る
g.curveTo(cvecstart.x,cvecstart.y,fvecstart.x,fvecstart.y);
g.endFill();
var fvecstart:Vector = tform(vertices[0]);
var cvecstart:Vector = tform(controlls[0]);
var num:uint = vertices.length;
var cvecstart:Vector = tform(controlls[0]);
var num:uint = vertices.length;
// 開始座標へ移動
g.moveTo(fvecstart.x,fvecstart.y);
g.beginFill(0x0000ff,1);
for(var i:uint=1;i<num ;++i){>
fvec = tform(vertices[i]);
cvec = tform(controlls[i]);
g.curveTo(cvec.x,cvec.y,fvec.x,fvec.y);
}
// 開始座標に戻る
g.curveTo(cvecstart.x,cvecstart.y,fvecstart.x,fvecstart.y);
g.endFill();
- Newer: Device Central CS3のアップデートが必ず失敗する(解決)
- Older: Haskell読書会に参加してきた
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://hex6.net/blog/wp-trackback.php?p=22
- Listed below are links to weblogs that reference
- ちょい絶Vol.3ネタ AS3のベジェ曲線(curveTo)で3Dしてみる from hex6.net
