<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>blog ViolentCoding &#187; ActionScript</title>
	<atom:link href="http://violentcoding.com/blog/category/actionscript/feed" rel="self" type="application/rss+xml" />
	<link>http://violentcoding.com/blog</link>
	<description>for more violent coder</description>
	<lastBuildDate>Tue, 18 Aug 2009 06:11:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>[AS]曲線の公式を描画するライブラリ</title>
		<link>http://violentcoding.com/blog/2009/01/03/archives/467</link>
		<comments>http://violentcoding.com/blog/2009/01/03/archives/467#comments</comments>
		<pubDate>Sat, 03 Jan 2009 11:55:36 +0000</pubDate>
		<dc:creator>e_s_jp</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[SparkProject]]></category>

		<guid isPermaLink="false">http://violentcoding.com/blog/2009/01/03/archives/467</guid>
		<description><![CDATA[Spark project 勉強会#6でお話した「曲線の公式を使って図形を描いたりするライブラリ」について。
&#160;
各曲線の数学的公式を１つ１つのクラスとして用意し、ごそごそ座標計算をするライブラリです。
Spa [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://wiki.libspark.org/wiki/SparkStudy/06">Spark project 勉強会#6</a>でお話した「曲線の公式を使って図形を描いたりするライブラリ」について。</p>
<p>&nbsp;</p>
<p>各曲線の数学的公式を１つ１つのクラスとして用意し、ごそごそ座標計算をするライブラリです。</p>
<p><strong>Spark project/CurveLib</strong><br />
<a href="http://www.libspark.org/wiki/e_s_jp/CurveLib">http://www.libspark.org/wiki/e_s_jp/CurveLib</a></p>
<p>&nbsp;</p>
<p>ICurveFormulaインタフェースを実装した曲線の公式定義クラスと、その公式定義をいろいろ計算するCurvePointクラスがいらっしゃいます。<br />
それだけでは、見た目に楽しくないので CurveGraphicsクラスというgraphics.lineTo()して曲線を描画するクラスもあったりします。</p>
<p>&nbsp;</p>
<p>CurveLibを使ってどんな曲線が描けて、また公式定義クラスの引数確認用にサンプルサイトを作ったので見てみてください。</p>
<blockquote>
<p><strong>CurveLib</strong><br />
  <a href="http://violentcoding.com/content/curvelib/" title="http://violentcoding.com/content/curvelib/">http://violentcoding.com/content/curvelib/</a></p>
<p><strong>上記のCurveLibサイトと同じものSWF置き場</strong>（ローカルFlashPlayerの方が描画が早いのでこちらをおすすめ）<br />
  <a href="http://www.libspark.org/svn/as3/CurveLib/trunk/doc/fp9/formulaSWF/">http://www.libspark.org/svn/as3/CurveLib/trunk/doc/fp9/formulaSWF/</a></p>
</blockquote>
<div style="text-align: center;">
  <img src="http://violentcoding.com/blog/wp-content/uploads/2009/01/curvelib01.png" width="480" height="311" alt="curvelib01.png" />
</div>
<p>&nbsp;</p>
<hr />
<p>それでは、CurveLib概要。</p>
<p><strong>CurvePointクラス</strong></p>
<ul>
<li>曲線の公式を使った計算</li>
<li>半径を1.0として計算</li>
</ul>
<p><strong>ICurveFormulaインタフェース</strong></p>
<ul>
<li>曲線公式の定義</li>
<li>半径を1.0として定義</li>
</ul>
<p>今用意している曲線は以下のようなものです。</p>
<ol>
<li>Botanic Curve</li>
<li>Rhodonea（バラ曲線）</li>
<li>Epitrochoid（外トロコイド）</li>
<li>Hypotrochoid（内トロコイド）</li>
<li>Starr Rose</li>
</ol>
<p>※半径を1.0で計算し、また始点から終点への周回数計算が楽なため公式定義の引数に分母と分子を設定するとか数学的公式とは違ってクセがあります。</p>
<p>&nbsp;</p>
<p>クラス図としては以下になります。一応公式クラスを追加しても、まぁ良い感じになるように学習してみました。</p>
<div style="text-align: center;">
  <a href="http://violentcoding.com/blog/wp-content/uploads/2009/01/curvelib.gif"><img src="http://violentcoding.com/blog/wp-content/uploads/2009/01/curvelib.gif" width="480" height="363" alt="curveLib.gif" style="border:1px #999999 dashed;" /></a>
</div>
<pre class="brush: as3;">
// 参考コード

// CurveGraphicsの抽象的クラス
var curve : CurveGraphicsBase;

// 公式の計算をするCurvePointクラスを用意
var curvePoint : CurvePoint = new CurvePoint( new BotanicCurveFormula( 5, 4, 1, 5 ) );

// 半径200でCurveGraphicsクラスを用意
curve = new CurveGraphics( 200, curvePoint );

// 計算系の設定
curve.stepSize = 1 ;
curve.startAngle = 0;
curve.isClockWise = !true;
curve.isLoop = !true;

// 配置座標（曲線の中心が0,0）
curve.x = 250;
curve.y = 250;
addChild( curve );

// 描画の線設定
curve.lineStyle( 0, 0x000000 );

// 描画の塗り設定
curve.beginFill( 0xFF0000, 0.25 );

// 曲線の描画
curve.lineCurve( true );
</pre>
<p>&nbsp;</p>
<hr />
<p>CurveLibの主要となるのはCurvePointクラス。</p>
<p>CurvePointクラスのメソッドとしては、</p>
<ul>
<li>指定角度でのXY座標を取得：getAnglePoint( angle )</li>
<li>曲線上の計算する点の数を取得：getPointCount()</li>
<li>タイマー計算：startCurvePoint( delay, isClose )</li>
<li>タイマー計算の制御：startTick()・stopTick()・resetTick()</li>
<li>タイマー計算時イベント：start・stop・tick・complete・loop イベント</li>
</ul>
<p>CurvePointクラスのプロパティとしては、</p>
<ul>
<li>formulaプロパティ：使用する公式（ICurveFormula）</li>
<li>何度ごとに計算するか：stepSizeプロパティ</li>
<li>開始角度の指定：startAngleプロパティ</li>
<li>時計周りに計算するかどうか：isClockWiseプロパティ</li>
<li>ループさせるか：isLoopプロパティ</li>
</ul>
<p>を用意しましたので、それらを駆使して曲線上の座標値でゴソゴソします。</p>
<p>またCurvePointクラスを使用して曲線をgraphics.lineTo()するCurveGraphicsクラスでも数種類の曲線描画ができたりします。</p>
<p>&nbsp;</p>
<hr />
<p><strong>CurveGraphicsクラス</strong></p>
<ul>
<li>CurvePointクラスと「曲線の半径」を指定する</li>
<li>graphics.lineTo()などする</li>
<li>for文で一気に描画するパターン</li>
<li>タイマーで描画するパターン</li>
<li>曲線の中心点が( x=0, y=0 )</li>
<li>graphics.endFill()のtrue/falseを指定して連続描画</li>
</ul>
<p>&nbsp;</p>
<p>CurveGraphicsクラスでの描画パターン（１）for文で一気に描くタイプ</p>
<ul>
<li>線・塗りで曲線を描画：lineCurve( isEndFill )</li>
<li>曲線上の点を円で描画：chipCurve( chipRadius, isChipFill )</li>
<li>曲線上の点Pと指定角度をずらした点Qを結んだ線を描画：lineAngleBetween( angleBetween )</li>
</ul>
<p><strong>サンプルは以下</strong></p>
<p><a href="http://www.libspark.org/svn/as3/CurveLib/trunk/samples/fp9/samples/">http://www.libspark.org/svn/as3/CurveLib/trunk/samples/fp9/samples/</a></p>
<p>のSample01.fla・src/Sample01.asが該当です。</p>
<p>&nbsp;</p>
<p>CurveGraphicsクラスでの描画パターン（２）タイマーでチクチク描くタイプ</p>
<ul>
<li>線・塗りで曲線を<strong>タイマー</strong>描画：tickLineCurve( delay, isEndFill )</li>
<li>曲線上の点を円で<strong>タイマー</strong>描画：tickChipCurve( delay, chipRadius, isChipFill )</li>
<li>曲線上の点Pと指定角度をずらした点Qを結んだ線を<strong>タイマー</strong>描画：tickLineAngleBetween( delay, angleBetween )</li>
</ul>
<p><strong>サンプルは以下</strong></p>
<p><a href="http://www.libspark.org/svn/as3/CurveLib/trunk/samples/fp9/samples/">http://www.libspark.org/svn/as3/CurveLib/trunk/samples/fp9/samples/</a></p>
<p>のSample02.fla・src/Sample02.asが該当です。</p>
<p>&nbsp;</p>
<p>また、塗りの設定で以下の違いがでます。</p>
<p>CurveGraphicsクラスでの描画　引数「isEndFill」== trueの場合</p>
<ul>
<li>線の描画の最後でgraphics.endFill()を実行</li>
<li>次の描画ではあらためてbeginFill()にて色を設定する必要がある。</li>
</ul>
<p>CurveGraphicsクラスでの描画　引数「isEndFill」== falseの場合</p>
<ul>
<li>線の描画の最後でもgraphics.endFill()をしない</li>
<li>endFill()、beginFill()をしないので、塗りが閉じられずにそのまま次の描画に続く。</li>
</ul>
<p><strong>サンプルは以下</strong></p>
<p><a href="http://www.libspark.org/svn/as3/CurveLib/trunk/samples/fp9/samples/">http://www.libspark.org/svn/as3/CurveLib/trunk/samples/fp9/samples/</a></p>
<p>のSample03.fla・src/Sample03.as、Sample04.fla・src/Smaple04.asが該当です。</p>
<p>&nbsp;</p>
<p>また、ASDocコメント記述の学習もしてみたので、その他については以下を参照してください。</p>
<p><strong>CurveLib ASDoc</strong><br />
<a href="http://www.libspark.org/svn/as3/CurveLib/trunk/doc/fp9/asdoc-output/">http://www.libspark.org/svn/as3/CurveLib/trunk/doc/fp9/asdoc-output/</a></p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://violentcoding.com/blog/2009/01/03/archives/467/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

