芸大 – メディアアート・プログラミング I 2021
p5.jsで画像データを扱う – 画像の分析・再合成
p5.jsのスケッチは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
映像資料
スライド資料、サンプルプログラム
本日の課題
テーマ: 「p5.jsに読み込んだ画像ファイルのデータで表現する!」
本日の映像資料を参考に、OpenProcessingに画像をアップロードした画像をスケッチに読み込み画像ファイルの情報から新たなイメージを生成してください。読み込む画像は自由です。OpenProcessingに投稿してURLを提出フォームから送信してください。