​​プログラミングB #09

​​#09 様々なメディアとその操作（1）イメージ

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

​​サンプルデータと参照先

​​
​​https://cenkhor.org/wp/wp-content/uploads/2020/11/programmingB_09.zip
​​
​​
 
User-uploaded image: +2018-12-03+12.49.01.png
​​
​​

​​様々なメディアとその操作（1）イメージ

​​
​​メディアのコード内での利用の流れの基本
​​
  1. ​​ファイルのアップロード
  1. ​​ファイルの事前読み込み
  1. ​​function preloadでloadImageする
  1. ​​ファイルのデータをコード内で利用する
​​
​​はじめに
​​
  • ​​授業では画像，ビデオ，Webカメラなどの取扱について学びます．
  • ​​最も基礎的な画像が中心です．
  • ​​ビデオやカメラは読み出しや表示こそ方法が違いますが，ピクセル操作の手順などは画像と同じであるため，基礎的な操作に関してわからない場合は画像でテストしましょう．
​​
​​ベクタ形式とラスタ形式
​​
  • ​​今までのp5.jsでの描画
  • ​​Adobe Illustratorのように線と塗りで構成される図形を描画
  • ​​ベクタ形式での描画
  • ​​画像やビデオなどのイメージ処理
  • ​​ラスタ形式での描画
  • ​​ピクセル（点）の集合としてのイメージを操作する
​​
​​イメージ
​​
  • ​​ピクセルの集合，それぞれにRGBA（赤，緑，青，アルファ（透明度））の情報が保存されている．
  • ​​次回以降あつかう「配列」としてピクセルデータを読み込むことで参照・編集ができる．
​​
​​

​​イメージ表示の基本

​​
​​基本的な手順
​​
  1. ​​スケッチを保存
  1. ​​画像をアップロード
  • ​​p5.js Web Editorでの画像アップロード方法