AIと学ぶ！三毛猫アニメーションの作り方

はじめに

AIを使ってプログラムを作るのは楽しいけれど、コードの細かいことを理解するのは面倒…そんなあなたにぴったりの会話形式で解説する記事をお届けします！今回は、p5.js を使って「移動方向に応じて向きを変えながら歩く三毛猫」のアニメーションを作ります。

それでは、AIの先生と生徒のやりとりを見ていきましょう！

アプリはこちらをクリック

---

🎓 GPT先生と👦生徒の会話

👦「GPT先生、猫が移動方向に応じて向きを変えるアニメーションを作りたい！」

🎓「ふーん、まあいいわ。しょうがないから教えてあげる。最初に p5.js を使うから、ちゃんとCDNを読み込むのよ！」

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.2/lib/p5.min.js"></script>

👦「はいはい、で、どうするの？」

🎓「まずは、猫の基本的な位置を決めるわよ。マウスの位置に向かって移動するようにするから、現在の位置 catX, catY とターゲットの位置 targetX, targetY を用意するの。」

let catX, catY;
let targetX, targetY;
const followSpeed = 0.03;

👦「つまり、マウスを動かすと猫が追いかけてくる感じ？」

🎓「そうよ！そのために draw() の中でターゲットに向かって少しずつ位置を変える処理を入れるの。」

function draw() {
  background(253, 245, 230);

  let dx = targetX - catX;
  let dy = targetY - catY;

  catX += dx * followSpeed;
  catY += dy * followSpeed;
}

👦「おお、なんかいい感じ！でも猫が向きを変えてくれないね？」

🎓「そこがポイント！atan2(dy, dx) を使って、移動方向の角度を計算して rotate() で適用するのよ！」

let angle = atan2(dy, dx);
push();
translate(catX, catY);
rotate(angle);
drawCat();
pop();

👦「すごい！これで移動方向に応じて猫の向きが変わるんだね！」

🎓「ええ、そうよ。でもまだ動きが不自然じゃない？足をちゃんとアニメーションさせるわよ。」

👦「面倒くさそう…でも、やってみる！」

🎓「よし、いい心がけね。sin() を使って、歩行アニメーションを作るのよ！」

let time = 0;
const walkSpeed = 0.1;
const legAmplitude = 5;

time++;
let legOffFL = sin(time * walkSpeed) * legAmplitude;
let legOffFR = sin(time * walkSpeed + PI) * legAmplitude;
let legOffBL = sin(time * walkSpeed + PI/2) * legAmplitude;
let legOffBR = sin(time * walkSpeed + 3*PI/2) * legAmplitude;

👦「前脚と後脚の動きをずらして、ちゃんと歩いてるように見せるってことか！」

🎓「その通り！drawLeg(x, y, offset) で各脚を描くのよ！」

function drawLeg(x, y, offset) {
  push();
  translate(x, y + offset);
  fill(255);
  rectMode(CENTER);
  rect(0, 10, 6, 20, 3);
  pop();
}

👦「いいね！じゃあ、三毛猫の模様もつけてみよう！」

🎓「ようやくやる気になったわね。模様は fill(0) や fill(240, 164, 96) で楕円を描くだけよ！」

function drawCalicoPatches() {
  noStroke();
  fill(0);
  ellipse(0, -10, 25, 15);
  ellipse(15, 0, 15, 10);
  fill(240, 164, 96);
  ellipse(-20, 0, 20, 10);
  ellipse(0, 5, 25, 10);
}

👦「完璧だ！GPT先生、ありがとう！」

🎓「ふん、別にアンタのためじゃないわ。でも、ちゃんと動くのを確認しなさいよね！」

---

FAQ（よくある質問）

Q1. 猫の動きが遅い or 速すぎる

A. followSpeed の値を 0.01 から 0.1 の間で調整するとスムーズになります。

Q2. 猫がすぐに方向転換しない

A. atan2(dy, dx) を使って角度を計算しているので、dx や dy の変化が少ない場合、回転が目に見えづらいことがあります。followSpeed を上げると改善することがあります。

Q3. 三毛模様がうまく表示されない

A. drawCalicoPatches() を drawCat() の後に呼び出して、適切なレイヤー順で描画されているか確認してください。

Q4. 手足の動きが速すぎる

A. walkSpeed を小さくするとゆっくり歩くようになります。

---

まとめ

今回のチュートリアルでは、p5.js を使って「移動方向に応じて向きを変えながら歩く三毛猫」を作成しました。

• 移動方向の計算 (atan2(dy, dx)) を使って猫を回転
• sin() を使った手足のアニメーション
• 三毛猫の模様の描画
• クリック時の吹き出し表示

これで、あなたの作る猫もよりリアルな動きをするようになったはずです！

プログラムが動けばそれでOKなあなたも、これで「猫を自在に操るプログラマー」になれたかも？

🎓「もっと進化させたかったら、自由にカスタマイズしなさいよね！」

👦「うん！また作ってみるよ！」

アプリはこちらをクリック