見出し画像

クールなビートを刻め！DJドラムマシンを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

クミタテ式ゲームプログラミングドリル（Processing / p5js）

-DJ気分でビートを刻もう

今回作るのはゲームではなく楽器です。
ドラムマシンと呼ばれる、HipHop DJで使用される電子楽器を製作していきます。
サウンドに関わる技術的なポイントを押さえて、自作ゲームなどにも活かしてみてください。音ゲーを作るヒントにもなります。
なお、今回はProcessing Javaは非対応となっています。

光っているところで音が鳴る仕組み

デモアプリはこちらから。https://openprocessing.org/sketch/1708482

- クミタテ式プログラミングドリルとは？

クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解（通称、図解くん）を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習するテキスト教材型のプログラミング教材です。

- 動画を見ながら学習する

テキスト教材の補助として動画を作成しています。クミタテ式が初めての方は動画と一緒に学習すると良いでしょう。
動画とこのテキスト教材は期間限定で無料公開しています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。

- 開発環境

OpenProcessingを使ったp5js、Processingを環境を前提としています。

■[ここからスタート！]画面のサイズを決める

画面サイズを600x400の固定サイズにしましょう。

■背景を黄色で塗りつぶし続ける

drawの中で背景を黄色で塗りつぶし続けましょう。drawの中で毎回背景を塗りつぶすことでアニメーションが実現できます。
（複雑な色として黄色を例にしましたが、もちろん何色でも良いです。）

■サウンドライブラリを読み込む

サウンドを扱うために事前準備としてサウンドライブラリp5Soundを読み込む必要があります。
OpenProcessingの場合は以下をスイッチON。

Processing版p5jsを使っている場合は、以下のコードをindex.htmlに貼り付けて保存しましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.js"></script>
bodyタグの下あたりが混乱しないかもです。

■サウンドをロードする

あらかじめサウンドを用意してありますので、preloadで4つのサウンドを読み込んでください。

function preload(){
  // MP3を扱う宣言
  soundFormats('mp3');
  
  // URLからファイルを読み込み
  kick  = loadSound("https://tentouser.github.io/jsonapi/sounds/kick.mp3");
  snare = loadSound("https://tentouser.github.io/jsonapi/sounds/snare.mp3");
  hat   = loadSound("https://tentouser.github.io/jsonapi/sounds/hat.mp3");
  voice = loadSound("https://tentouser.github.io/jsonapi/sounds/voice.mp3");

  // ボリュームの調整
  kick.setVolume(0.1);
  snare.setVolume(0.1);
  hat.setVolume(0.1);
  voice.setVolume(0.1);
}


■Kickを再生する

きちんとサウンドを再生できるか、マウスクリックでkickを鳴らして確認してみましょう。

function mousePressed(){
  // Safariなどのブラウザによっては必要な処理。音を鳴らす準備をしてくれます。
  userStartAudio();
  kick.play();
}

■パッドを1つだけ表示する

パッド（マス）を1つだけ表示しましょう。

■パッドを32個表示しましょう

パッド（マス）を8x4で敷き詰めていきます。

■譜面を配列で管理する

譜面を配列noteListで管理します。
譜面は、0=なし、1=kick、2=snare、3=hat、4=voiceという情報として扱っていきます。
譜面があるところは色を変えていきます。
配列は以下をサンプルにお使いください。

// p5.js
let noteList = [
  0, 4, 0, 0, 0, 0, 0, 0, 
  0, 0, 3, 0, 0, 0, 3, 0, 
  0, 0, 0, 0, 2, 0, 0, 0, 
  1, 0, 0, 0, 0, 0, 0, 0, 
];

■拍を数えて譜面があればkickを鳴らす

時間を管理する変数tを用意し、tから現在の拍数（beat）を算出します。
beatの位置に譜面があれば、とりあえずkickを鳴らします。
また、マウスクリックでtをリセットします。

■楽器を鳴らすオリジナル命令を作る

楽器を鳴らすオリジナル命令「inst関数」を用意します。
inst関数は引数に1が渡ればkickを、4が渡ればvoiceを鳴らすことを一元的に管理してくれます。

■inst関数を使って譜面通りに鳴らす

先ほど使ってinst関数を使って、kick以外の音を、譜面通りに鳴らしてみましょう。

ここから先は図解くんはありません。
自分で頭を整理して課題に取り組んでみてください。

■（★☆☆）課題1.再生速度をアップしよう

再生速度をあげて爽快感を上げましょう。

■（★★☆）課題2.譜面の入力をしよう

パッドをクリックで譜面を入力できるようにしましょう。
一番上の段はvoiceとして4、一番下の弾はkickとして1を入力できるようにします。

■（★☆☆）課題3.ループするようにしよう

繰り返し再生されるようにしてみましょう。

-ヒント-
実装方法はいろいろありますが、実はある箇所に、2文字追加するだけでループが実装できます。挑戦してみましょう。

■（★★★）課題4.パッドを光らせよう

今のどのあたりを再生しているのかわかりづらい問題があります。
現在の拍数のパッドを光らせて、現在の拍数がわかるように演出を強化してみましょう。

■（★☆☆）課題5.キレをよくする

例えばvoiceなどは音が長い分、続けて入力すると音が重なってキレが悪くなってしまいます。
音を鳴らす時、前回の音を切ってあげることでキレを良くすることができます。

voice.stop();
voice.play();

■オリジナルのビートメーカーに仕上げよう

音を差し替えればオリジナルのビートメーカーになりますね。
ピアノのドレミを入れてあげればメロディメーカーにもなりそうです。

例えば生活音などを用いることで馴染みも生まれ、非音楽的な要素から音楽が生まれる感じがクールでもあったりします。世界で最も売れたバンドとも言われるピンクフロイドのMoneyの冒頭などが特徴的です。
https://www.youtube.com/watch?v=Cg5imldhNKc

■完成コード

以下は完成済みのコードが欲しい方専用です。

ここから先は

1,816字

¥ 100

この記事が気に入ったらサポートをしてみませんか？