SFC – デザインとプログラミング 2020
p5.dom でHTML 5オブジェクトを使う
今回は、p5.domを使用します。p5.domを使用することで、p5.jsのcanvasの枠を越えて、HTML 5のDOMに直接アクセスすることが可能となります。例えば、Webブラウザで用意されている、ボタンやチェックボックス、スライダーなどのGUIのパーツを利用したり、Webカメラやマイクなどのデバイスへのアクセスしてインタラクションすることが出来るようになります。
映像資料
スライド資料
本日の課題
p5.jsのp5.domライブラリーを用いて作品を制作してください!
- p5.domで利用する機能は自由
- GUI系 (テキスト入力、ボタン、スライダー …etc.)
- カメラ
- オーディオ (マイク入力が使えます!)
- 講義内で紹介していない機能も自由に使用してください
- OpenProcessingに sfcdesipro201113 のタグをつけて投稿、アンケートからURLを提出してください!
- 締切は次回の授業の前日 (11/19) まで!
提出課題
人気 TOP5
- 1位 : 「ふん！〇〇っていうのかい？贅沢な名前だねぇ・・・！今からお前の名前は○だ！」 19票
- 2位 : LINEはバランス良く送りましょう 13票
- 3位 : 全部白にしたら勝ちゲーム 10票
- 4位 : カメラ機能付きiPhone 9票
- 5位 : 夜の公園（脱出ゲーム）β版 8票
おめでとうございます!!
balls, 作ってて画面酔いしたワロタ, Be quiet, Color Change, 無限自己風車, おんがく（激しめ）, 配信, GRASS, collect rect, My Sketch6, キラキラ扇風機, 風車（かざぐるま）, How You Feelin’, ピエロ・改, オマエも未来最高と叫びなさい！！, ヒーロー, 光で描く, 被害妄想, takusan, サングラスフィルター, 誰でもノーベル賞, mosaic video, LINEはバランス良く送りましょう, 福笑い(Lv.100), ポジティブは作るもの, 色の回転, 何か検索している時の天才の背景, webcam2, so zoom, watch yourself twirling, track, あだ名シミュレーター, soundcloud player, balloon, COLORslider, 「ふん！〇〇っていうのかい？贅沢な名前だねぇ・・・！今からお前の名前は◯だ！」, aisatu, Can you find a star?, カラフルモザイク, mangekyoudayo, カウンター, Who are you?, number 7, 簡易シューティング, be quiet, 儀式, bounceBall, —, 万華鏡, モザイクカメラ(可変), Creature, WebCam’s Broken!, He may be THICK, 「Birthday」, 音, オススメの映画紹介, Do Not Press!!!, How are you feeling?, pinwheel, ミルワーム, 挨拶, button123, LED, hello, Photo Film, 円の魔法, 労働/歯車を回せ, 色んな図形が出るよ, textttt, 筋トレ大好き, 君は何個うんちを正しく入れられるかな？？テキトーな文字をテキストBOXに打ってね, サイコロステーキ先輩, 愛の伝え方, catch me if you can, 1000個でストップ, テキスト, CUSTOMIZE YOUR NETWORK…, Mawaru kawaii Bubbles, Petals in Rain, 連打starry night, 脱出ゲーム 作ってみた, Mosaic of Liberty, Revolution→Kaleidoscope, Sputtering, ナンバーキーシミュレーター / GUESSING PASS-CODE MINI GAME, sample, トリッピー, なんちゃってサーモグラフィー, 廻る星命, 世界一❣, 全部白にしたら勝ちゲーム, 魔法陣が作れるよ, kadai, Time Plus, SPOON, meltingStarbucks, 万華鏡, 字で描く, 降り注ぐつくね, 白黒世界, 四角の設定！！, モザイク世界, Dancing Rectangle, glitchfilter, moving circle, 入力した文字が激しく訴えかけてくる, Dummy Google Form, Rolling Me, スライダー分割, Fan, 記念撮影, X-ray taking, ウェブカムスクリーンセーバー, ButtonS, Audi (in corona), cell, Cortana thing, rect_color, kadai06, 立体, 混色, 何に見えますか, まる、さんかく、しかく、それともお顔？, 四角形の色, Mosaic Mirror, Neon Flood, Dance Monkey, 悪夢の回転, Change RGB with slider, 服のカスタム, ScaryFace, My To Do List, Lissajous curve, 星の軌跡, rect, ババ抜き, 広がり, 色んな多角形, triangle, 前課題とカメラの合わせ技, slider tree, Shape of Candy, 宇宙終末の旅, 揺れるカメラ, world greetings, 歪んだ自我, Camera*sketch, 多分出来ないやつ, スライダー, turn on camera, 写輪眼, Rainbow ball, dom assignment, Seeing the Colors, 途中, wide video, pink green, 選べるfilter, 現実世界のイメージスプリッター, デザインとプログラミング2020第五回課題, Anonymous Gift（あなたへ）, Appeal, 棒回転, カラフルなしゃぼんだま, 暴走四角, ^p^, simpleaudioplayer, 色変化, simpleaudioplayer, SoundBiz, おい磯野将棋やろうぜ, FIRE, ☆ドット絵おえかき帳☆, ShapeMaker, Camera Filter, 色の変化とクルクル, which one?, 予定メモ, WAGASA, Camera, 点描のカメラ, 選んで, music player, 重なる言葉, ドットフィルター, button, Increasing rope, Volume Indicator, Color Change, 課題, A.Vivaldi “La Primavera”, 私の頭の中, ドラゴンを倒せ！, live, 「今の疲れ＝未来のお金！！！」, 精神循環, 文字の雨, Voice Compositon, camera pixel, 色と大きさの変わる花火, Mirror Me, 色変化, My Sketch, 魔鏡, particle, アルコホリック, カメラ機能付きiPhone, ball&square, 声かけてね, 星座占い, Bangarang, 星空, ご自由にどうぞ, 風車, alert loop, コメント欄, 細かい, オセロ（途中）, 入れ子構造/Nested structure, 検索, モンスターが現れた！, Picasso, ４×４オセロ, まるさんかくしかく, came, 渦,