記事一覧
p5.jsでシンセサイザーを作る 第21話 ツマミを使ったコントロール
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
開発の大詰めです。今までパーツを作り、音を出して、パラメータの指定をしてきましたが、実際に演奏するためのインターフェースと発音の機構を一つにまとめる段階にきました。
開発日記のクライマック
p5.jsでシンセサイザーを作る お知らせ p5.jsのリファレンスがリニューアルしました。
ここまでp5.jsとp5.soundライブラリを使ったソフトシンセの開発日記を書いてきましたが、公式のWEBサイトが大幅にリニューアルしています。
このため、これまで紹介してきたp5.jsとp5.soundライブラリのリファレンスを掲載している公式サイトもすべてリンク先が変更になりました。
自分で気がつく限りのリンク先については説明に差し支えがないように、差し替えを行いました。
フィルターを実装
p5.jsでシンセサイザーを作る 第20話 フィルター
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
今回使うコード前回の続きです。このコードではキーボードを使って演奏ができる。それから、ADSRによるエンベロープができる様になっています。
ここにローパスフィルターを追加していきます。
p5.jsでシンセサイザーを作る 第19話 エンベロープ
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
音の余韻です前回、キーボードによる演奏がある程度できる様になりましたので、ここからは楽器としての完成度を上げるフェーズになります。
エンベロープを実装していくことにします。これは音の余韻を
p5.jsでシンセサイザーを作る 第1７話 p5.soundで音階をつける方法
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
p5.soundで音階を奏でるp5.soundを使って最低限、音が出ることは確認できました。今回はドレミファソラシドーと言う音階をつけるようにしていきます。
キーを配置する
押されたキ
p5.jsでシンセサイザーを作る 第16話 p5.sound 発音のバグを探す！なおす！
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
前回、やっと音が出ました。が。。ようやく音を出すことに成功しました。こちらがそのコードになります。
let keySize = 50let keyTop = keySize / 1.4;
p5.jsでシンセサイザーを作る 第15話 p5.soundの魅力！ やっと音が出た！
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
p5.soundを使用した音の出し方この記事では、p5.soundを使って最低限の発音をするまでを記述していきます。
取りあえず単一のキーを作る
オシレータを設定する
実際に発音して
p5.jsでシンセサイザーを作る 第14話 p5.soundの魅力！
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
いよいよ音を出しますこれまでの日記では、p5.jsを使って、シンセサイザーのパーツを制作、配置する方法を振り返しました。
ここからは、いよいよ音を出す。発音の機構について考えていきます。
p5.jsでシンセサイザーを作る 第13話 キーを配置する
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
キーを配置します前回はノブの配置ができましたので、次はキー（キーボード）を配置します。
とりあえずキーを一つだけ描画する第５話で作成したキーのソースを改変して、複数のパーツを配置できるよ
p5.jsでシンセサイザーを作る 第12話 配列を使ってノブを配置する
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
ノブを配置しますシンセサイザー部分のノブを並べるセクションについて書いていきます。
メインになる四つのノブを配置する部分です。
とりあえずノブを一つだけ描画する第４話で作成したノブのソー
p5.jsでシンセサイザーを作る 第11話 関数を作ってコードを整理する
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
前回までに、ノブ、キー、ボタンなどのパーツ描画に関わるアイデア、それから、p5.jsの基本的なアプローチ方法について記載してきました。ここからは作ったパーツを実際に配置することで、より本格
p5.jsでシンセサイザーを作る 第10話 p5.jsを使ったアプローチと構造
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
この記事はシンセサイザーの開発に関わるアイデアを記述するのが本筋ですが、p5.jsを使ってデジタルアートやゲームプログラミングにも通じるアプローチがあると思い、記述しておこうと思います。