2007/03/23 (Fri) 球っぽい画像を描く

わざわざ公開するようなことではないかもしれませんが。

今回の『なのすこーぷ』で、球のような図形は、３Ｄではなく２Ｄのグラデーションで描いています。


サンプルを作ってみました。

ダウンロードは こちら から。ソースも含まれています。

マウスを動かしていくと、0.5秒に１つ球（のような図形）がランダムな色とランダムな大きさで描かれていきます。

2007/03/03 (Sat) 円の部分のコピー３

href="http://chihoizu.blog.shinobi.jp/hoge/EditEntry/248/" target="_blank">昨日 書いていた円の領域をコピーする方法ですが、何とか上手くいきました。 (^^)v

これでとりあえず「たまたまみずたま」に取り掛かることができそうです。
ついでにサンプル作ってみました。

きっと、「円の領域コピーするのになんでこんな七面独裁ことをするんだ...」
と思われる方も多いかと思われますが、いいじゃないですか。こんなやり方をしたって。例えそれがアクションものではオーバーヘッドがかかって使いものにならなかったとしても。

2007/02/23 (Fri) 多角形の内外判定

さて、これでパズルを作り始めれる...と思ったら、まだ問題があることに気がつきました。

空白のピースから隣のピースにマウスが移った時に、始めてその（逆の）方向にピースを動かす...といった動作をさせるためには、現在のマウスがどのピースの上に存在するかということを判定しなければなりません。

今までは、長方形や円に近似させれば良かったのですが、今回は斜め向きの台形などもあるため、もう少し真面目に内外判定をしなければユーザーの思ったとおりの動きにはならないことに気がつきました。

う～ん、これは数学に頼るしかない...。


ということで、「内外判定」「座標」あたりで検索をかけると、
「偏角の原理」というものを見つけました。

あなたがビルのてっぺんにいるとします。
４つの地点を結んでできる四角形の左回り（または右回り）の順番で
それぞれの地点を見ていく時、元の頂点に戻るまでに一周したら
あなたは４つの地点の内部にいます。
一周せずに体をねじるだけに終わったら外部にいることになります。

...なるほど、体感しました。


で、これを式に表すと

すべての辺に対し対象点との外積が全て同一符号なら内部

（Ｐ－Ａ）×（Ｂ－Ａ）
（Ｐ－Ｂ）×（Ｃ－Ｂ）
（Ｐ－Ｃ）×（Ｄ－Ｃ）
（Ｐ－Ｄ）×（Ａ－Ｄ）

となるそうです。

ちなみに外積は

Ｑ×Ｒ ＝ Ｑx × Ｒy - Ｒx × Ｑy
　　　 ＝ |Ｑ||Ｒ|ｓｉｎ（θ）

なので、２つをあわせると

（Ｐx - Ａx）×（Ｂy - Ａy）－（Ｂx - Ａx）×（Ｐy - Ａy）
（Ｐx - Ｂx）×（Ｃy - Ｂy）－（Ｃx - Ｂx）×（Ｐy - Ｂy）
（Ｐx - Ｃx）×（Ｄy - Ｃy）－（Ｄx - Ｃx）×（Ｐy - Ｃy）
（Ｐx - Ｄx）×（Ａy - Ｄy）－（Ａx - Ｄx）×（Ｐy - Ｄy）

となるのではないかと。

やっとプログラムにできるところまできましたね。

2007/02/21 (Wed) 凄いぞ！ gsquare！！

これでほとんどアニメーションの部分が完成してしまった！！

＃ いつもと逆の工程ですよ？

こちらにサンプルを用意しておきました。
sample.jpg を置き換えていただければ、どんな画像でも。

ピースの横方向と縦方向の移動が gsquare 関数のみで実現できるとは！！

大きな声では言えませんが、円ではなくって正多角形に仕様変更して良かったぁ～。

ということで、サンプルは こちら です。

2007/02/20 (Tue) ｎ角形の頂点のサンプル

昨日考えた式を元に、簡単なサンプルを作ってみました。
...良かった。間違っていなかったようですね。

ということで、サンプルは こちら から。

今回はソース（*.hsp）と *.exe と両方入れてありますのでサンプルの動作だけを見ることもできます。

今回のサンプルは、私の動作確認が目的なので動きを期待しないように。

2006/11/08 (Wed) 六角形の描き方

「六角形の描き方」というキーワードでアクセスされたアナタ。
お待たせ致しました。 m(_ _)m

こちら よりダウンロードできます。

前回に続き、回転すると「ゴミ」が残っているじゃない。どゆこと？

と思われるかもしれませんが、これはあえて残しています。手抜きではありません。

なぜ残しているかって？

2006/10/18 (Wed) 三角形の描き方その２

朝の地下鉄の中で逆三角形のサンプルができました。 :-)
こちら にソースをのっけておきます。

▽の場合、△と比較した違いは、grotate で指定する x, y 座標が三角形の高さの 1/3 上にずらさなければならないということに尽きます。

そのあたりがサンプルを動かしてみていただければわかるのでは、と思います。

ということで、今日はこのへんで。