ActionScript 3.0で始めるオブジェクト指向スクリプティング

第53回 座標にもっとも近い線分上の点を内積で求める

この記事を読むのに必要な時間:およそ 1 分

今回は,ベクトルの「内積」をお題にして新たなムービーをつくる。ステージに階段状の折れ線を描き,インスタンスをマウスでその線に沿ってのみドラッグできるようにしよう図1)⁠マウス座標をどのようにして折れ線上の点に投影して,インスタンスの動きを制限するかが課題だ。

図1 インスタンスをドラッグすると折れ線に沿って動く

図1 インスタンスをドラッグすると折れ線に沿って動く

内積から射影を取出す

まず直線の場合なら,ある座標からもっとも近い直線上の点は,その座標から直線に下ろした垂線との交点になる。しかし,折れ線は長さの決まった線分をつなぎ合わせてできる。そのため,座標の位置を場合分けしなければならない。線分をabとしたとき,点aとbにそれぞれ垂線を引くと,3つの領域に分かれる図2)⁠

図2 線分の両端に引いた垂線で座標を3つの領域に分ける

図2 線分の両端に引いた垂線で座標を3つの領域に分ける

ふたつの垂線の内側(点c)については,直線について述べたとおり,座標から線分に垂線を下ろした交点になる。座標が垂線の外側のとき(点c'またはc")は,線分の端のaもしくはbがもっとも近い点だ。それでは,これらの場合分けや長さの計算に,ベクトルの内積がどう使えるのか。

ここで,第51回「ベクトルの内積で面の向きを調べる」ベクトルの内積を数学的に理解するで,ふたつのベクトルAとBの内積を説明した図がヒントになる第51回図6再掲)⁠ベクトルAとBのなす角をθとすると,内積はふたつのベクトルそれぞれの長さ(|A|と|B|で表す)とcosθの積|A||B|cosθで定められる。

第51回 図6 内積はベクトルAのBへの射影と|B|との積(再掲)

第51回 図6 内積はベクトルAのBへの射影と|B|との積(再掲)

第51回図6では,|A|cosθを青い線で示した。すると,青い線の長さは,ベクトルBに垂直な光を当てたとき,BのうえにかかるベクトルAの影に等しい(この長さをAの「射影」という)⁠そして,ベクトルAの先端(終点)とその影の先端を結ぶ線は,ベクトルBと直交する。したがって,この交点がベクトルAの終点からもっとも近いベクトルB上の点となる。

つまり,ベクトルBの始点からベクトルAの射影である|A|cosθの距離の点が,ベクトルAの終点座標からもっとも近いベクトルB上の点である。ただし,射影はベクトルB上に収まらなければならない。Aの射影がベクトルBの外に出るのは,射影がBの長さ|B|より大きいか,ふたつのベクトルのなす角θが鈍角の(90度より大きい)ときだ。

内積による場合分けと線分との距離

内積を使って線分に対する3つの領域を分け,線分にもっとも近い点を計算しよう。線分をabとし,3つの領域の中の任意の座標c(またはc',もしくはc")を考える。そのために,点aを始点としたふたつのベクトルを定めて内積を求める。ひとつは線分abのベクトルPで,もうひとつは任意の点c(またはc',もしくはc")と結んだベクトルQ(またはQ',もしくはQ")図3)⁠

図3 点cが点aより外にあるかどうかはベクトルPとQの内積でわかる

図3 点cが点aより外にあるかどうかはベクトルPとQの内積でわかる

まず,点aより外にある任意の点c'は,ベクトルPとQ'の内積からすぐにわかる。ふたつのベクトルのなす角θが鈍角のとき,内積は負数になるからだ(第51回「ベクトルの内積で面の向きを調べる」ベクトルの内積から面の向きがわかる参照)⁠

ベクトルPとQの内積が正数なら,つぎにベクトルQの射影|Q|cosθを求める。前述のとおりベクトルPとQの内積は|P||Q|cosθなのだから,射影はこの内積をベクトルPの長さ|P|で割ればよい。射影|Q|cosθがベクトルPの長さ|P|よりも小さければ,点aから射影の距離の線分上の点dが点cにもっとも近い。

そして,射影|Q|cosθがベクトルPの長さ|P|よりも大きかったら,点cにもっとも近い線分上の点はbだ。下図4のベクトルQ"と点c"が,その場合を表す。

図4 射影が線分よりも長い点c"にもっとも近いのは点b

図4 射影が線分よりも長い点c

任意の1点と線分の両端の座標から線分上のもっとも近い点を返す関数の定義

計算の仕方はわかったので,スクリプトを書こう。まず,任意の座標から線分上のもっとも近い点を返す関数の定義だ。引数には,Pointオブジェクトで座標を3つ渡す。第1引数が任意の座標で,第2と第3引数は線分の両端の座標とする。関数名はxGetClosestPoint()とした。

  • xGetClosestPoint(任意の点, 線分の始点, 線分の終点)

以下のスクリプト1はフレームアクションに関数xGetClosestPoint()を定めた。計算の手順は前項に述べたとおりである。

スクリプト1 任意の1点と線分の両端の座標から線分上のもっとも近い点を返す関数

// フレームアクション
function xGetClosestPoint(myPoint:Point, begin:Point, end:Point):Point {
  var myVector3D:Vector3D = new Vector3D(myPoint.x - begin.x, myPoint.y - begin.y);
  var baseVector3D:Vector3D = new Vector3D(end.x - begin.x, end.y - begin.y);
  var nDotProduct:Number = myVector3D.dotProduct(baseVector3D);
  if (nDotProduct > 0) {
    var nBaseLength:Number = baseVector3D.length;
    var nProjection:Number = nDotProduct / nBaseLength;
    if (nProjection < nBaseLength) {
      baseVector3D.scaleBy(nProjection / nBaseLength);
      return new Point(begin.x + baseVector3D.x, begin.y + baseVector3D.y);
    } else {
      return end;
    }
  } else {
    return begin;
  }
}

まず,関数の第1引数とした任意の点と第2引数の線分の始点を結んで,Vector3Dインスタンス(myVector3D)をつくる。Vector3Dクラスのコンストラクタメソッドにz座標値を渡さなければ,デフォルト値の0が設定される。つぎに,第2および第3引数の線分の両端を結び,線分のVector3Dオブジェクト(baseVector3D)が生成される。そして,ふたつのベクトルからVector3D.dotProduct()メソッドで内積(nDotProduct)を求めた。

あとは,3つの領域に場合分けして,それぞれのもっとも近い点をPointオブジェクトで返す。if条件は,ふたつのベクトルの内積が正かどうかである。負の場合elseステートメント)は,第2引数で受取った線分の始点(begin)をそのまま返す。正の場合には,内積を線分の長さVector3D.lengthプロパティ)で割れば射影(nProjection)が得られる。

入れ子のif条件は,射影が線分の長さより小さいことを確かめる。その場合,線分のベクトルと方向が同じで射影の長さのベクトルを,Vector3D.scaleBy()メソッドで求めた。このメソッドは,参照するVector3Dオブジェクトを,引数に渡した比率が乗じられた長さに変える。

  • Vector3Dオブジェクト.scaleBy(乗数)

そのVector3Dオブジェクトのxy座標に線分の始点の座標を加えれば,戻り値のPointインスタンスがつくれる。射影が線分よりも長かったとき(入れ子のelseステートメント)は,第3引数で受取った線分の終点のPointオブジェクト(end)を返す。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入