p5.js でドラムマシンを作ろう

資料

• 完成サイト
• デザイン（figma）
• 音色リスト
• スライド

p5.js

• 公式リファレンス
• 公式リファレンス（日本語）

初めから完成まで - Step By Step

静的な部品(setup(){}内)

• STATIC-1. ドラムマシンの背景を描こう！
• STATIC-2. 各操作エリアの背景を描こう！
• STATIC-3. メインエリアの背景を描こう！
• STATIC-4. シーケンスライトの背景を描こう！
• STATIC-5. Volume のテキストを描こう！
• STATIC-6. Tempo のテキストを描こう！
• STATIC-7. Pattern のテキストを描こう！
• STATIC-8. 音色タイトルのテキストを描こう！

動的な部品(draw(){}内)

• DYNAMIC-1. パターンボタン
• DYNAMIC-2. Volume ノブ
• DYNAMIC-3_4. テンポ
• DYNAMIC-5. シーケンサーセル
• DYNAMIC-6. シーケンサーのライト
• DYNAMIC-7. 再生ボタン
• DYNAMIC-8. 停止ボタン
• ACTION-LAST. 音を鳴らそう

ブランチ

• main
  • ハンズオン用
• develop
  • 開発
• complete
  • 完成形