プログラミングB #09

#09 様々なメディアとその操作(1)イメージ


高尾俊介(takawo@konan-wu.ac.jp)
甲南女子大学 文学部 メディア表現学科 講師

サンプルデータと参照先



様々なメディアとその操作(1)イメージ


メディアのコード内での利用の流れの基本

  1. ファイルのアップロード
  1. ファイルの事前読み込み
  1. function preloadでloadImageする
  1. ファイルのデータをコード内で利用する

はじめに

  • 授業では画像,ビデオ,Webカメラなどの取扱について学びます.
  • 最も基礎的な画像が中心です.
  • ビデオやカメラは読み出しや表示こそ方法が違いますが,ピクセル操作の手順などは画像と同じであるため,基礎的な操作に関してわからない場合は画像でテストしましょう.

ベクタ形式とラスタ形式

  • 今までのp5.jsでの描画
  • Adobe Illustratorのように線と塗りで構成される図形を描画
  • ベクタ形式での描画
  • 画像やビデオなどのイメージ処理
  • ラスタ形式での描画
  • ピクセル(点)の集合としてのイメージを操作する

イメージ

  • ピクセルの集合,それぞれにRGBA(赤,緑,青,アルファ(透明度))の情報が保存されている.
  • 次回以降あつかう「配列」としてピクセルデータを読み込むことで参照・編集ができる.

イメージ表示の基本


基本的な手順

  1. スケッチを保存
  1. 画像をアップロード
  • p5.js Web Editorでの画像アップロード方法