p5.jsでホワイトデーアニメーションを作ろう！

アニメーションはここをクリック！

この記事では、初心者向けに p5.js を使ってホワイトデーにぴったりなアニメーションを作る方法を解説します。ハートがマシュマロに変わり、雲になって雨を降らせ、最後には地面から植物が育って❤️の実がなるプログラムを、一緒に作っていきましょう！

1. 先生と生徒の対話形式で進めるプログラミング学習

本記事では、ツンデレ口調の親切な先生（GPT先生）と、プログラムが動けばOKな生徒（あなた）のやり取りを通して、p5.jsを学んでいきます。

2. 会話形式で学ぶp5.jsアニメーションの作り方

👩‍🏫 GPT先生：「ちょっと！ いきなりp5.jsでアニメーション作れとか言うけど、あんた本当に理解してるの？ まぁ、仕方ないわね。ちゃんと教えてあげるから感謝しなさいよ！」
👦‍💻 生徒：「うん、とにかく動くやつ作りたい！ホワイトデーっぽく、ハートが湧いてマシュマロになって、それが雲になったら雨が降って、最後に植物が育って❤️の実がつく感じにして！」
👩‍🏫 GPT先生：「はぁ！？ そんな壮大な流れを作らせる気！？ ……まぁ、いいわ。順番にやるわよ！ まずはクリックでハートが湧いて、しばらくするとマシュマロになるコードを書くわよ。」

2.1. クリックでハートが湧く

まずは、クリックした場所にハートを描画する機能を作るわよ！ p5.jsでは、mousePressed() を使えばクリックイベントを簡単に処理できるの。

let objects = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(135, 206, 235);

  for (let obj of objects) {
    obj.update();
    obj.draw();
  }
}

function mousePressed() {
  objects.push(new HeartMarshmallow(mouseX, mouseY));
}

👦‍💻 生徒：「おぉ、クリックするとハートが出るようになった！でもこれ、マシュマロにならないじゃん？」
👩‍🏫 GPT先生：「もぉ～、焦らないの！ ハートが一定時間経ったらマシュマロに変わるようにするわよ。」

2.2. ハートをマシュマロに変化させる

class HeartMarshmallow {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.timer = 0;
    this.state = "heart";
  }

  update() {
    this.timer++;
    if (this.timer > 80) {
      this.state = "marshmallow";
    }
  }

  draw() {
    if (this.state === "heart") {
      fill(255, 0, 127);
      ellipse(this.x, this.y, 30, 30);
    } else {
      fill(255);
      rect(this.x - 15, this.y - 10, 30, 20, 10);
    }
  }
}

👦‍💻 生徒：「おお、ハートが時間経つとマシュマロになった！」

3. よくある質問（FAQ）

Q1. p5.jsって何？

A1. p5.jsは、JavaScriptで簡単にアニメーションやビジュアル表現が作れるライブラリよ。

Q2. このコードを実行するには？

A2. HTMLファイルとして保存し、ブラウザで開くだけで動くわ！

Q3. もっとカスタマイズできる？

A3. もちろんよ！ 背景を変えたり、雨の色を変えたり、自由にアレンジしてみてね！

まとめ

今回は、p5.jsを使ってクリックでハートを出現させ、マシュマロに変え、雲になって雨を降らせ、最後に植物が育つまでのアニメーションを作りました。初心者でも簡単に試せるので、ぜひチャレンジしてみてくださいね！

アニメーションはここをクリック！