インタラクティブアートのまとめ
今までProcessingやp5.jsなどのクリエイティブコーディング環境で制作してきたインタラクティブアートをまとめてみました!
一部の作品はOpenProcessingというサイトで体験できます。また、ソースコードもOpenProcessing上で公開しています。
ボディトラッキング・ハンドトラッキング
カメラジェスチャー
手で「カメラ」のジェスチャーをとると、手の中に次々と世界中の写真が現れるインタラクティブ作品
特殊な機材を必要とせず、webカメラのみで動作します。そのため、ブラウザとwebカメラがあれば世界中どこでも体験できる作品となっています!
キラキラ
指先からキラキラが溢れ出すインタラクション
webカメラの映像から手の形を判定し、指先からキラキラを出現させています
絶対に負けるじゃんけん
じゃんけんをすると必ず負けちゃう!!
webカメラの映像から立っている指の本数を推定し、グーチョキパーを判定しています
ダンス映像のボディトラッキング
AIST Dance Video Database (AIST Dance DB) の映像に対して機械学習ライブラリでボディトラッキングをかけて、手の位置にパーティクルを表示しています
手でつんつんできるアニメーション
SYMさん @hyappy717 のインタラクティブアニメーション https://twitter.com/hyappy717/status/1404416312282017798 にハンドトラッキングを加えて手でつんつんできるようにした作品
つんつんしたり、パンチしたり、押しつぶしたりできます!
マウス操作、カーソルの動き
インタラクティブ水彩絵の具
水彩絵の具のような質感のアニメーションで、ぐにゃぐにゃとジェネラティブ(生成的)に模様が描かれます
クリックしたりドラッグしたりすることで、自分でも模様を描くことができます
カーソルについてくる棒人間
らくがき風の棒人間がマウスカーソルについてくるインタラクティブアニメーション
紙に描かれたようなビジュアルにこだわりました。「デジタルでアナログ絵っぽい質感を表現する」は静止画や動画でもできると思いますが、このようにインタラクティブな表現はクリエイティブコーディングならではの表現だと思っています
魔法少女変身インタラクション
マウスカーソルの縦の動きに連動して、普通の女の子が魔法少女に変身する様子を表現しました
体を囲むキラキラを立体的な動きに見せるように工夫しました
変身後の背景色をグラデーションにしてキャラクターのカードのようなリッチな見た目を表現しました
寿司インタラクション
魚のemojiが泳いでいるところに白ごはんのカーソルをぶつけると寿司になるインタラクション🍣🍣🍣
カーソルから花が咲きまくるカーソルインタラクション
実写の花がぶわーーーっと咲きまくるアニメーション
放置していても咲きまくるのですが、鑑賞者がマウスでクリックしたりドラッグしてもそこから咲きまくります
らくがきのおともだち
家の壁にらくがきされた風の顔の絵ですが、マウスカーソルを動かすと…
ホラーっぽいことがしたくてつくったインタラクションです
マイク入力
ハチャメチャほめてくれるマシーン
マイクにむかって何かしゃべるとハチャメチャにほめてくれます!!!
パワーレンジャー英会話教室
マイクにむかって日本語でスーパー戦隊のタイトルを言うと音声認識され、パワーレンジャー版のタイトルを音声合成で返してくれるインタラクション
翻訳についてはソースコード内にお手製の対応リストを持っています
AR
AR御札
カメラにかざすとかっこいいエフェクトが出てくる御札
御札にはARマーカーを印刷してあり、ARマーカーの位置に合わせてエフェクトが表示されます
プロジェクションマッピング
レストランのプロジェクションマッピング
レストランのカウンターや壁に対するプロジェクションマッピング
パーティーの主催者さんにQRコードを印刷した紙をお渡ししておき、スマホからそのコードを読み込んでいただくことでビジュアルを切り替えられるしくみ。お料理や進行に合わせて壁紙などががらっと変えられます!
今後もインタラクティブで楽しい作品をたくさん作っていきたいです!
もしもインタラクション関係でお手伝いできることがありましたらお気軽にお声がけください!!
X(Twitter)▼
https://twitter.com/reona396
Instagram▼
https://www.instagram.com/reona396_artworks/
Processingとp5.jsとクリエイティブコーディングが大好きです。 めちゃくちゃ元気!