クールなビートを刻め!DJドラムマシンを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)
-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>
■サウンドをロードする
あらかじめサウンドを用意してありますので、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.ループするようにしよう
繰り返し再生されるようにしてみましょう。
■(★★★)課題4.パッドを光らせよう
今のどのあたりを再生しているのかわかりづらい問題があります。
現在の拍数のパッドを光らせて、現在の拍数がわかるように演出を強化してみましょう。
■(★☆☆)課題5.キレをよくする
例えばvoiceなどは音が長い分、続けて入力すると音が重なってキレが悪くなってしまいます。
音を鳴らす時、前回の音を切ってあげることでキレを良くすることができます。
voice.stop();
voice.play();
■オリジナルのビートメーカーに仕上げよう
音を差し替えればオリジナルのビートメーカーになりますね。
ピアノのドレミを入れてあげればメロディメーカーにもなりそうです。
■完成コード
以下は完成済みのコードが欲しい方専用です。
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか?