ホワイトデー

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次