Step2 PC側（p5.js）：ブラウザ上で動画を再生しつつ色情報を取得する

次に、再生中の動画から特定の位置の色（RGB値）を抜き出す処理を追加します。

ファイル構成

使うファイルは前回と同じく index.html と sketch.js です。clip.mp4 も同じフォルダに入れておきましょう。

  • index.html: 新しい表示用のUI（色情報を表示する場所）を追加します。
  • sketch.js: 動画から色を抜き出して、それを画面に表示する処理を追加します。

フォルダ構成

step02_video_color
├── clip.mp4
├── index.html
└── sketch.js

コード

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>Step2: Video + color sampling</title>

  <script src="https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js"></script>

  <style>
    body { margin: 0; font: 14px/1.4 system-ui; }
    #ui {
      position: fixed; left: 8px; top: 8px;
      background: #0008; color: #fff; padding: 8px; border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="ui">Step2：RGB = <span id="rgb">-</span></div>
  <script src="./sketch.js"></script>
</body>
</html>

sketch.js

動画のピクセルから色を抜き出すには、p5.jsのget()という関数を使います。

コード（sketch.js） 
// グローバル変数として、動画オブジェクトとRGB値を表示するHTML要素を格納する変数を準備
let vid;
let rgbText;

// 動画を事前に読み込むための特別な関数
// この中で、HTMLファイルと同じフォルダにある "clip.mp4" を読み込みます
function preload(){
  vid = createVideo("clip.mp4");
}

// ページが読み込まれた後に一度だけ実行される初期設定の関数
function setup(){
  // 幅320ピクセル、高さ240ピクセルのキャンバス（お絵かきスペース）を作成
  createCanvas(320, 240);
  
  // 動画の表示サイズを幅320、高さ180ピクセルに設定
  vid.size(320, 180);
  
  // デフォルトで表示されるHTMLの<video>タグを非表示にする
  vid.hide();
  
  // 動画を繰り返し再生するように設定
  vid.loop();

  // HTMLのid="rgb"を持つ要素を取得し、後で値を更新できるように準備
  rgbText = document.getElementById("rgb");
}

// 毎フレーム（1秒間に約60回）繰り返し実行される描画の関数
function draw(){
  // キャンバスの背景色を暗いグレーで塗りつぶす
  background(20);
  
  // 動画の現在のフレームをキャンバスの(0, 0)座標に描画
  image(vid, 0, 0);

  // キャンバスの中心にあるピクセル（点）の色情報を取得
  // p5.jsの get(x, y) 関数は、その座標の色を [R, G, B, 透明度] の配列で返します
  let c = get(width / 2, height / 2);

  // 取得したRGB値を画面に表示
  // c[0]が赤、c[1]が緑、c[2]が青の値です
  rgbText.innerHTML = `${c[0]}, ${c[1]}, ${c[2]}`;
}

  • let c = get(width / 2, height / 2);:
    • get(x, y)は、指定した座標の色を読み取る関数です。

    • width / 2とheight / 2は、それぞれキャンバスの幅と高さの半分を意味するので、これで画面のちょうど真ん中の座標を指定したことになります。

    • 読み取った色情報は、cという変数に[赤, 緑, 青, 透明度]の形で入ります。

  • rgbText.innerHTML = ...:
    • innerHTMLを使うと、HTML要素の「中身のテキスト」を書き換えることができます。
    • c[0], c[1], c[2]という形で、c変数に入っているRGBそれぞれの値を取り出して、画面に表示しています。

動作確認

このプログラムを実行すると、動画が再生されながら、画面中央の点のRGB値がリアルタイムでどんどん変化していく様子を確認できるはずです。
これで、LEDを光らせるための「色情報」を準備する第一歩が完了しました。

Pages: 1 2 3 4 5 6 7 8 9