ベジェ曲線とモンスター

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