copy()を使ったちょっぴりインタラクティブなスケッチ

Processingユーザの皆様、Processing Advent Calendar 2012 17日目を担当することとなりましたhoshi(@hoshi_sano)と申します。よろしくお願いします。

突然ですが皆さんは、Processingの中で好きなメソッドはありますか？
僕はcopy()がお気に入りのひとつです。
なので、今回はcopy()メソッドをテーマとした記事を書かせていただき、また作品を紹介させていただきます。

尚、作品はOpenProcessingにて紹介させていただきます。
OpenProcessingへの投稿にあたっては、Processing Advent Calendar 2012 の主催者のひとりである@reona396さんの3日目の記事を参考にさせていただきました。

それではまずはcopy()メソッドの概要から。
本家リファレンスでは以下のように解説されています。

copy(sx, sy, sw, sh, dx, dy, dw, dh)
copy(src, sx, sy, sw, sh, dx, dy, dw, dh)

概要(意訳)：

表示中の画像の指定した領域を、別の表示領域へコピーします。
src(元画像)を指定すると、元画像中の指定した領域を別の表示領域へコピーします。
元の領域とコピー先の領域のサイズが違う場合は、コピー先に合致するようリサイズします。

わかりやすく日本語化すると以下のような感じでしょうか。

  copy(元画像:省略可,
       元画像のX座標,   元画像のY座標,   元画像の幅,   元画像の高さ,
       コピー先のX座標, コピー先のY座標, コピー先の幅, コピー先の高さ)

リファレンスには書かれていませんが、PImageクラスのインスタンスをレシーバにすることで、コピー先をPImageのインスタンスにすることもできるみたいです。

  PImage img = new PImage(width, height);
  img.copy(src, sx, sy, sw, sh, dx, dy, dw, dh);

図示すると以下のような感じです。
f:id:hoshi_sano:20121216203959p:plain

copy()は元となる画像が必要というハードルの高さを含んでいますが、イメージの再利用が簡単に行えるというメリットがあります。

それではcopy()を使って作成したスケッチを二つ紹介させていただきます。

ドラッグした領域が鮮明になっていくスケッチです。

f:id:hoshi_sano:20121216204006p:plain

ボカシ画像はわざわざ用意せずともfilter(BLUR, param)を使えば生成できるのですが、JSモードでの動作を極力軽くするために自前で用意しました。

ゲームに使われるキャラクター用の素材は、よく以下のように１ファイル内に各状態に応じたキャラ絵が並べられている形式で用意されていますね。（「ドット絵キャラクター」などで検索するとたくさん出てきます。）

f:id:hoshi_sano:20121216204229p:plain

これをcopy()メソッドを使って、キャラクターの向きや状態に応じて適切な画像を表示します。
リンク先のスケッチにフォーカスをあてて、方向キーを押してみてください。キャラクターが移動するはずです。

f:id:hoshi_sano:20121216204336p:plain

方針としては、まず方向や状態に応じて数値を定めます。
この例では縦がキャラクターの向き(dist)、横がアニメーション用の数値(frame)になります。

f:id:hoshi_sano:20121216204342p:plain

座標(frame * キャラの横幅, dist * キャラの高さ) で、向きと時間に応じたキャラの座標が取得できるので、ここからcopy()を使って表示用の画像にキャラクターの絵をコピーします。

あとちょっとコードを書けばもうゲームが出来そうな感じがしますね！

以上です、お粗末さまでした。
今回、copy()メソッドをテーマに2つのスケッチを作成しましたが、使いたい関数やメソッドありきでどんなスケッチを作ろうかいろいろ考えるのも面白いのではないでしょうか。
是非皆さんの好きなメソッドも教えていただきたいです。

雑念日記