レッスン4: インタラクション

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

🖱️ マウスインタラクション

マウス位置の取得

変数 説明
mouseX マウスの現在のX座標
mouseY マウスの現在のY座標
pmouseX 1フレーム前のマウスX座標
pmouseY 1フレーム前のマウスY座標
mouseIsPressed マウスボタンが押されているか（true/false）

1. マウス追従

2. お絵描きアプリ

マウスをドラッグして絵を描いてください

マウスイベント関数

function mousePressed() {
    // マウスボタンが押された時に実行
}

function mouseReleased() {
    // マウスボタンが離された時に実行
}

function mouseClicked() {
    // クリックされた時に実行
}

function mouseMoved() {
    // マウスが動いた時に実行（ボタン押していない）
}

function mouseDragged() {
    // ドラッグ時に実行（ボタン押しながら移動）
}

function mouseWheel(event) {
    // マウスホイールが回転した時に実行
    // event.delta で回転量を取得
}

3. クリックでオブジェクト生成

キャンバスをクリックすると花火が打ち上がります

⌨️ キーボードインタラクション

キーボード関連の変数と関数

変数/関数 説明
key 最後に押されたキーの文字
keyCode 特殊キーのコード（矢印キーなど）
keyIsPressed 何かキーが押されているか
keyPressed() キーが押された時に実行される関数
keyReleased() キーが離された時に実行される関数

4. キーボードで操作するゲーム

矢印キーで青い四角を操作、赤い円を集めよう！

💡 特殊キーのコード：
  • UP_ARROW: 上矢印
  • DOWN_ARROW: 下矢印
  • LEFT_ARROW: 左矢印
  • RIGHT_ARROW: 右矢印
  • ENTER: Enterキー
  • ESCAPE: ESCキー
  • SHIFT: Shiftキー
  • CONTROL: Ctrlキー

📱 タッチインタラクション

// タッチイベント（スマートフォン対応）
function touchStarted() {
    // タッチ開始時
    // mouseX, mouseYが使える
    return false;  // デフォルトの動作を防ぐ
}

function touchMoved() {
    // タッチしながら移動
    return false;
}

function touchEnded() {
    // タッチ終了時
    return false;
}

// マルチタッチ対応
touches[]  // 全てのタッチポイントの配列
// touches[0].x, touches[0].y で座標取得

🎮 インタラクティブな作品例

5. ペイントツール

数字キー1-4で色変更、Cでクリア、+/-でサイズ変更

🚀 練習問題

課題1: ピアノアプリ

キーボードのA〜Kキーを押すと音（視覚的に表現）が出るピアノを作ってみましょう：

let keys = [];

function setup() {
    createCanvas(400, 300);
    // 鍵盤の初期化
    for (let i = 0; i < 8; i++) {
        keys.push({
            x: 50 * i + 25,
            y: 150,
            pressed: false,
            key: 'ASDFGHJK'[i]
        });
    }
}

function draw() {
    background(220);

    for (let k of keys) {
        if (k.pressed) {
            fill(255, 100, 100);
            // 音の波紋を表現
            circle(k.x, k.y - 50, 40);
            k.pressed = false;
        } else {
            fill(255);
        }
        rect(k.x - 20, k.y - 40, 40, 100);

        fill(0);
        text(k.key, k.x - 5, k.y + 50);
    }
}

function keyPressed() {
    // キーに応じて鍵盤を押す処理を追加
}

課題2: もぐらたたきゲーム

ランダムに現れるもぐらをクリックするゲームを作ってみましょう

課題3: ドラッグ＆ドロップ

画面上の図形をマウスでドラッグして移動できるようにしてみましょう

チャレンジ課題

  1. 2人対戦ゲーム（キーボードで操作）
  2. リズムゲーム（タイミングよくキーを押す）
  3. パズルゲーム（図形を組み合わせる）
  4. シューティングゲーム（マウスで狙って撃つ）
← 前のレッスン 最終プロジェクト →