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