EXAMPLE->3D and OpenGL->image->Explodeの解説

EXAMPLE->3D and OpenGL->image->Explodeの解説（アンさんのリクエストに答えて）

スクリプトで解説しなきゃならないポイントがちょっと多かったので，整理する意味でオリジナルから若干修正している

・画像はピクセルを敷きつめたモザイク
・モザイク一枚一枚には明るさ(Brightness)がある
ので、

モザイク全部をその明るさに応じて空中（Z軸方向）に浮かせてみたらどうなるだろう

の答えがこのExample

明るさから高さを計算するところがミソ

      z方向の高さ = （ピクセルの明るさ）＊（マウスのX座標／スケッチの横幅） - 100;

（マウスのX座標／スケッチの横幅）でマウスの位置に応じて浮き上がりの大きさを変化させている。

スクリプト一行ごとに【覚え書き】を付けてみたけど、分からなければ質問歓迎。

/*
  "/*"と"*/"に挟まれた部分（複数行可）には【覚え書き】を書ける。

  また、一行の中でなら、"//"以降にも【覚え書き】を書ける。
 */
 
PImage img;　　// 爆発させたい画像の保管場所をimgという名で準備する。

//setup(){～} はPlayボタンが押された直後に一回だけ呼ばれ（処理され）る
void setup()
{
  size(200, 200, P3D);　　　　　　// 200ドット×200ドットのスケッチに３Dで描くつもり
  img = loadImage("eames.jpg");　// 画像を読み込んで準備していたimgに格納しておく
}

// draw(){～} は何回も呼ばれ（処理され）る。
void draw()
{
  background(0);　　　　　　　　　// スケッチの地色を黒（0）にする。

  for ( int x = 0; x < 200 ; x++) {　　// xは横方向の位置（0から199まで）を順々に．．．

    for ( int y = 0; y < 200; y++)  {　　// yは横方向の位置（0から199まで）を順々に．．．

      int loc = x + y*width;　　　　//　画像上の位置locを計算（何番目のピクセルか？）
　　　　　　// 注）widthは常に今描いているスケッチの幅（今回は200のはず）
      color c = img.pixels[loc];　　// 計算した位置locにある画像上のピクセルの色
      int z = (int)brightness(c)*mouseX/width - 100;
　　　　　　　　　　// 3次元の残りz軸位置は、画像上のピクセルの明るさで決める

      pushMatrix();　　　　　　// とりあえず、今の原点をP5に覚えさせる。
      translate(x,y,z);　　　　　// 原点を(x,y,z)に移動する。
      fill(c);　　　　　　　　　　// 塗りの色を同じ位置にあるピクセルの色と同じにする
      noStroke();　　　　　　　// 輪郭線は描かない
      rect(0,0,1,1);　　　　　　// （今移動した）原点(0,0)から右下が(1,1)となる四角を描く
　　　　　　　　　　　　　　　// 同じ場所のピクセルと同じ色で塗り潰された輪郭線の無い四角になる
      popMatrix();　　　　　　// さっき覚えさせた原点に戻ってもらう。
　　　　　　　　　　　　　　　// （そしてP5はそれを忘れる）

    }  // yの値を増やしてもう一回

  }  // xの値を増やしてもう一回
}

---

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