p5.jsでビジュアルデザイン!コーディングでサウンドビジュアリゼーションを作ろう
p5.jsとp5.soundライブラリを使った、サウンドビジュアリゼーションの作り方をご紹介します。 ブラウザーを...
- p5.js
- コードスニペット
- ビジュアルデザイン
p5.jsとは、ProcessingをJavaScriptで記述できるライブラリです。
そもそもProcessingとは、電子アートとビジュアルデザインを目的としたプログラミング言語(総合開発環境)を指しており、基本的にはJavaで記述します。
Processingを使用すると、図形や文字がなめらかにWeb上で動作するグラフィカルなコードが比較的容易に開発可能です。おもにメディアアートやインタラクティブデザインに活用されています。
しかし、これには専用のビジュアルコーディングエディターが必要となります。
そんなJavaベースのProcessingをJavaScriptに変換することでWeb上での開発を可能としたものがp5.jsです。
HTMLなどで記述する際にJavaScriptを読み込み、そのJavaScriptとしてp5.jsを呼び出して使用します。
p5.jsのライブラリには音声やゲームも取り扱うことができます。特に音声に関してはWebAudioAPIを使用すると複雑なコードになってしまいますが、p5.jsでは安易に扱えます。
・JavaScript
・HTML
・Java