ベジェ曲線とモンスター

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

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

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

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

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

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