SFC – デザインとプログラミング 2021
p5.jsで画像データを扱う – 画像の分析・再合成
p5.jsのp5.Imageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
映像資料
スライド資料
投稿作品とランキング
投稿作品 (Shetches that are tagged にする)
人気ランキングTOP5
- 1位 : Ring tree 10票
- 2位 : まぶしいマウス 9票
- 3位 : Halloween 6票
- 3位 : Sirius Black 6票
- 3位 : Lime ⇔ Yellow 6票
- 3位 : Girl with Balloon(pixelated) 6票
- 3位 : 写像ってなんですか？ 6票
- 3位 : Nyanko 6票
おめでとうございます!!
本日の課題!
課題: p5.jsに読み込んだ画像ファイルのデータで表現する!
- p5.jsに読み込んだ画像ファイルの情報から、新たなイメージを生成する
- 読み込む画像は自由です
- 作品は、OpenProcessingに投稿
- 完成した作品に、タイトルをつける
- 投稿したURLをアンケートから提出
- 投稿の際に sfc211029 のタグをつけてください!
- 締切: 2021年11月3日(水)まで!
- 今回も、前回の提出作品の人気投票を行います!
- 前回のタグ sfc211022 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)