ベジェ曲線とモンスター

Processingで描いた、かわいいモンスター達のサイト
企画良し、アイディア良し、プログラムサイズも小さくて勉強になる。

この中から、BenjaminさんのモンスタープログラムWorm Monstersのソースをお勉強。

ムーミンに出てきたニョロニョロみたいです。

修正したプログラムの実行結果は、ここ
ちょっと修正したニョロニョロ

以下、プログラムの解析。右目と左目を別々に描くのは冗長かな。

view plainprint?

1. Monster [] monster; //モンスター達を扱う広域変数  
2.   
3. void setup(){ //初期化  
4.   size(500, 300); //キャンパスサイズ  
5.   frameRate(25); //フレームレート設定、一秒間の描写回数、drow()の実行回数  
6.   smooth(); //描写を滑らかにする  
7.     
8.   monster = new Monster[20]; //モンスターの数を決定  
9.   int colorOfMonster = monster.length * 5;  
10.   for (int i=0; i < monster.length; i++){  
11.     monster[i]= new Monster(); //新オブジェクト  
12.     monster[i].monColor = colorOfMonster; //色プロパティを設定  
13.     colorOfMonster -=5; //次のカラーを決定、最後は０になる？  
14.   }  
15. }  
16.     
17. void draw(){  
18.   background(255); //背景色 255 = 白  
19.   fill(0); //(次の図形を）黒で埋める  
20.   rect(0, height-50, width, 50);  
21.   for(int i=0; i < monster.length; i++){  
22.     monster[i].drawMonstaer(abs(monster[i].posX - mouseX)/10, int(random(0,40)));  
23.   }  
24. }  
25.   
26. class Monster {  
27.   int posX = int(random(0, width));  
28.   int posY = height-50;  
29.   int monH = int(random(1,5));  
30.   int monW = int(random(30,50));  
31.   int deform = 30; // ゆがみ  
32.   int monColor;  
33.   
34.   void drawMonster(float vH, int closeEys){  
35.     if(vH > 4){  
36.       fill(monColor);  
37.       beginShape(); //ここから多角形、ベジェ曲線による図形を開始  
38.       vertex(posX - monW/2, posY); //基点。ベジェ曲線の最初のアンカーポイント  
39.       //ベジェ曲線を描く。コントロールポイント１，コントロールポイント２，最終アンカー  
40.       bezierVertex(posX - monW/2 + deform, posY, posX - deform, posY - (monH * vH), posX, posY - (monH * vH));  
41.       bezierVertex(posX + deform, posY - (monH * vH), posX + monW/2 - deform, posY, posX + monW/2, posY);  
42.       endShape(); //多角形 終了  
43.     }  
44.     //ある程度高いやつで、目を閉じているやつは、目を描く（まばたき）  
45.     if(vH > 11 && closeEyes > 0){  
46.       //右目  
47.       fill(255); //白  
48.       noStroke(); //アウトラインは描かない  
49.       ellipse(posX - 3, posY - (monH * vH)+10, 8, 8); //目  
50.       fill(0); //黒  
51.       pushMatrix(); //図形を配置  
52.       translate(posX - 3, posY - (monH * vH) + 10); //図形を移動  
53.       //マウスの方向？に座標を回転させる  
54.       rotate(atan2(mouseY - (posY - (monH * vH) + 10), mouseX - posX - 3));  
55.       ellipse(1, 0, 2, 2); //瞳を描き  
56.       popMatrix(); //(元座標に戻って)瞳図形を配置。  
57.       //左目  
58.       fill(255);  
59.       ellipse(posX + 3, posY - (monH * vH) + 10, 8,  8);  
60.       fill(0);  
61.       pushMatrix();  
62.       translate(posX + 3, posY - (monH * vH) + 10);  
63.       rotate(atan2(mouseY - (posY - (monH * vH) + 10), mouseX - posX + 3));  
64.       ellipse(1, 0, 2, 2);  
65.       popMatrix();  
66.     }  
67.   }  
68. }  

Monster [] monster; //モンスター達を扱う広域変数

void setup(){ //初期化
  size(500, 300); //キャンパスサイズ
  frameRate(25); //フレームレート設定、一秒間の描写回数、drow()の実行回数
  smooth(); //描写を滑らかにする
  
  monster = new Monster[20]; //モンスターの数を決定
  int colorOfMonster = monster.length * 5;
  for (int i=0; i < monster.length; i++){
    monster[i]= new Monster(); //新オブジェクト
    monster[i].monColor = colorOfMonster; //色プロパティを設定
    colorOfMonster -=5; //次のカラーを決定、最後は０になる？
  }
}
  
void draw(){
  background(255); //背景色 255 = 白
  fill(0); //(次の図形を）黒で埋める
  rect(0, height-50, width, 50);
  for(int i=0; i < monster.length; i++){
    monster[i].drawMonstaer(abs(monster[i].posX - mouseX)/10, int(random(0,40)));
  }
}

class Monster {
  int posX = int(random(0, width));
  int posY = height-50;
  int monH = int(random(1,5));
  int monW = int(random(30,50));
  int deform = 30; // ゆがみ
  int monColor;

  void drawMonster(float vH, int closeEys){
    if(vH > 4){
      fill(monColor);
      beginShape(); //ここから多角形、ベジェ曲線による図形を開始
      vertex(posX - monW/2, posY); //基点。ベジェ曲線の最初のアンカーポイント
      //ベジェ曲線を描く。コントロールポイント１，コントロールポイント２，最終アンカー
      bezierVertex(posX - monW/2 + deform, posY, posX - deform, posY - (monH * vH), posX, posY - (monH * vH));
      bezierVertex(posX + deform, posY - (monH * vH), posX + monW/2 - deform, posY, posX + monW/2, posY);
      endShape(); //多角形 終了
    }
    //ある程度高いやつで、目を閉じているやつは、目を描く（まばたき）
    if(vH > 11 && closeEyes > 0){
      //右目
      fill(255); //白
      noStroke(); //アウトラインは描かない
      ellipse(posX - 3, posY - (monH * vH)+10, 8, 8); //目
      fill(0); //黒
      pushMatrix(); //図形を配置
      translate(posX - 3, posY - (monH * vH) + 10); //図形を移動
      //マウスの方向？に座標を回転させる
      rotate(atan2(mouseY - (posY - (monH * vH) + 10), mouseX - posX - 3));
      ellipse(1, 0, 2, 2); //瞳を描き
      popMatrix(); //(元座標に戻って)瞳図形を配置。
      //左目
      fill(255);
      ellipse(posX + 3, posY - (monH * vH) + 10, 8,  8);
      fill(0);
      pushMatrix();
      translate(posX + 3, posY - (monH * vH) + 10);
      rotate(atan2(mouseY - (posY - (monH * vH) + 10), mouseX - posX + 3));
      ellipse(1, 0, 2, 2);
      popMatrix();
    }
  }
}

ベジェー曲線については、ここを参考に理解しました。
http://musashi.or.tv/fontguide_doc3.htm

PeasyCamのサンプルを試してみた

PeasyCamは、カメラワークを実現するためのライブラリのようだ。
これを導入すると、視点の移動や拡大、縮小、回転といった操作を実現できる。操作方法は

left-drag to rotate
mouse wheel, or right-drag up and down to zoom
middle-drag (cmd-left-drag on mac) to pan
double-click to reset

以前、OpenGLで回転、縮小、視点移動のプログラム課題をこなしたことがあるが、随分と面倒だったことを記憶している。

OSXのProcessing環境で、このライブラリのインストールに手間がかかった。マニュアルによれば、librariesの中にダウンロードし解凍したものをセットすれば良いと書かれていたが、うまく動作しない。「ライブラリが見つかりません」と警告がでる。
Processingのapp（OSXの場合、実はディレクトリ)を開き、その中のLibrariesディレクトリ、標準ライブラリと一緒の場所に入れた。

PeasyCamのサイトに掲載されているサンプルを動かしてみました。
PeasyCam サンプル

view plainprint?

1. import peasy.*; //ライブラリを取込  
2.   
3. PeasyCam cam;   //カメラワーク操作のためのオブジェクトを格納する変数を定義  
4.   
5. void setup() { //初期化  
6.   size(200,200,P3D); // スクリーンのサイズ x, y とP3D(高速3次元描画ライブラリ)を指定  
7.   cam = new PeasyCam(this, 100); // カメラワーク操作オブジェクト。親オブジェクトと距離?を指定  
8.   cam.setMinimumDistance(50); // カメラの最小距離定義  
9.   cam.setMaximumDistance(500); // カメラの最大距離定義  
10. }  
11. void draw() { // loopするメソッド  
12.   rotateX(-.5); // X軸 回転する  
13.   rotateY(-.5); // Y軸 回転する  
14.   background(0); // 背景色 0は?  
15.   fill(255,0,0); // (背景を)塗りつぶす  
16.   box(30); // キューブを用意  
17.   pushMatrix(); // キューブ配置(Push)  
18.   translate(0,0,20); // 座標を移動  
19.   fill(0,0,255); // (キューブを)塗りつぶす  
20.   box(5); // 小さなキューブを用意  
21.   popMatrix(); // 小さなキューブを配置  
22. }  

import peasy.*; //ライブラリを取込

PeasyCam cam;   //カメラワーク操作のためのオブジェクトを格納する変数を定義

void setup() { //初期化
  size(200,200,P3D); // スクリーンのサイズ x, y とP3D(高速3次元描画ライブラリ)を指定
  cam = new PeasyCam(this, 100); // カメラワーク操作オブジェクト。親オブジェクトと距離?を指定
  cam.setMinimumDistance(50); // カメラの最小距離定義
  cam.setMaximumDistance(500); // カメラの最大距離定義
}
void draw() { // loopするメソッド
  rotateX(-.5); // X軸 回転する
  rotateY(-.5); // Y軸 回転する
  background(0); // 背景色 0は?
  fill(255,0,0); // (背景を)塗りつぶす
  box(30); // キューブを用意
  pushMatrix(); // キューブ配置(Push)
  translate(0,0,20); // 座標を移動
  fill(0,0,255); // (キューブを)塗りつぶす
  box(5); // 小さなキューブを用意
  popMatrix(); // 小さなキューブを配置
}

絶対座標、相対座標 あるいは現在座標

popMatrix(), pushMatrix()が使われているが、その使い方についてのメモ。Push()とPop()

現在の変換マトリクスをマトリックススタックへポップする。push()とpop()を理解するには、まずマトリックススタック理論を理解しなければいけない。push() 機能は、今の座標をスタックに保存して、pop()は前の座標を復元する。 push() とpop()は、その他の移動メソッドとの組み合わせにおいて使われる。また、移動する領域をコントロールするのに組み込まれる。

Processing 再始動

(2011.5.11 更新)
iframeでjava appletを表示させていたが、重いのでスクリーンショットに変更。動くやつはリンクをたどってください）

Thomas Diewald さんの3D gravity gridは惑星軌道シミュレーションかな。太陽みたいな重力場が複数あり、その周りを惑星が回る。重力の大きさは格子の落ち込みで表現される。
シミュレーションとして合っているかは兎も角、恰好良い。

開発言語はProcessing。ビジュアルな表現に優れたjava系の言語だ。最近はネットワーク機能や外部組み込み機器の操作機能も注目され、gainerとかハードウエア制御環境にも利用されている。

昔、コピーしたProcessingサンプルプログラムを公開しているのでProcessingの雰囲気をつかんでみてください。
Processing:sample:blocks

早速、実行してみることにした。Processingは、過去にversion1.1をインストールしていたので、ソースをダウンロードしてきて、メインコードらしい "gravity_grid_v1.pde"をダブルクリックしてみた。なんか、「フォルダをつくるけど良いか」とか尋ねるので、良いと応える。なんかProcessingのIDEも立ち上がって、ソースを読み込んだようなので、早速 runしてみたが失敗。

結局、以下の調整などを行い、無事 runできました。

• IDEを起動させて、全ソースの入ったフォルダをsketchbookフォルダとして指定
• カメラワークを実現するPeasyComライブラリを追加する
• フォントデータを作成する IDEのメニューから作成

Processingでは、プログラム一式をsketchbookと呼びます。projectに対応する言葉かな。
PeasyComライブラリの導入はちょっと大変だったので、次回の記事で :-p

新しいブログを始める

プログラムの勉強の記録を残しておきたく、ブログを始めることにした。日常のことは別のブログがあるので、ここは技術オンリの予定。

bloggerの用意したテンプレートには良いものが無かったので、bTempleteからシンプルでコードを書いたときに見栄えがしそうなものを選んで、テンプレートファイルをアップした。
調整したことは次の点。

• id=topbanner のタグ内のimgタグを削除。
• Google adsenseなどの不要なガジェットを削除。
• ソースコードをハイライト表示してくれるwidgitの導入。
• bloggerの共有ボタンが見えない点を修正。テンプレートをいじりまくった後、ここを参照して修正
  
• (2011/5/8) IEやFirefoxでは画像が潰れることが判明。理由がわからないので標準のテンプレートに変更


• (2011/5/8) preタグのborderやpaddingがIEやFirefoxでは上手く行かない。試行錯誤で修正

まだ、いろいろと調整しなければいけないし、リンク切れもあるが、徐々に修正していくことにする。まずは Let's show time !