yoppa.org

SFC – デザインとプログラミング 2020

p5.jsで画像データを扱う – 画像の分析・再合成

p5.jsのp5.Imageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。

今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。

映像資料

スライド資料

本日の課題!

課題: p5.jsに読み込んだ画像ファイルのデータで表現する!

  • p5.jsに読み込んだ画像ファイルの情報から、新たなイメージを生成する
  • 読み込む画像は自由です
  • OpenProcessingに提出しURLをアンケートに記入
  • 「sfc_desipro201106」のハッシュタグをつけてください!
  • 今回は作成した作品のスクリーンキャプチャーの画像ファイルをアップロードしてください。(※ Googleアカウントでログインする必要があります)

締切は次回の授業の前日 (11/12) まで!!

アンケートフォーム

提出作品

TOP 5

おめでとうございます!!

友達, Be over, ゴッホもp5.js使えば生涯で描けた作品数もっと多かった説ゥ〜, Fish, ねっとりした夜明け, 馬のための毛並み, 三角四角ミッキー, My Sketch5, Cat cAt caT, ピンボケ写真, rectangle, 蝉, flower, チェダーチーズのもつ鍋, They’re all MJ., a rainy day in London, LightsFromTowers, LightsFromTowers, 白金青い池, じゃらん風ねこ, easy glitch, コレド室町, レスポンシブ, Vote for me, 赤いNの文字がカラフルな光の筋に変わる, ぐるぐるまるー, view, eye move, 究極の竹, Hatsuhi, 「ぬくもり」, ハリー(・ポッター), beach, 卵ご飯, Surf SkeTch, Surf SkeTch, (former) president, Kamoike Techno Dessin, 未確認飛行物体の電波妨害, starmaker, Kokuritsu2019→, Superposition Citrus, MY, 隠し, dear Mt.Chokai, Fall ++, Photo_rect, mommy, Xavier Dolan, 炎：The Phoenix, BorderLine, ゴリラ, Japanese landscape, Autumn, Yokohama, 古きよき, 紅葉, 未来の憧れ, a_cup_of_tea, fat seal, SAKURA, Xrismas dayo~~, 僕は薄くて穏やかで濃くて激しい。, 破壊し切れぬ創造, 凍りついた海, 凍りついた海, My Pic Drawer, 美味しそうにな～れ, my lover♡, The Shawshank Redemption, Mosaic Ship, 葦の原, NKJM, iconVisualiser, kazan, ただ写真を見せたい, ガラス越し、天気雨(土砂降り), Evergarden, Bright Sunset, 1/4円のスケッチバリ編, turnbacktime, ONSENchick, VERTICALLY LONG SEA, 疾風, sea, 線香花火, 泥棒のプライバシー, SFC(ゴッホ風), Peephole, 白黒画像に謎の色, 逆さ富士, Cosmos bipinnatus, Mosaic Laupe, 秩序は強さ～マウス位置で描画速度が変わります/お好みの速さでどうぞ～, Sakurauchi, 星月夜を書きましょう, InversedFlowerGarden, Dizzy – Melting into Nebula –, スピード線ジェネレーター, 神社, Sakana, 煌道, 一二三二三二一三一二, look at, Cherry Blossoms, Galaxy, 流れ星, ふりかけ ミックスベリー味, Jellyfish in the Dark, photo, hello, handsome, kadai04, 宇宙ネコ, 二色の空, 二色の空, マウスで擦ろう！, Banana Man, デッサンの直線練習（FUJI）, 間に合いませんでした, 来週以降ちゃんとがんばろうと思います, 白鯨, 雨のイメージ, Sunflowers, 夜景, Sakura, POP19, Pour Hot Water and Wait 3 Minutes, Cup, Sunflowers, RIMINI, 適当に撮った富士山をロマンチックに, 毛筆, Perfume, Vi, Okujou, ケイオウクリッカー / Keio Clicker, Cafe*time, Test1, funny photo, AirJordan, color block, 2020 Gogh, Mosaic Waterfall, Yakitori making, ファンタジーな世界, On Fire, CAT, stay night, 先輩, 傀儡, Abstract of Meitetsu 6001, myphoto, クラゲ, 狼と夕陽, 夢現, 二層風景, 桜吹雪, 色彩反転〜色が変わった世界〜, lens flare, Light night, ゴッホ風プーチン, 愛鳥：あおいちゃん, Paris de jour à nuit, レインボーブリッジ, 手書きー抽象画, billyeilish, 雨と結晶, cake, 最果ての都市、印象, 桜庭園, DRAWSFC, 光の花園, イケオジが出来るまで, girlwithpearlearring, デザインとプログラミング2020第四回課題, yamanote shoes, ramen, photo sand, Cleaning Window, Mona, 犬を描こう, My Photo, Dream Car, 未来, UzuKurage, cat, photo training assignment, Space station sucked into a black hole, ゴッホ（プログラミングリタッチ）, やってくる私, Bird of Farewell Gift~餞の鳥~, 聖なる夜の点灯式, cross sketch, 1960年代のハリウッド, これなーんだ？, aussie, Burano, Italy, イルミネーション, 課題, A blinking cat, Xmas, A Man in the Memory, 彼岸花, parapara, Blossom, Magic Pen, 流行と現象, 憂鬱スクランブル, 近視の夜空, In The Tokyo, イルミネーション, Macintosh, 夜景, Monblanc, ひだまりスケッチ, photo.p5js, Jellyfish, 郷愁/Monochrome_Memory, 柴犬, Sketch of My Cat, benten street, MTH, Firework, 雨ふる星月夜, フロンターレスクラッチ, Cho-chin, 夕焼けの走査, #3 photo, 積み木の世界, RandomChangeColor, 雨の中迎えにきてくれたあの有名人風の彼氏, 紅葉, seb, うみ, Nicola Francesca, Penguin2, 雪景色, ぼやぼやsky, 雨そして流星群, 快晴の村時雨,