FumiSA

音楽制作が趣味で、プログラミングは自己流です。 制作物の振り返りを兼ねて記述していこう…

FumiSA

音楽制作が趣味で、プログラミングは自己流です。 制作物の振り返りを兼ねて記述していこうと思います。

  • p5.jsでシンセサイザーを自作

    p5.jsを使用して、音楽演奏が可能なソフトウェアシンセサイザーを制作します。これはその開発記録です。

  • 固定された記事

p5.jsでシンセサイザーを作る 第0話　完成品から公開

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。 私は、ものづくりが好きです。趣味で楽器演奏もしているので、音楽も好きです。 しかし、プログラミングも楽器演奏も、エンジョイ勢です。 そんな私でも、プログラミングと音楽演奏を同時に楽しみたいと思ったのがこの記事の発端です。決して技術力があるわけでもなく、音楽センスがあるわけでもありませんが、開発記録を残していきたいと思います。 基本的な記述方法から、ロジックまで、自分なりに考

FumiSA

    • p5.jsでシンセサイザーを作る 第21話 ツマミを使ったコントロール

      Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 開発の大詰めです。今までパーツを作り、音を出して、パラメータの指定をしてきましたが、実際に演奏するためのインターフェースと発音の機構を一つにまとめる段階にきました。 開発日記のクライマックスですね。 長くなりますが、ご容赦ください。 今回使うコードPCのキーボード

      FumiSA

      • p5.jsでシンセサイザーを作る お知らせ p5.jsのリファレンスがリニューアルしました。

        ここまでp5.jsとp5.soundライブラリを使ったソフトシンセの開発日記を書いてきましたが、公式のWEBサイトが大幅にリニューアルしています。 このため、これまで紹介してきたp5.jsとp5.soundライブラリのリファレンスを掲載している公式サイトもすべてリンク先が変更になりました。 自分で気がつく限りのリンク先については説明に差し支えがないように、差し替えを行いました。 フィルターを実装するための第20話からは新しくなったp5.jsのリファレンスを参照するようになっ

        FumiSA

        • p5.jsでシンセサイザーを作る 第20話 フィルター

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 今回使うコード前回の続きです。このコードではキーボードを使って演奏ができる。それから、ADSRによるエンベロープができる様になっています。 ここにローパスフィルターを追加していきます。 let keySize = 50; // キーのサイズlet keyTop =

          FumiSA
        • 固定された記事

        p5.jsでシンセサイザーを作る 第0話　完成品から公開

        FumiSA

        • p5.jsでシンセサイザーを作る 第21話 ツマミを使ったコントロール

          FumiSA

        • p5.jsでシンセサイザーを作る お知らせ p5.jsのリファレンスがリニューアルしました。

          FumiSA

        • p5.jsでシンセサイザーを作る 第20話 フィルター

          FumiSA

        マガジン

        • p5.jsでシンセサイザーを自作
          23本

        記事

          p5.jsでシンセサイザーを作る 第19話 エンベロープ

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 音の余韻です前回、キーボードによる演奏がある程度できる様になりましたので、ここからは楽器としての完成度を上げるフェーズになります。 エンベロープを実装していくことにします。これは音の余韻を設定するための機能で、シンセサイザーには欠かせない要素になります。 今回使うコ

          FumiSA

          p5.jsでシンセサイザーを作る 第19話 エンベロープ

          FumiSA

          p5.jsでシンセサイザーを作る 第18話 PCのキーボードで演奏する

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 PCのキーボードで演奏するp5.soundを使って音階の設定を行い、マウスクリックで奏でるところまできました。今回は操作をPCのキーボードに割り当てます。 第17話のコードを記述前回の記事から話がつながっているので、ここまでつくってきたコードを再掲します。ここから、

          FumiSA

          p5.jsでシンセサイザーを作る 第18話 PCのキーボードで演奏する

          FumiSA

          p5.jsでシンセサイザーを作る 第1７話 p5.soundで音階をつける方法

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 p5.soundで音階を奏でるp5.soundを使って最低限、音が出ることは確認できました。今回はドレミファソラシドーと言う音階をつけるようにしていきます。 キーを配置する 押されたキーに応じて音階を設定する 発音する このような流れになります。 キーを配置

          FumiSA

          p5.jsでシンセサイザーを作る 第1７話 p5.soundで音階をつける方法

          FumiSA

          p5.jsでシンセサイザーを作る 第16話 p5.sound 発音のバグを探す！なおす！

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 前回、やっと音が出ました。が。。ようやく音を出すことに成功しました。こちらがそのコードになります。 let keySize = 50let keyTop = keySize / 1.4;let topSize = 7;let keyX = 50;let keyY =

          FumiSA

          p5.jsでシンセサイザーを作る 第16話 p5.sound 発音のバグを探す！なおす！

          FumiSA

          p5.jsでシンセサイザーを作る 第15話 p5.soundの魅力！ やっと音が出た！

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 p5.soundを使用した音の出し方この記事では、p5.soundを使って最低限の発音をするまでを記述していきます。 取りあえず単一のキーを作る オシレータを設定する 実際に発音してみる 取りあえず単一のキーを作るマウスがクリックされた時に発音できるようにキー

          FumiSA

          p5.jsでシンセサイザーを作る 第15話 p5.soundの魅力！ やっと音が出た！

          FumiSA

          p5.jsでシンセサイザーを作る 第14話 p5.soundの魅力！

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 いよいよ音を出しますこれまでの日記では、p5.jsを使って、シンセサイザーのパーツを制作、配置する方法を振り返しました。 ここからは、いよいよ音を出す。発音の機構について考えていきます。 この記事では基本的なシンセエンジンに使うp5.soundと言うライブラリの概要に

          FumiSA

          p5.jsでシンセサイザーを作る 第14話 p5.soundの魅力！

          FumiSA

          p5.jsでシンセサイザーを作る 第13話 キーを配置する

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 キーを配置します前回はノブの配置ができましたので、次はキー（キーボード）を配置します。 とりあえずキーを一つだけ描画する第５話で作成したキーのソースを改変して、複数のパーツを配置できるようにしていきます。 let keySize = 50; // キーのサイズle

          FumiSA

          p5.jsでシンセサイザーを作る 第13話 キーを配置する

          FumiSA

          p5.jsでシンセサイザーを作る 第12話 配列を使ってノブを配置する

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 ノブを配置しますシンセサイザー部分のノブを並べるセクションについて書いていきます。 メインになる四つのノブを配置する部分です。 とりあえずノブを一つだけ描画する第４話で作成したノブのソースを改変して、複数のパーツを配置できるようにしていきます。 let knobX

          FumiSA

          p5.jsでシンセサイザーを作る 第12話 配列を使ってノブを配置する

          FumiSA

          p5.jsでシンセサイザーを作る 第11話 関数を作ってコードを整理する

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 前回までに、ノブ、キー、ボタンなどのパーツ描画に関わるアイデア、それから、p5.jsの基本的なアプローチ方法について記載してきました。ここからは作ったパーツを実際に配置することで、より本格的なプログラミングに進んでいきます。 すみませんこの記事からノブを複数並べる実

          FumiSA

          p5.jsでシンセサイザーを作る 第11話 関数を作ってコードを整理する

          FumiSA

          p5.jsでシンセサイザーを作る 第10話 p5.jsを使ったアプローチと構造

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 この記事はシンセサイザーの開発に関わるアイデアを記述するのが本筋ですが、p5.jsを使ってデジタルアートやゲームプログラミングにも通じるアプローチがあると思い、記述しておこうと思います。 ジャンルが違っても、このようなプログラム言語や開発プロセスの参考になるといいなと

          FumiSA

          p5.jsでシンセサイザーを作る 第10話 p5.jsを使ったアプローチと構造

          FumiSA

          p5.jsでシンセサイザーを作る 第９話　パーツの配置　p5.jsの基本を復習

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 p5.jsの繰り返し処理による複数の図形描画今回は一度、p5.jsの基本記述についておさらいしていきます。まずは円を描画していきます。 円の描画 //円の値let knobX = 100;let knobY = 50;let knobSize = 50;funct

          FumiSA

          p5.jsでシンセサイザーを作る 第９話　パーツの配置　p5.jsの基本を復習

          FumiSA

          p5.jsでシンセサイザーを作る 第８話　ホイール制作の後編

          Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。 シンセサイザーのホイール制作前回のコードと実行結果 前回はfor文を使って目盛が一定の範囲内に描画されるようにすることでホイールを表現しました。 let x = 100;let y = 50;let lineSize = 50;let lineInterval =

          FumiSA

          p5.jsでシンセサイザーを作る 第８話　ホイール制作の後編

          FumiSA