インタラクティブアートのまとめ
今までProcessingやp5.jsなどのクリエイティブコーディング環境で制作してきたインタラクティブアートをまとめてみました！
一部の作品はOpenProcessingというサイトで体験できます。また、ソースコードもOpenProcessing上で公開しています。
ボディトラッキング・ハンドトラッキング
カメラジェスチャー
カメラのジェスチャーをすると色んな写真が現れるwebインタラクションを作りました！
— レオナ (@reona396) July 26, 2022
I created a interaction that displays various photos when you make a camera-like gesture with your hands!
OpenProcessinghttps://t.co/84I1Hg2Rep
NEORThttps://t.co/AzaMV1eqQi#p5js #creativecoding pic.twitter.com/U1y8GDbEHf
手で「カメラ」のジェスチャーをとると、手の中に次々と世界中の写真が現れるインタラクティブ作品
特殊な機材を必要とせず、webカメラのみで動作します。そのため、ブラウザとwebカメラがあれば世界中どこでも体験できる作品となっています！
キラキラ
指先からキラキラが溢れ出すインタラクション
webカメラの映像から手の形を判定し、指先からキラキラを出現させています
絶対に負けるじゃんけん
p5.jsでハンドトラッキング+簡易ポーズ判定…ということでいじわるなじゃんけんインタラクション作ってみた！#p5js #プログラミング #dailycoding #creativecoding #OpenProcessing #NEORT
— レオナ (@reona396) June 11, 2020
【Rock Paper Scissors!】
OpenProcessing :https://t.co/DdcASsBsCv
NEORT :https://t.co/425HtJFZz3 pic.twitter.com/NT0MKehMLS
じゃんけんをすると必ず負けちゃう！！
webカメラの映像から立っている指の本数を推定し、グーチョキパーを判定しています
ダンス映像のボディトラッキング
p5.js新作スケッチ投稿！
— レオナ (@reona396) February 22, 2020
AIST Dance Video Databaseのダンス動画と #機械学習 用ライブラリml5.jsを組み合わせて、ダンサーの手の動きにアニメーションをつけてみました！#Processing #p5js #ml5js #OpenProcessing
Dance and Animation ver.0.1.0 - OpenProcessing https://t.co/1hUSXKxwAR pic.twitter.com/25coJ1yhjt
AIST Dance Video Database (AIST Dance DB) の映像に対して機械学習ライブラリでボディトラッキングをかけて、手の位置にパーティクルを表示しています
手でつんつんできるアニメーション
SYMさん @hyappy717 のアニメーションをwebカメラ連携で手で触ったりツンツンできるようにしてみました！🤗
— レオナ (@reona396) September 2, 2021
ぜひ遊んでみてください🙌#p5js #HandsfreeJS #プログラミング #creativecoding #OpenProcessing #NEORT
OpenProcessing :https://t.co/OH5yT96J2y
NEORT :https://t.co/uC2RDqZiB8 pic.twitter.com/83WbRDa9XJ
SYMさん @hyappy717 のインタラクティブアニメーション https://twitter.com/hyappy717/status/1404416312282017798 にハンドトラッキングを加えて手でつんつんできるようにした作品
つんつんしたり、パンチしたり、押しつぶしたりできます！
マウス操作、カーソルの動き
インタラクティブ水彩絵の具
ジェネラティブな模様を自動でも手動でも描ける作品をつくりました！
— レオナ (@reona396) April 28, 2021
クリックやタップで遊んでみてね🎨#Processing #p5js #プログラミング #dailycoding #generative #creativecoding #OpenProcessing #NEORT
OpenProcessing :https://t.co/WlCzDqvvLr
NEORT :https://t.co/CGBsvaN3C9 pic.twitter.com/524kvEA296
水彩絵の具のような質感のアニメーションで、ぐにゃぐにゃとジェネラティブ(生成的)に模様が描かれます
クリックしたりドラッグしたりすることで、自分でも模様を描くことができます
カーソルについてくる棒人間
マウスカーソルの位置についていく手書き風棒人間のインタラクションをp5.jsで作ってみました！
— レオナ (@reona396) January 7, 2023
インタラクティブな動きが加わるとやっぱり楽しいですね！
OpenProcessinghttps://t.co/OebqMttfao
NEORThttps://t.co/4JfHd0xjzT#p5js #creativecoding #interactive #dailycoding pic.twitter.com/WmnQGAGhZc
らくがき風の棒人間がマウスカーソルについてくるインタラクティブアニメーション
紙に描かれたようなビジュアルにこだわりました。「デジタルでアナログ絵っぽい質感を表現する」は静止画や動画でもできると思いますが、このようにインタラクティブな表現はクリエイティブコーディングならではの表現だと思っています
魔法少女変身インタラクション
p5.jsで魔法少女の変身みたいなインタラクションを作りました！
— レオナ (@reona396) October 4, 2021
マウスの動きで変身します！！
【魔法少女インタラクション】
OpenProcessing :https://t.co/mqigKx8c9s
NEORT :https://t.co/ZacKUV7hUJ#p5js #プログラミング #dailycoding #creativecoding #OpenProcessing #NEORT pic.twitter.com/oqCFCkZ14F
マウスカーソルの縦の動きに連動して、普通の女の子が魔法少女に変身する様子を表現しました
体を囲むキラキラを立体的な動きに見せるように工夫しました
変身後の背景色をグラデーションにしてキャラクターのカードのようなリッチな見た目を表現しました
寿司インタラクション
p5.js新作です。#OpenProcessing のCoding Challenge "Emoji Madness" に「魚のemojiにご飯をぶつけると寿司になる」というよくわからないスケッチを投稿しました。#Processing #p5js #NEORT
— レオナ (@reona396) October 30, 2019
generate 寿司
OpenProcessing : https://t.co/d72vYCs6nS
NEORT :https://t.co/zbPOGWfIMo pic.twitter.com/Pnjv2LepnD
魚のemojiが泳いでいるところに白ごはんのカーソルをぶつけると寿司になるインタラクション🍣🍣🍣
カーソルから花が咲きまくるカーソルインタラクション
p5.js新作投稿！
— レオナ (@reona396) August 5, 2019
p5.funcと写真素材のパワーで華やかに！ドラッグするとそこからも咲きます🌼#Processing #p5js #generative #creativecoding #OpenProcessing
Flowers_quarticOut - OpenProcessing https://t.co/Kl7WsLDn6u pic.twitter.com/imtKvjOfTy
実写の花がぶわーーーっと咲きまくるアニメーション
放置していても咲きまくるのですが、鑑賞者がマウスでクリックしたりドラッグしてもそこから咲きまくります
らくがきのおともだち
p5.js作品新作投稿
— レオナ (@reona396) May 29, 2019
「ただの子どもの落書きだと思ってたんです。あの夜までは…」#Processing #p5js #generative #creativecoding #OpenProcessing #NEORT
His/Her FRIEND - OpenProcessinghttps://t.co/JWi79TXGUZ
His/Her FRIEND - NEORThttps://t.co/ob9ITp3OGV pic.twitter.com/r8HWq2COD9
家の壁にらくがきされた風の顔の絵ですが、マウスカーソルを動かすと…
ホラーっぽいことがしたくてつくったインタラクションです
マイク入力
ハチャメチャほめてくれるマシーン
こんな感じでどんなことでもハチャメチャにほめてくれます pic.twitter.com/UFQOuPw98N
— レオナ (@reona396) January 18, 2019
マイクにむかって何かしゃべるとハチャメチャにほめてくれます！！！
パワーレンジャー英会話教室
p5.jsとp5.speechで音声合成と音声認識 : だらっと学習帳https://t.co/knboCaMDmE#Processing アドベントカレンダー参加記事です！音声認識と音声合成で日本の #スーパー戦隊 の名前を言うとアメリカでは何というシリーズ名か音声でも答えてくれる英会話教室を作りました！ #PowerRangers #p5js pic.twitter.com/0CMmdJYNAJ
— レオナ (@reona396) December 18, 2019
マイクにむかって日本語でスーパー戦隊のタイトルを言うと音声認識され、パワーレンジャー版のタイトルを音声合成で返してくれるインタラクション
翻訳についてはソースコード内にお手製の対応リストを持っています
AR
AR御札
鬼め！拡張現実の御札をくらえっ！
— レオナ (@reona396) April 19, 2023
p5.jsとp5.simpleARでエフェクト付きの御札を作ってみたよ！
Bad monster! I'll defeat you with an augmented reality talisman!
I made an effected paper talisman with p5.js and p5.simpleAR!#p5js #creativecoding #p5simpleAR pic.twitter.com/3cIYF4WFdI
カメラにかざすとかっこいいエフェクトが出てくる御札
御札にはARマーカーを印刷してあり、ARマーカーの位置に合わせてエフェクトが表示されます
プロジェクションマッピング
レストランのプロジェクションマッピング
都内の某レストランでプロジェクションマッピングのお仕事をさせていただきました！アニメーションサイドも制御サイドも #Processing 製です！(準備中の所を撮影させていただきました。SNS掲載許可もありがとうございます…！！) pic.twitter.com/E0dAMswbWU
— レオナ (@reona396) June 13, 2019
都内の某レストランで #Processing 製プロジェクションマッピングのお仕事をさせていただいた件、動画でもどうぞ！好評だった金魚のアニメーションです。 pic.twitter.com/DyAy8vSldq
— レオナ (@reona396) June 14, 2019
都内の某レストランで #Processing 製プロジェクションマッピングのお仕事をさせていただいた件、動画でもどうぞ！こちらは幾何学模様なアニメーションです。先ほどの金魚のアニメーションと同じ所に投影していますが、QRコード読み込みで切り替えられるしくみです。制御もProcessingを活用しました。 pic.twitter.com/ioxA3VIu2F
— レオナ (@reona396) June 14, 2019
都内の某レストランで #Processing 製プロジェクションマッピングのお仕事をさせていただいた件、こちらはテーブルと椅子のお部屋です。なんと部屋の壁紙をパーティーの主催者が自由に決められるシステム！スマホからお料理に合わせた壁紙に変更できます。(こちらも準備中に撮影させていただきました) pic.twitter.com/NEffIjUfbB
— レオナ (@reona396) June 14, 2019
レストランのカウンターや壁に対するプロジェクションマッピング
パーティーの主催者さんにQRコードを印刷した紙をお渡ししておき、スマホからそのコードを読み込んでいただくことでビジュアルを切り替えられるしくみ。お料理や進行に合わせて壁紙などががらっと変えられます！
今後もインタラクティブで楽しい作品をたくさん作っていきたいです！
もしもインタラクション関係でお手伝いできることがありましたらお気軽にお声がけください！！
X(Twitter)▼
https://twitter.com/reona396
Instagram▼
https://www.instagram.com/reona396_artworks/
Processingとp5.jsとクリエイティブコーディングが大好きです。 めちゃくちゃ元気！