TextureMapping - Proce55ingのおさらい

TextureMapping - 新作に取りかかる前にちょっとおさらい。 with Proce55ing (Processing)

承前　窓

窓(Windows)って、外界の景色を切り取って室内の目に届けてくれるオブジェクト。
MacやWindowsの窓は、コンピュータ内部情報の一部を切り取って、外（内）にいる我々に見せてくれる。
Proce55ingでこしらえられる窓は、単に切り取るだけじゃあない。
木偶の小道具に仕立て上げてバンプマッピングと組み合わせると面白いかも。

テクスチャマッピング

窓の原型のイメージを膨らませるために、おさらいの意味をこめて例題を作ってみた。このアプレットはがらくた置き場ではなく例題集のほうに置いた。
ソースはアプレットページから参照できるけど、解説の手間を省くためにここにも掲載。

【操作方法】
　クリックすると４つのシーンが進む。(タイミング悪いと第二シーンから始まるかも）
　・第一シーンは「窓枠だけを動かす」イメージ。
　・第二シーンは「鏡に映しながら窓枠だけを動かす」イメージ。
　・第三シーンは「窓枠にあわせて風景も動く」イメージ
　・第四シーンは第三シーンの鏡像版（あんまり違いがわからないかも）

【一般的解説】
beginShape()からendShape()までのあいだに挟まれたvertex()は一つの（平面的な閉じられた）図形を描く。
vertex()のパラメータは描画すべき「スクリーン上の座標」とともに、元絵から切り取る「元絵座標」もあわせて指定できる。
＊大きさは一致してなくても良い。P5が適当にあわせてくれる。（これはこれで面白い効果が得られる）

【ソース（と解説）】

int clck=0;
PImage img,bk;

void setup() {
  size(307,292,P3D);//テクスチャマッピングをするときは、P3Dモードで
  img = loadImage("tp1.jpg");//切り取り元画像（カラー）
  bk = loadImage("tp2.jpg");//背景用画像（モノクロ）
}

void draw() {
  background(bk);stroke(255);//
  beginShape(TRIANGLES);//三つのvertexで三角形を形成
  texture(img);//マップしたい画像
  textureMode(IMAGE);//元絵の座標はピクセル単位
  if (clck%4==0) {      //シーン１：窓だけ動かす
    vertex(mouseX,mouseY,    //最初の座標ペアはスクリーンの点の位置
           mouseX,mouseY);   //最後の座標ペアは元画像のピクセルの位置（以下同様）
    vertex(mouseX-100,mouseY-30,mouseX-100,mouseY-30);
    vertex(mouseX-30,mouseY-100,mouseX-30,mouseY-100);
  } else if (clck%4==1) {//シーン２：鏡に映しながら窓だけ動かす
    vertex(mouseX,mouseY,mouseX,mouseY);
    vertex(mouseX-100,mouseY-30,mouseX-30,mouseY-100);
    vertex(mouseX-30,mouseY-100,mouseX-100,mouseY-30);
  } else if (clck%4==2) {//シーン３：風景も窓と一緒に動く
    vertex(mouseX,mouseY,200,200);
    vertex(mouseX-100,mouseY-30,200-100,200-30);
    vertex(mouseX-30,mouseY-100,200-30,200-100);
  } else {              //シーン４：風景の鏡像も窓と一緒に動く
    vertex(mouseX,mouseY,200,200);
    vertex(mouseX-100,mouseY-30,200-30,200-100);
    vertex(mouseX-30,mouseY-100,200-100,200-30);
  }
  endShape();
}

void mouseClicked() {clck++;}//シーンを進める

例題はP５を使って各自で

---

Processing については、
・日本語サポートサイトからたどれるP5インフォメーション→言語が参考になる。
（解説してあるのは一昔前の版だから注意が必要だけど、loop()→draw()の読み替えだけで大抵OK）
・山本徹(thoru)さんがFunProce55ingで解説してくれている。（【簡潔】で【わかり易く】、【楽しい】解説）
例題集は習作集と区別するためにこちらに置いている。
・P5のスケッチからアプレットを作り【ジオシティーズ】にアップする手順をまとめたので、参考に。