レッスン3: アニメーション

🎯 このレッスンで学ぶこと

🔄 アニメーションの基本原理

p5.jsのアニメーションは、draw()関数が繰り返し実行されることで実現します。

デフォルトでは1秒間に60回（60FPS）実行されます。

変数を使って位置を変える

let x = 0;  // 変数を宣言（setup()の外側で）

function setup() {
    createCanvas(400, 300);
}

function draw() {
    background(220);

    circle(x, 150, 50);  // x座標に変数を使う
    x = x + 1;  // xを1ずつ増やす（右に移動）
}

⚡ 基本的な動き

1. 横に動く円

2. 跳ねるボール

💡 条件分岐（if文）の使い方： 
if (条件) {
    // 条件が真の時に実行される
}
  • x > 100: xが100より大きい
  • x < 50: xが50より小さい
  • x === 100: xが100と等しい
  • ||: または（OR）
  • &&: かつ（AND）

🌊 滑らかな動き（三角関数）

sin関数を使った波の動き

🎨 色の変化アニメーション

💡 HSBカラーモード：
  • H (Hue): 色相（0-360度）赤→オレンジ→黄→緑→青→紫→赤
  • S (Saturation): 彩度（0-100）鮮やかさ
  • B (Brightness): 明度（0-100）明るさ

🌟 複雑なアニメーション

⚙️ アニメーション制御

// フレームレートの設定（デフォルトは60）
frameRate(30);  // 1秒間に30フレーム

// 現在のフレーム数を取得
let currentFrame = frameCount;

// アニメーションを停止
noLoop();

// アニメーションを再開
loop();

// 時間ベースのアニメーション
let time = millis();  // プログラム開始からのミリ秒
⚠️ パフォーマンスの注意点：
  • draw()内で重い処理は避ける
  • 必要ない時はbackground()を毎フレーム呼ばない
  • 大量のオブジェクトを扱う時は配列を活用

🚀 練習問題

課題1: 太陽系シミュレーション

中心の太陽の周りを回る惑星を作ってみましょう：

let angle = 0;

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(0);

    // 太陽
    fill(255, 200, 0);
    circle(200, 200, 60);

    // 地球の軌道計算
    let earthX = 200 + cos(angle) * 100;
    let earthY = 200 + sin(angle) * 100;

    // 地球を描く
    fill(100, 150, 255);
    circle(earthX, earthY, 30);

    angle += 0.02;

    // チャレンジ: 月を追加してみよう！
    // let moonX = earthX + cos(angle * 3) * 30;
    // let moonY = earthY + sin(angle * 3) * 30;
}

課題2: 花火アニメーション

クリックした位置から広がる花火を作ってみましょう

課題3: 時計を作ろう

現在時刻を表示するアナログ時計を作ってみましょう

チャレンジ課題

  1. 重力を考慮した落下アニメーション
  2. マウスを追いかける複数のオブジェクト
  3. パーティクルシステム（雨、雪、星など）
  4. ゲームの基本動作（キャラクターの移動など）
← 前のレッスン 次のレッスン →