【p5.js】3D力士を作ってみました。

初めての方は初めまして！相撲大好き底辺ブロガーの芋の里と申します。

子供の頃から大相撲が大好きで、相撲をネタにした記事を数か月に1度くらい書いてます。

レベルは低いですが時々p5.jsを使用していますので、記事を投稿します。

p5.jsは3Dが簡単に作れるので、こちらを使って力士を作ってみました。

3D力士

さっそく出来上がりをご覧ください。

コード

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100);
  angleMode(DEGREES);
}

function draw() {
  background(100);
  orbitControl();
  scale(1.5); // ズーム倍率を1.5倍に設定
  rotateY(frameCount); // 自動回転
  lights(); // ライトを作って影を表示
  
  push();//力の文字
  translate(-180, -50, 0);
  fill(350, 80, 70);
  box(100, 30, 30);
  translate(-20, 10, 0);
  box(30, 120, 30);
  translate(60, 15, 0);
  box(30, 80, 30);
  translate(-5, 30, 0);
  box(40, 30, 30);
  pop();
  
  
  push();//士の文字
  translate(180, -50, 0);
  fill(220, 80, 80);
  box(100, 30, 30);
  translate(0, 10, 0);
  box(30, 120, 30);
  translate(0, 50, 0);
  box(80, 30, 30);
  pop();
  
  push();// 胴体
  fill(25, 40, 100);
  translate(0, -20, 0);
  box(100, 75, 60);
  
  fill(160, 100, 90);  // まわし (青緑)
  translate(0, 30, 0);
  box(20, 30, 50);
  box(110, 20, 80);
  
  fill(25, 40, 100);// 左足
  push();
  translate(-25, 30, 0);
  box(30, 40, 30);
  pop();
  
  push();// 右足
  translate(25, 30, 0);
  box(30, 40, 30);
  pop();
  
  push();// 左手
  translate(-60, -30, 0);
  rotateZ(30);
  box(30, 80, 30);
  pop();
  
  
  push();// 右手
  translate(60, -30, 0);
  rotateZ(-30);
  box(30, 80, 30);
  pop();
  
  // 頭から上の部分をグループ化してうなづき動作を追加
  push();
  translate(0, -110, 0);
  // sin関数で揺れる）
  rotateX(sin(frameCount * 4) * 20);
  
  // 頭
  box(150, 100, 100);
  
  // 髪
  fill(0, 0, 30);
  translate(0, -60, 0);
  box(160, 30, 110);
  
  // まげ
  translate(0, -20, 0);
  box(20, 15, 120);
  
  // 鼻
  fill(25, 40, 100);
  translate(0, 90, 50);
  box(30, 30, 30);
  
  // 左目
  fill(0, 0, 30);
  translate(35, 0, 0);
  box(15, 20, 10);
  
  // 右目
  translate(-70, 0, 0);
  box(15, 20, 10);
  
  // 右眉  
  push();
  translate(0, -30, 0);
  if (Math.floor(frameCount/120) % 2 === 1) { // 120フレームごとに切り替え
    rotateZ(50);
  }
  box(50, 20, 10);
  pop();

  // 左眉
  push();
  translate(70, -30, 0);
  if (Math.floor(frameCount/120) % 2 === 1) {
    rotateZ(-50);
  }
  box(50, 20, 10);
  pop();
  
  
  pop();
  
  pop();
}

コード説明

基本的には下記の6つのコードで描いています。

座標を指定してひたすら直方体を作っています。

作るまで

最初は回しているだけだったのですが、少し寂しく見えたので頭を上下に振るようにしました。

そうすると頭を振るだけでなく表情を変えてみたいと思いました。

さすがにここまで表現はできないので、廻しの色を琴櫻に寄せて、一回転したら両眉の角度を変更するようにしました。

他の方のアドベントカレンダーもゆっくり見させていただき勉強します！