メニュー 閉じる

027. p5.jsでシンプルなドラムマシンに挑戦してみる

p5.jsではネイティブコードに加えて色んなjsライブラリが用意されています。今回はp5.gibber.jsを用いて、簡単なドラムマシンを作ってみました。左上のドラムパターンをクリックすると、それが反映されて再生されます。画面上のイコライザーにも反映されます。

http://www.velvet-number.com/p5_test/test019/

var drum_string;
var fft_size = 256;

var btx01 = 100;
var bty01 = 50;
var btw01 = 100;
var bth01 = 20;

var btx02 = 200;
var bty02 = 50;
var btw02 = 100;
var bth02 = 20;

var btx03 = 300;
var bty03 = 50;
var btw03 = 100;
var bth03 = 20;

var btx04 = 400;
var bty04 = 50;
var btw04 = 100;
var bth04 = 20;

var btx05 = 500;
var bty05 = 50;
var btw05 = 100;
var bth05 = 20;

var bt01_flag = false;
var bt02_flag = false;
var bt03_flag = false;
var bt04_flag = false;
var bt05_flag = false;

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight);

	drum_string = 'x';

	drum = EDrums (drum_string);

	fft = FFT (fft_size);

}

function draw() {

	background (0);
  
	var num_bars = fft_size / 2;
	var bar_width = (width - 1) / num_bars;
	var bar_color = null;
	var value = null;
    
	for (var i = 0; i < num_bars; i++ ) {
		bar_color = color (255, 255, (i / num_bars) * 255);
		stroke (0);
		fill (bar_color);
		value = (fft[i] / 255) * width;
		rect (bar_width * i, height, bar_width, -value / 1.4);
	}

	rectMode (CENTER);
	if (bt01_flag == true) {
		fill (255);
	} else {
		noFill ();
	}
	stroke (255);
	rect (btx01, bty01, btw01, bth01);
	if (bt01_flag == true) {
		fill (0);
	} else {
		fill (255);
	}
	noStroke ();
	textSize (12);
	textAlign (CENTER, CENTER);
	text ("Kick", btx01, bty01);

	rectMode (CENTER);
	if (bt02_flag == true) {
		fill (255);
	} else {
		noFill ();
	}
	stroke (255);
	rect (btx02, bty02, btw02, bth02);
	if (bt02_flag == true) {
		fill (0);
	} else {
		fill (255);
	}
	noStroke ();
	textSize (12);
	textAlign (CENTER, CENTER);
	text ("Snare", btx02, bty02);

	rectMode (CENTER);
	if (bt03_flag == true) {
		fill (255);
	} else {
		noFill ();
	}
	stroke (255);
	rect (btx03, bty03, btw03, bth03);
	if (bt03_flag == true) {
		fill (0);
	} else {
		fill (255);
	}
	noStroke ();
	textSize (12);
	textAlign (CENTER, CENTER);
	text ("Close Hihat", btx03, bty03);

	rectMode (CENTER);
	if (bt04_flag == true) {
		fill (255);
	} else {
		noFill ();
	}
	stroke (255);
	rect (btx04, bty04, btw04, bth04);
	if (bt04_flag == true) {
		fill (0);
	} else {
		fill (255);
	}
	noStroke ();
	textSize (12);
	textAlign (CENTER, CENTER);
	text ("Open Hihat", btx04, bty04);

	rectMode (CENTER);
	if (bt05_flag == true) {
		fill (255);
	} else {
		noFill ();
	}
	stroke (255);
	rect (btx05, bty05, btw05, bth05);
	if (bt05_flag == true) {
		fill (0);
	} else {
		fill (255);
	}
	noStroke ();
	textSize (12);
	textAlign (CENTER, CENTER);
	text ("Clear", btx05, bty05);

}

function mousePressed () {

	if (mouseX > btx01 - btw01 / 2 && mouseX < btx01 + btw01 / 2 && mouseY > bty01 - bth01 / 2 && mouseY < bty01 + bth01 / 2) {
		bt01_flag = true;
		drum.kill ();
		drum_string += 'x';
		drum = Drums (drum_string);
	}

	if (mouseX > btx02 - btw02 / 2 && mouseX < btx02 + btw02 / 2 && mouseY > bty02 - bth02 / 2 && mouseY < bty02 + bth02 / 2) {
		bt02_flag = true;
		drum.kill ();
		drum_string += 'o';
		drum = Drums (drum_string);
	}

	if (mouseX > btx03 - btw03 / 2 && mouseX < btx03 + btw03 / 2 && mouseY > bty03 - bth03 / 2 && mouseY < bty03 + bth03 / 2) {
		bt03_flag = true;
		drum.kill ();
		drum_string += '*';
		drum = Drums (drum_string);
	}

	if (mouseX > btx04 - btw04 / 2 && mouseX < btx04 + btw04 / 2 && mouseY > bty04 - bth04 / 2 && mouseY < bty04 + bth04 / 2) {
		bt04_flag = true;
		drum.kill ();
		drum_string += '-';
		drum = Drums (drum_string);
	}

	if (mouseX > btx05 - btw05 / 2 && mouseX < btx05 + btw05 / 2 && mouseY > bty05 - bth05 / 2 && mouseY < bty05 + bth05 / 2) {
		bt05_flag = true;
		drum.kill ();
		drum_string = 'x';
		drum = Drums (drum_string);
	}
	
}

function mouseReleased () {

	bt01_flag = false;
	bt02_flag = false;
	bt03_flag = false;
	bt04_flag = false;
	bt05_flag = false;

}

 

 

Posted in p5.js , processing