メインページに戻る

このページのゴール

「p5.js の描画と入力の基礎を理解し、自分のPCで即編集→即実行できる環境を整えること」

今日のねらい

  • p5.jsの基本を理解する
    • setup() / draw() の役割、座標系（左上が原点）、図形・テキスト・色の使い方
    • 入力（mouseX/Y, keyIsDown）で振る舞いを変える
    • デバッグ（Console／ブレークポイント／console.log）の基本

環境

ブラウザはChormeかEdgeの利用を推奨します。

0. なぜ p5.js を扱うか

p5.jsとは、ウェブ上でグラフィック表現やインタラクティブなアート制作を可能にする、オープンソースのJavaScriptライブラリです。Javaベースのビジュアルプログラミング言語「Processing」の概念をJavaScriptに移植したもので、シンプルな構文でアニメーション、図形、音、テキストなど多様なクリエイティブ表現を容易に実現できます。初心者でも環境構築なしにp5.js Web Editorで気軽に始められ、クリエイティブコーディング入門に最適なツールです。

本講義で p5.js に進む背景は、これまでに M5StickC Plus2 の単体実装により、実世界でとりあえず動かすための基礎（フィジカルコンピューティングの基礎）を固めたからです。
#1 では、画面表示・ボタン・LED・ブザー・マイクといった入出力をまとめて体験し、ケース一体のモジュールで素早く試作できる利点を掴みました。
#2 では、GPIO（NeoPixel）と IMU を組み合わせ、センサ値から演出を設計する過程と、delay によるブロッキング／millis によるノンブロッキングという時間制御の考え方を学びました。

ここからの次の一手として、端末単体から PC とつないだ双方向 へと広げていきます。
PC 側に重めの可視化やログ記録、UI のプロトタイピング、ネットワーク連携、複数デバイスの統合などを担わせれば、さらに実装できる幅が広がります。
M5StickC Plus2 が現実世界の入り口（センシング／アクチュエーションなど）を担当し、PC が処理・可視化・配信を担当するような役割分担は、様々な場面で活用できる可能性を秘めていると思います。

その媒介として今回は p5.js を選んだ理由ですが、
第一に Processing ライク な構造（setup / draw、座標系、色・図形）で、Arduino IDE（文化情報工学基礎演習など）で触れた知識を転用できます。
第二に ブラウザだけで動く ので、ほとんどのPC で導入が容易で、成果物は GitHub Pages などで簡単に配布・共有できます。
第三に Web Sockets などを使えば M5StickC Plus2 と双方向通信 ができ、専用アプリやドライバに依存せず、授業後との環境差を最小化できます。

加えて、p5.js は HCI（ヒューマン・コンピュータインタラクション） の視点 にも相性が良い道具です。
キャンバス上で UI とフィードバックを素早く試作でき、ユーザの操作に対する応答を即座に確かめられます。
M5 からのデータは JSON で受け取り、PC 側で加工・保存（CSV/NDJSON など）すれば、そのまま分析や可視化、展示用アプリケーションに繋げられます。ハードとソフト、データと体験を往復するプロトタイピングの循環が作れる点が、本授業の狙いと一致しているかと思います。

そこで本日は p5.js の基礎（描画・入力・デバッグ・環境構築）から学んでいきましょう。

1. 開発環境の構築（VSCode + Live Server）

構築までのざっくりとした流れ

  1. VSCode を入れる（＝プログラミング用のノート）
  2. Live Server を入れる（＝ノートの内容をブラウザに即表示するアプリ）
  3. p5-day1 フォルダを作る（＝作業の箱）
  4. index.html と sketch.js を置く（＝メインの部品）
  5. Live Server で開いて確認（＝動くかどうか試す）

1.1 VSCode を入れる

Visual Studio Code（VS Code）は、Microsoft社が開発・提供する、高機能で軽量なソースコードエディタです。Windows、macOS、Linuxといった主要なオペレーティングシステムに対応しており、JavaScript、Python、Java、C++など多数のプログラミング言語で利用できることから、世界中の開発者に広く支持されている標準的な開発ツールです。

  1. ブラウザで Visual Studio Code にアクセス。
  2. 自分のOS（Windows / Mac）にあわせてダウンロード。
  3. ダウンロードしたファイルを開いてインストール。
    • Macの場合はzip解凍後にアプリケーションフォルダに移動。
  4. 起動して以下のような画面が出ればOKです。

1.2 フォルダを作る

  1. デスクトップなど好きな場所に p5-day1 という名前のフォルダを作成してください。
  2. VSCode で File > Open Folder… を選び、そのフォルダを開く。もしくは左側にる「フォルダを開く」を選択。
    → 画面左に「EXPLORER/エクスプローラー」が出て、空の状態で表示されればOK。

1.3 ファイルを作る

  1. 左上の「新しいファイル」アイコンを押す。もしくは中央にある「新しいファイル…」から作成。
    • 名前は index.html
    • もうひとつ sketch.js も作る。

（注意！）Windows だと「index.html.txt」になりやすいです。必ず拡張子が .html / .js になっているか確認してください。

1.4 index.html に貼る

index.html を開いて、以下を コピペ してください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>p5.js Day1</title>
    <!-- p5.js 本体（CDNから読み込み） -->
    <script src="https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js"></script>
  </head>
  <body>
    <main></main>
    <!-- 自分のスケッチを最後に読み込む -->
    <script src="sketch.js"></script>
  </body>
</html>

1.5 sketch.js に貼る

sketch.js を開いて、以下を コピペ。

function setup() {
  createCanvas(400, 400); // 400x400 のキャンバス
  textSize(18);           // 文字サイズ
}

function draw() {
  background(220);        // グレー背景
  circle(200, 200, 80);   // 真ん中に丸
  text('Hello, p5!', 10, 24); // 左上に文字
}

1.6 Live Server を入れる

VSCodeの「Live Server」は、ローカル環境でHTMLファイルをリアルタイムにプレビューするための拡張機能です。簡単に言うと、あなたのコンピュータ内でローカルウェブサーバーを立ち上げ、ウェブページをブラウザで表示できるようにします。

  1. VSCode 左のサイドバーの 四角アイコン（Extensions） をクリック。
  2. 検索ボックスに Live Server と入力。
  3. 出てきた「Live Server（Ritwick Dey）」を Install。
  4. インストール成功すると、右下に「Go Live」というボタンが出てきます。

1.7 Live Server で開く

  1. VSCode の右下「Go Live」をクリック。
  2. ブラウザが自動で開く → http://127.0.0.1:5500/ というURLになる。
  3. 画面に 灰色の四角＋丸＋文字 が出れば成功！

1.8 自動リロードを確認

  • sketch.js の background(220) を background(120) に変更して保存（Ctrl+S / Cmd+S）。
  • ブラウザの背景が少し濃くなれば、自動更新もOK。

2. 最初のスケッチ（setup/drawの基本）

p5.js は「毎フレーム呼ばれる draw()」と「最初だけ呼ばれる setup()」の2本柱で動きます。

以下をコピペして動かしてみましょう。

コード（sketch.js） 
function setup() {
  createCanvas(400, 400); // 400×400ピクセルのキャンバスを作成（描画領域）
}

function draw() {
  background(220);        // 背景をグレー(220)で毎フレーム塗りつぶす（アニメーションの残像を消す）

  strokeWeight(4);        // 線の太さを4ピクセルに設定

  fill(0,0,0);    // 塗りつぶし色を紫系のRGB値に設定
  // 3点を結んで三角形を描く（座標は (10,150), (200, 150), (200, 10)）
  triangle(10,150, 200, 150, 200, 10);

  fill(100,100,200);      // 塗りつぶし色を緑系のRGB値に設定
  // 三角形を描く（座標は (0,130), (180, 130), (180,0)）
  triangle(0,130, 180, 130, 180,0);

  fill(255);              // 塗りつぶし色を白に設定（テキスト描画用）

  textSize(32);           // テキストサイズを32ピクセルに設定
  textFont("serif");      // フォントをセリフ体に設定
  text("bunjo", 100, 100);    // テキスト "bunjo" を座標 (100,100) に描画
}

補足：座標・色・描画の順序

  • 左上が (0,0)、右に +x、下に +y。
  • fill() など設定 → 描画 の順番。後で描いたものが手前。
    • // でコメント化してオン/オフ比較してみましょう。
  • background() を draw() の最初に書くことで、前フレームの描画が消去され、残像が残らないようになっています。

3. 入力で動かす（マウス／キーボード）

次に、p5.jsの描画を静的な状態から動的な状態へと変える方法を学びます。
具体的には、マウスの位置やキーボードの入力といった、ユーザーからのインプット（入力）に応じて、画面上のオブジェクト（図形や色など）の振る舞いを変える手法を体験します。

以下のコードを実行してみましょう。

コード（sketch.js） 
// 現在の塗り色（RGB）をグローバル変数で管理
// → draw() や keyPressed() など複数の関数から参照・更新できる
let r = 178, g = 100, b = 162;

function setup() {
  // 表示領域（キャンバス）を作成。幅480px × 高さ270px（16:9）
  createCanvas(480, 270);

  // 画面内の固定テキストの読みやすさ向上のため、テキストサイズを指定
  textSize(16);
}

function draw() {
  // 画面を毎フレーム黒背景(20)で塗りつぶす。
  // ※ draw() は1秒に60回程度呼ばれる。ここで背景を塗ると残像が消える。
  background(20);

  // 円の塗り色を現在の r,g,b に設定。輪郭線は不要なので無効化
  fill(r, g, b);
  noStroke();

  // マウス座標（mouseX, mouseY）をそのまま円の中心に使う
  // ※ 画面外に出ると mouseX/mouseY は -1 や width+1 のような値になることがある
  const x = mouseX;
  const y = mouseY;

  // 半径ではなく直径で指定する（ここでは直径40pxの円）
  circle(x, y, 40);

  // 画面左下にデバッグ用テキストを白で表示
  fill(255);
  // 画面の「高さ - 10px」位置に表示して下端に寄せる
  // バッククォート `...` を使ったテンプレートリテラルで数値を埋め込む
  text(`mouse=(${x}, ${y})  color=(${r}, ${g}, ${b})`, 10, height - 10);
}

// キーが押された瞬間に1回だけ呼ばれるコールバック
function keyPressed() {
  // 数字キー '1' / '2' / '3' で色を切り替える
  // ※ 文字として比較する点に注意（数値1ではなく '1'）
  if (key === '1') { r = 255; g = 0;   b = 0;   } // 赤
  if (key === '2') { r = 0;   g = 255; b = 0;   } // 緑
  if (key === '3') { r = 0;   g = 0;   b = 255; } // 青
}

マウス入力の基礎

p5.jsには、マウスの位置を常に取得できる特別な変数が用意されています。

  • mouseX: 現在のマウスカーソルのX座標
  • mouseY: 現在のマウスカーソルのY座標

これらの変数は、draw()関数が実行されるたびに自動的に最新の値に更新されます。そのため、描画関数の中でこれらの変数を使えば、マウスに追従する円や四角形を描くことができます。

コード例では、このmouseXとmouseYをcircle()関数の引数として渡すことで、マウスカーソルを追いかける円が描かれています。

const x = mouseX;
const y = mouseY; // マウスに追従
circle(x, y, 40);

キーボード入力の基礎

キーボードの入力に応じて処理を行うための特別な関数も用意されています。

  • keyPressed(): 任意のキーが押された瞬間に一度だけ実行される関数です。
  • key: 押されたキーの文字（例: ‘1’, ‘a’, ‘ ‘など）を保持する変数です。

提示されたコード例では、keyPressed()関数の中でkey変数をチェックし、押されたキーが'1'、'2'、'3'のいずれかだった場合に、円の色を赤、緑、青に切り替える処理を実装しています。

これにより、ユーザーがキーを押すというシンプルな操作で、プログラムの見た目をインタラクティブに変更できるようになります。

function keyPressed(){
  if (key === '1') { r=255; g=0;   b=0;   }
  if (key === '2') { r=0;   g=255; b=0;   }
  if (key === '3') { r=0;   g=0;   b=255; }
}

それでは、理解を深めるために、以下の演習に取り組んでみましょう。

演習

  • 円を四角にしてみましょう。
  • map(mouseX, 0, width, 0, 255) で色を連続変化させてみましょう。
  • サイズを keyIsDown(SHIFT) で増減させてみましょう。

例えば以下のようなイメージ（合わせる必要はないです）

4. エラーに慣れる（Console と DevTools）

プログラミング学習において、エラーは避けて通れないものです。しかし、エラーは決して敵ではありません。むしろ、プログラムのどこに問題があるのかを教えてくれる貴重なヒントです。ここでは、エラーメッセージの読み方と、バグを見つけて修正するためのデバッグ（バグ取り）手法を学びます。

エラーの種類と原因

エラーメッセージには、その原因を特定する手掛かりが隠されています。代表的なエラーを2つ紹介します。

  • ReferenceError
    • 原因: 変数や関数名にスペルミスがあるなど、プログラムが認識できない名前を使っているときに発生します。
    • メッセージ例: ... is not defined（…が定義されていません）
    • 対処法: メッセージに示された名前のスペルが、正しく定義された名前と一致しているか確認しましょう。
  • SyntaxError
    • 原因: プログラムの文法（書き方）に間違いがあるときに発生します。例えば、括弧が閉じていなかったり、セミコロンやカンマが抜けていたりするケースです。
    • 対処法: エラーが示している行やその周辺の文法を注意深く見直しましょう。

デベロッパーツールを活用する

ほとんどのウェブブラウザには、プログラムの動作を詳細に観察するためのデベロッパーツールが標準搭載されています。これらを使いこなすことで、エラーの特定とデバッグが飛躍的に効率化します。

デベロッパーツールの開き方

  1. 開いているページ上で右クリック。
  2. メニューから「検証（Chrome）」または「開発者ツールで調査する（Edge）」を選択。

Consoleタブ: 値の観察と簡易実行

「Console」タブは、プログラムの実行中に特定の変数の値を確認したいときに非常に役立ちます。

  • console.log()
    • プログラムにconsole.log()を記述すると、指定した値やテキストがConsoleに表示されます。これにより、計算結果が期待通りか、変数の値が正しく更新されているかなどをリアルタイムで確認できます。
    • 例: console.log("円のX座標は:", x);
  • 直接実行
    • Consoleに直接JavaScriptのコードを入力して実行することも可能です。これにより、簡単な計算や関数の動作を試すことができます。

Sourcesタブ: プログラムの実行観察

プログラムがどのように動いているかをじっくりと観察したい場合は、「Sources」タブのデバッグ機能が便利です。

  1. ブレークポイントを設定:
    • デバッグしたい行の行番号をクリックすると、ブレークポイントが設定されます。これは、「ここでプログラムの実行を一時停止してください」という目印です。
  2. 再読み込み:
    • ページを再読み込みすると、プログラムはブレークポイントで自動的に一時停止します。
  3. ステップ実行:
    • 一時停止中に「Step Over」ボタンなどをクリックすることで、プログラムを1行ずつゆっくりと実行できます。このとき、画面右側で変数の値がどう変化していくかをリアルタイムで観察できます。

これにより、プログラムが想定外の動きをする原因（バグ）を、その発生過程を追うことで特定できます。この機能は、複雑なロジックや繰り返し処理の動作を理解するのに特に有効です。

演習1: 意図的に壊して学ぶ

エラーメッセージとデベロッパーツールの使い方に慣れるため、実際にプログラムを壊してみましょう。

  1. fill(255,0,0)をfil(255,0,0)に変更し、ReferenceErrorを発生させてみましょう。
  2. fill(255,0,0)をfill(255,0,0;のように、括弧を壊してSyntaxErrorを発生させてみましょう。

演習2:

以下のコードをコピーして、sketch.jsに貼り付けてください。

コード（sketch.js） 
// setup()関数は、プログラムが開始したときに一度だけ実行されます。
function setup() {
  createCanvas(400, 400);
  background(240);
  console.log("setup()関数が実行されました。");
}

// draw()関数は、毎フレーム繰り返し実行されます。
function draw() {
  // マウスのX座標をxという変数に代入します。
  let x = mouseX;

  // xの値が200より大きいかどうかをチェックします。
  if (x > 200) {
    // もしxが200より大きければ、背景色を赤にします。
    background(255, 200, 200);
  } else {
    // そうでなければ、背景色を青にします。
    background(200, 200, 255);
  }

  // 画面中央に、マウスのx座標に応じた位置に円を描画します。
  fill(0);
  circle(x, 200, 50);

  // コンソールにxの値を表示します。
  // これにより、プログラムの実行中にリアルタイムで値を確認できます。
  console.log("現在のX座標は:", x);
}

このコードで先ほど習ったツールを使ってみましょう

  • console.log()の確認:
    • ブラウザでページを開き、デベロッパーツールを開いて「Console」タブを見てください。
    • setup()が実行されたときに「setup()関数が実行されました。」と表示されます。
    • マウスを動かすと、draw()が実行されるたびに「現在のX座標は: [値]」というメッセージが連続して表示されます。これにより、mouseXの値がリアルタイムで更新されていることが確認できます。
  • ブレークポイントとステップ実行:
    • デベロッパーツールの「Sources」タブを開き、sketch.jsを選択します。
    • if (x > 200)の行番号をクリックしてブレークポイントを設定します。
    • ページを再読み込み（F5キーなど）すると、プログラムの実行がこの行で一時停止します。
    • 右側にある「Step Over」ボタン（↪️のようなアイコン）を繰り返し押すと、プログラムが1行ずつ進む様子を観察できます。xの値が200より大きいか小さいかによって、どのbackground()の行が実行されるかを確認できます。
    • マウスを動かすと、draw()関数が再び実行され、またブレークポイントで一時停止します。これを繰り返すことで、マウスの位置とプログラムの挙動の関係をじっくりと観察できます。

5. for文と random で遊ぶ

p5.jsの表現力をさらに広げるために、for文とrandom()関数を導入します。
これらを組み合わせることで、手作業で一つずつ描くのではなく、複数の図形を規則的に並べたり、あるいは予測不能な偶然性を取り入れたりする表現が可能になります。

5.1 for文：複数の図形を一気に描く

for文は、「同じような処理を何度も繰り返す」ための基本的な構文です。
以下に、for文を使って画面に複数の円を等間隔で描く例を示します。

コード（sketch.js） 
// setup()はプログラムが開始したときに一度だけ実行されます。
function setup() {
  createCanvas(400, 400); // 400x400ピクセルのキャンバスを作成
}

// draw()は毎フレーム（1秒間に約60回）実行されます。
function draw() {
  background(220); // 背景を薄いグレーで塗りつぶす

  // fill()はこれから描く図形の色を設定します。
  fill(30, 150, 230); // 鮮やかな青色に設定

  // for文を使って複数の円を描画します。
  // (1) 変数iを0から開始
  // (2) iが400未満の間、このブロック内の処理を繰り返す
  // (3) 1回の繰り返しごとに、iの値を50ずつ増やす
  for (let i = 0; i < 400; i += 50) {
    // 画面の左端から、50ピクセル間隔で円を描画します。
    // x座標は i 、y座標はキャンバスの中央 (200) とします。
    // i の値は 0, 50, 100, 150, ... と変化していきます。
    circle(i, 200, 40);
  // circle(i+40/2, 200, 40);
  }
}

このコードでは、for文によってiという変数の値を0から50ずつ増やし、その値を円のX座標として利用しています。これにより、画面の左端から右端に向かって、規則正しく円が並んで描画されます。

5.2 random()：偶然性を導入する

random()関数は、指定した範囲内でランダムな（予測不能な）数値を生成します。これをfor文と組み合わせることで、規則性の中に不規則な要素を加えたり、まったく新しいパターンを生成したりすることができます。

  • random(max): 0以上、max未満のランダムな数を返します。
  • random(min, max): min以上、max未満のランダムな数を返します。

以下のコードは、random()を使って、画面全体にランダムな位置・サイズの四角形を多数描画する例です。

コード（sketch.js） 
// プログラムが開始したときに一度だけ実行される関数
function setup() {
  // 400x400ピクセルのキャンバスを作成します
  createCanvas(400, 400);

  // draw()関数を一度だけ実行するように設定します。
  // これにより、画面をリロードするたびに、新しいランダムな模様が生成されます。
  // noLoop();
}

// 毎フレーム繰り返し実行される関数
function draw() {
  // 背景色を薄いグレーに設定します
  background(220);

  // for文を使って、10個の長方形を繰り返し描画します。
  // ここでは変数iが0から9まで、10回繰り返されます。
  for (let i = 0; i < 10; i++) {
    // 描画する長方形の色をランダムに決めます。
    // fill(赤, 緑, 青, 透明度)
    // 赤: 50から250の間でランダム
    // 緑: 100から150の間でランダム
    // 青: 120から200の間でランダム
    // 透明度: 150（少し透けて下の色が透けて見えるように）
    fill(random(50, 250), random(100, 150), random(120, 200), 150);

    // 長方形を描画します。
    // rect(x座標, y座標, 幅, 高さ)
    // x座標: 0から幅(width)の間でランダム
    // y座標: 0から高さ(height)の間でランダム
    // 幅: 20から100の間でランダム
    // 高さ: 20から100の間でランダム
    rect(random(width), random(height), random(20, 100), random(20, 100));
  }
}


このコードを実行するたびに、まったく異なる、予測不能な模様が生成されます。
noLoop()関数を入れると、画面がアニメーションせず、生成された静止画をじっくり観察できます。

演習（もし時間がかなり余りそうであれば）

  • for文を2回続けて使ってみる。
コード（sketch.js） 
// プログラムが開始したときに一度だけ実行される関数
function setup() {
  createCanvas(400, 400);
  noStroke(); // 線の描画を無効にする
}

// 毎フレーム繰り返し実行される関数
function draw() {
  background(240);

  // 縦・横それぞれ10個の円を並べるため、for文を入れ子（ネスト）にする
  // 外側のループは列（row）の制御
  for (let x = 0; x < 10; x++) {
    // 内側のループは行（column）の制御
    for (let y = 0; y < 10; y++) {

      // 円を描画する位置を計算
      // 画面の幅・高さを10分割し、中心に配置
      let posX = map(...);//考えてみよう
      let posY = map(...);//考えてみよう

      //円を描画
      circle(...); //考えてみよう

    }
  }
}

  • map × for：行列グリッドで色・大きさを位置に応じて変化させてみる。
コード（sketch.js） 
// プログラムが開始したときに一度だけ実行される関数
function setup() {
  createCanvas(400, 400);
  noStroke(); // 線の描画を無効にする
}

// 毎フレーム繰り返し実行される関数
function draw() {
  background(240);

  // 縦・横それぞれ10個の円を並べるため、for文を入れ子（ネスト）にする
  // 外側のループは列（row）の制御
  for (let x = 0; x < 10; x++) {
    // 内側のループは行（column）の制御
    for (let y = 0; y < 10; y++) {

      // map()を使って、x座標とy座標を色とサイズに変換します。
      // x座標（0から9）を赤色（0から255）に変換
      let r = map(...); //考えてみよう
      // y座標（0から9）を緑色（0から255）に変換
      let g = map(...);　//考えてみよう
      // サイズを位置に応じて変化させる（ここでは、右上に向かうほど小さくしてみる）
      let size = map(...); //考えてみよう

      // 色とサイズを設定
      fill(...); // 考えてみよう。青色は150で固定
      
      // 円を描画する位置を計算
      // 画面の幅・高さを10分割し、中心に配置
      let posX = map(...);//考えてみよう
      let posY = map(...);//考えてみよう

      //円を描画
      circle(...); //考えてみよう
    }
  }
}

  • noise() を使って揺らぎを加えてみる。
コード（sketch.js） 
// setup()関数は、プログラムが開始したときに一度だけ実行されます。
function setup() {
  createCanvas(400, 400);
  noStroke();
}

// draw()関数は、毎フレーム自動的に繰り返し実行されます。
function draw() {
  background(0, 50, 100); // 濃い青の背景

  // frameCountを使って、時間と共にノイズの値を変化させます
  // これにより、滑らかなアニメーションが生まれます
  let time = frameCount * 0.01;

  // for文を使って、画面全体に点を描画します
  for (let x = 0; x < width; x += 10) {
    for (let y = 0; y < height; y += 10) {

      // noise()関数を使って、位置（x, y）と時間（time）に応じた値を生成します
      // この値は0から1の間で滑らかに変化します
      let n = noise(x * 0.01, y * 0.01, time);

      // map()を使って、nの値を色とサイズに変換します
      let alpha = map(...); //考えてみよう
      let size = map(...);　//考えてみよう
      
      // 生成した値を使って円を描画
      fill(255, 255, 255, alpha); // 白色で透明度を変化させる
      circle(x, y, size);
    }
  }
}

  • mousePressed() を使ってインタラクティブな反応を加えてみる。
function setup() {
}

function draw() {
}

// mousePressed()関数は、マウスがクリックされるたびに実行されます
function mousePressed() {
  // 何か処理を入れてみましょう
}

6. 課題

基礎課題

「インタラクティブ・ミニ作品」 を作成し提出してください。

  • 条件：
    • マウス（位置 or クリック）または キー入力を最低1つ利用。
    • for または random を最低1つ利用すること。

提出内容（２つ）

  • ソースコード(index.html, sketch.js, readme.txt)をMoodleに提出してください。
    • readme.txtには作品タイトルを記載してください。
  • 動作中の動画をMoodleに提出してください。

※ 今回の基礎課題は厳しめに採点するので頑張ってください。
※ 生成AIを活用してもらって構いません。とにかく独創的で面白いものを提出してください。

（余談）学生の時、似たような授業課題で作った記憶があるもの「ところてん角から順に」

こんなのも作った記憶があります。for文とマウスクリックを使ってメディアアート作品を作れ、みたいなお題でした。（生成AIで一瞬で作れちゃいました。。）

アイデアが浮かばない方は参考にしてみてください。

発展課題

音楽に合わせた映像作品をp5.jsで作ってみましょう。

  • 条件：
    • 音楽を再生
    • 音楽情報（例えばp5.soundを活用）に合わせてエフェクトを生成する

提出内容（２つ）

  • ソースコード(index.html, sketch.js, 楽曲ファイル, readme.txt など)をMoodleに提出してください。
    • readme.txtには映像作品の説明を記載してください。
  • 動作中の動画をMoodleに提出してください。

※独創的で面白いもの、人をあっと驚かせるようなものを評価します