p5.jsでビジュアルプログラミングを試す

noteではご無沙汰しております。木村です。

noteの記事は書いていませんでしたが、先日の技術書典で「Three.jsとTensorFlow.jsでモーションキャプチャゲームを作る本」を売っていたりと活動はしていました。今後はマイルストーンは技術書典にしつつ、その途中経過をnoteにも書いていこうかと考えている次第です。（続くかはわかりません…）

さて、次の春の技術書典では、プロジェクションマッピング本を作りたいなと思っています。どういうのを作ろうかなあと思っていたところ、矢野がチームラボボーダレスに行ってきて、カフェで皿から植物生えてきたよと言っていまして、あーそれおもろいやん、ということで、そんな感じの画像認識して動的にプロジェクションマッピングするようなの作っていきたいなーと現時点では思っています。

p5.js

GrandVJとかツールでプロジェクションマッピングを作る作り方もよく見るのですが、動的に作るのだからビジュアルプログラミングかなあということでProcessingを試そう。と思って本屋に行ったら、「Generative Design with p5.js」という本があまりにきれいで思わずこちらを買ってしまい、今日はp5.jsを試してみました。（今日は弊社もくもく会を開催しております。）

Generative Design with p5.js　［p5.js版ジェネラティブデザイン］ —ウェブでのクリエイティブ・コーディング

p5.jsはProcessingをJavaScriptに移植したようなものです。ビジュアルプログラミングのための言語ですね。いわゆるデジタルアート作品みたいのを作れます。

home | p5.js

特になんの解説もせず、今日作ったものを貼っていきましょう。p5.jsは公式サイトにp5 Editorというオンラインエディタがあって、シェアもできちゃうので公開が楽です。

作品1号：もじゃもじゃ

https://editor.p5js.org/atskimura/sketches/azmWPIopF

Webカメラで自分を写すと、ちょっと加工した自分を表示して、髪の毛をもじゃもじゃさせます。暗いところをもじゃもじゃさせているので、目と黒いTシャツももじゃもじゃしてますね。皿から植物的なのを目指した感じが出ているでしょうか。

作品2号：音でもじゃもじゃ

https://editor.p5js.org/atskimura/sketches/xvb4FV7kL

マイク入力の音声波形を使って髪の毛を実現しています。騒がしくすると髪の毛がよりもじゃもじゃします。

作品3号：文字ダンス

https://editor.p5js.org/atskimura/sketches/n2vfGssbD

動画を加工するのはちょっと応用的な感じなので、初めからそれはおかしいんじゃないかと、普通なものを作りたくなりましたので…
曲を再生してマイクで歌声を音声認識して歌詞を流したりしたらおもしろいいんじゃないのかなー。これは無料音源に「吾輩は猫である」ですが…

音源はこちら↓からいただきました。

フリーBGM素材「Catch the future」試聴ページ｜フリーBGM DOVA-SYNDROME

おわりに

本日はちょっと遊んだだけですが、なんかちょっとした科学館にあるインタラクティブ作品なんかは作れちゃうのかもしれませんね。

これをプロジェクションマッピングするには射影変換とかしないといけないので果たしてできるのかは知らないのですが、引き続きトライしていきたいと思います。