マガジンのカバー画像

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

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

記事一覧

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
4か月前

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

ここまでp5.jsとp5.soundライブラリを使ったソフトシンセの開発日記を書いてきましたが、公式…

FumiSA
4か月前
5

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
4か月前

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
4か月前
3

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
4か月前
1

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
4か月前

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

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

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
5か月前
3

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
5か月前
10

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
5か月前

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
5か月前
1

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
5か月前

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

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。と…

FumiSA
5か月前
9

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

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