デジタル・デザイン・ラボラトリーな日々

アラフィフプログラマーが数学と物理を基礎からやり直す。https://qiita.com/yaju

2D

射影変換(ホモグラフィ)について理解してみる 射影変換式について

昔、定期的に購読していた「C MAGAZINE」の大半は処分したんですが、処分する際に数冊程は内容を見て残しておいたのです。 C MAGAZINE 2005年1月号は、特集2が「物理運動をシュミレーションしよう」ってことでたぶん残したんですが、この本を何気に見ていた…

静岡Developers勉強会の「コンピュータビジョン 3章 画像間の写像」の資料公開

静岡Developers勉強会では、オライリーの「実践コンピュータビジョン」の本を読書会形式で勉強会をしています。2014/04/12(土)に担当した「実践コンピュータビジョン 3章 画像間の写像」の資料を公開します。内容としては、アフィン変換、射影変換、平均顔、…

【コンピュータビジョン】3章「画像間の写像」 ホモグラフィ(点の調整)

前記事で、「homography.pyでは、更に点群を平均値が0、標準偏差が1になるように正規化していますが、今回はそこまで説明はしません。」と逃げたのだが、アフィン変換でも同様のことをしていたので、頑張って調べてみます。参考:標準化した値は、平均値がゼ…

【コンピュータビジョン】3章「画像間の写像」 ホモグラフィ(特異値分解)

DLTアルゴリズムでは、点数の2倍の行を持つ下記の行列式に展開します。 これを特異値分解(Singular Value Decomposition:SVD)を用いて最小二乗法によりを求めます。下記ソースリストは、コンピュータビジョンの本に記載されているhomography.pyの一部です…

【コンピュータビジョン】3章「画像間の写像」 ホモグラフィ

今年の静岡Developes勉強会は「O'Reilly Japan - 実践 コンピュータビジョン」を課題図書として学んでいる。4/12に行われる「静岡Developers勉強会 コンピュータビジョン vol.3」では3章「画像間の写像」について勉強する。 3章ではホモグラフィーやアフィン…

射影変換(ホモグラフィ)について理解してみる その13

前回、猫画像1枚を3D回転させてみたが、CSSの3D回転ジェネレータの「3D CSS Tester(github)」を見つけたので、これをCSSでなく敢えてCanvasで動きを真似てみます。3D回転する際には、一般的には三角形に分割して表現します。 参照:テクスチャマッピングを理…

射影変換(ホモグラフィ)について理解してみる その12

パネルを3D回転させるようなことをやってみたいなと思っていたので作成してみました。 jsdo.itで見かけるものはパネルを三角形で分割して処理しているので、これを三角形で分割しないで射影変換で処理して表示してみます。 Image 3D rotation - jsdo.it Imag…

射影変換(ホモグラフィ)について理解してみる その11

射影変換についてツールも作成して、まーそれなりに理解は出来てきたわけですが、初回の記事で取り上げたHomography HIDIHO!サイトの射影変換の下記ソースリスト(actionscript)の疑問が残っていたわけです。(cv.jsのgetPerspectiveTransformも同様) static p…

射影変換(ホモグラフィ)について理解してみる その10

今回は、透明画像の対応について説明します。今回、使用する透明画像はこのボール(png形式)になります。 背景画像には、このかわいい猫ちゃんを使います。 前回のプログラムのままでは透明画像に対応していないため、ボールの周りが黒色になってしまいます。…

射影変換(ホモグラフィ)について理解してみる その9

射影変換(ホモグラフィ)について理解してみる その8

今まで射影変換するにしても、入力画像より小さくする方向しかパラメータを変更してませんでしたが、いざ、大きくしようとすると画像の位置が取れないために例外エラーになってしまいましたので、これを修正していきます。 また、入力画像の表示位置を原点(0…

射影変換(ホモグラフィ)について理解してみる その7

画像補完の予定でしたが、その前段階でおかしな現象を見つけてしまいました。 「射影変換(ホモグラフィ)について理解してみる その4」から射影変換のパラメータを逆行列変換して描画処理に渡していました。ところが今頃気が付いたのですが、その方法では実…

射影変換(ホモグラフィ)について理解してみる その6

前回は、自前の行列クラスを使用して射影変換を行いましたが、Javascriptの行列演算用のライブラリが有志によって公開されています。 glMatrix.js mjs.js minMatrix.js tmlib.js Sylvester.js closure TDL J3DIMath.js(以前はCanvasMatrix.jsという名前だっ…

射影変換(ホモグラフィ)について理解してみる その5

前回までは、代数ライブラリsylvesterを使用して行列計算を求めてきましたが、今回は代数ライブラリを使わずに8次元連立方程式を4x4行列で求める方法を説明します。ARToolKitを参考に様々な言語に実装し直したARToolKit互換のクラスライブラリNyARToolKitの…

射影変換(ホモグラフィ)について理解してみる その4

前回は、転送元座標と転送先座標を内部的に入れ替えて射影変換パラメータを求めて画像に穴が空かないように表示していました。 しかし、下記サイトのCSSのtransformで渡している8個のパラメータを求める際には、特に転送元座標と転送先座標を入れ替えたりし…

射影変換(ホモグラフィ)について理解してみる その3

前回は、代数ライブラリを使って8個のパラメータを取得しました。今回は、8個のパラメータを使って画像を変形して表示させます。 CSSでは、matrix3dに3x3の正方行列として9(8+1)個のパラメータをセットして画像を変形して表示していましたが、これをmatrix3d…

射影変換(ホモグラフィ)について理解してみる その2

前回の続きです。 ただ、私としては台形に変形させたいので、8次元連立一次方程式を解いた方式をさらに模索していた中で、下記サイトを見つけました。 ホモグラフィ- Shogo Computing Laboratory 内容的には私が目指していたものですが、残念なのは中身はCSS…

射影変換(ホモグラフィ)について理解してみる

「3Dを基礎から勉強する フラットシェーディング」の記事を書いて、次は立方体のテクスチャマッピングに取り掛かろうと思ったんですが、ふとアフィン変換で台形は出来ないってことを書いたことを思い出したんです。テクスチャマッピングについては、「テクス…

2元連立1次方程式の解法

文字係数を使った2元連立1次方程式の解き方の理解が乏しかったので、解法を学んでいく。 2元連立1次方程式なので、未知数が2つある連立1次方程式です。連立方程式 このように未知数以外に文字係数となっている場合にどのように求めるのか?連立方程式の…

逆行列を理解してみる

画像の変形処理を行う上で逆行列を行う処理があり、理解がとぼしいためか頭が混乱してきます。 以前、テクスチャの仕組みを理解しようとした際にも、逆行列が出てきました。あらためて、逆行列とはなんなのかをイチから理解していこうと思います。 行列には…

画像の回転処理 穴が空かない方法

今回は、画像をCanvasのRotateメソッドを使用しないで自前で回転させてみます。 使用する画像は、いつもの猫画像です。 画像の回転は、画像を構成する全ピクセルの回転後の座標を計算して点を打つだけです。回転をする場合の入力点(x1,y1)を、画像の中心(cx,…

テクスチャマッピングを理解してみる その4

前回は25にメッシュ分割して表示することが出来た。 今回は各メッシュの部分をマウスで動かせるようにツールを作成してみる。前回の猫画像では小さ目なので、ネットで猫のイメージ検索してみました。 今回テクスチャで使用するのは、このかわいい猫ちゃんで…

テクスチャマッピングを理解してみる その3

前回は2枚の三角形を使用して画像を表示したのですが、画面を波のように揺らすといった複雑な表現をしたい場合、1枚の画像を細かく分割する必要があります。 多数の正方形などに分割したものをメッシュといいます。今回は、5分割の計25枚に分割してみます。 …

テクスチャマッピングを理解してみる その2

前回のテクスチャマッピングを理解を深めるために簡単なツールを作成してみたい。テクスチャで使用するのは、この猫画像 その前に、drawTriangle()の引数の中身を理解する必要がある。 function drawTriangle(g, img, vertex_list, uv_list) vertex_listは、…

テクスチャマッピングを理解してみる

ひさしぶりの投稿である。 1年前にやり始めたのにいつのまには遠のいてしまっていたが、ふとテクスチャマッピングってどういう仕組みなのか知りたくなったので再開する。どんな単純な多角形も三角形に分割できるので、三角形が描ければテクスチャマッピング…

座標の回転式における私の勘違い

座標を回転した位置を求める関数として以下を使用していた。 function rotate2d(x, y, rad) { var p = new Point; p.x = Math.cos(rad) * x - Math.sin(rad) * y; p.y = Math.sin(rad) * x + Math.cos(rad) * y; return p; } ある座標位置を30度回転した座標…

スプライン曲線

3次ベジェ曲線を使用して曲線にキャラクターを移動させた時、表示範囲の右側きりきりで半回転させようとして3次ベジェ曲線の制御点を右側最大値に設定しても曲線はそれより前に曲線が描かれてしまい、自分が想っている位置よりも間が空いてしまうわけです…

2次・3次ベジェ曲線

とある観賞用のプログラムを作成しているのですが、キャラクターの向きを反転させる必要がありまして、単純に向きを180度変更するなら簡単なんですが、車と同様に動いているものは急には向きを変更できないわけで、円弧を描いて反転させたいわけです。そ…

ハート型に広がる花火

これはバレンタインデーに向けて作成しました。 以前から花火を作ってみたいと思っていたんですが、どうせならとバレンタインデーも近かったため、花火が昇ったらハート型に広がるようにと作成しました。 実際作ってみると自分が思い描いていたようにはなら…

行列による2Dアフィン変換を理解してみる

前回、回転と拡大縮小と平行移動を3×3行列に合わせた式が以下になります。 回転行列 拡大縮小行列 平行移動行列 | cos -sin 0 | | sx 0 0 | | 1 0 t.x | | sin cos 0 | | 0 sy 0 | | 0 1 t.y | | 0 0 1 | | 0 0 1 | | 0 0 1 |そもそも、何故行列にしたのか?…