p5jsでPokémon GOっぽいUIを作る(2)中心に人物を立たせる

昨日はYahoo!地図の画像をp5jsに貼り付けるだけだったが、味気ないので中央に人物を立たせてみることにする。

p5jsのloadModelではOBJ形式やSTL形式のモデルを読み込むことができる。Free3Dなど無料でダウンロードできるモデルを試してみたが、iOSのSafariなどで表示できないようだ。boxは幅・奥行・高さを指定する関数で、描くたびにtranslateで位置していするのが大変だが、これで地道に書いてみる。

function draw() {
  background(0);

  rotateX(1);
  rotateZ(frameCount * 0.001);

  push();
  texture(img);
  plane(1000, 1000);
  pop();

  drawBoxman();
}

function drawBoxman(){

  fill("Yellow");

  //右足
  translate(5,0,10);
  push();
  box(10,10,20);
  pop();

  //左足
  translate(-10,0,0);
  push();
  box(10,10,20);
  pop();

  //胴体
  translate(5,0,20);
  push();
  box(20,10,20);
  pop();

  //右手
  translate(12,0,0);
  push();
  box(8,8,20);
  pop();

  //右手
  translate(-24,0,0);
  push();
  box(8,8,20);
  pop();

  //頭
  translate(12,0,20);
  push();
  box(10,10,10);
  pop();  
}

こんな感じ。想像以上に不格好だ。

See the Pen map like pokemon go 2 boxman by t.uehara (@usop4) on CodePen.

では、また次回。