メニュー 閉じる

013. p5.jsでマイク入力からの音を拾って3D空間に描画してみる

012同様にマイクからの音を拾ってボリュームを取得しています。Z軸をタイムラインにして、その時々の音量をBOXの大きさに置き換えました。

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

var mic;

var line_num;
var box_num;

var px, py, pz;

var eyesetx;
var eyesety;
var eyesetz;

var camsetx;
var camsety;
var camsetz;

var targetx;
var targety;
var targetz;

var offsetx;
var offsety;
var offsetz;

var stx, sty, stz;
var enx, eny, enz;

var lines = [];
var boxes = [];

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight, WEBGL);
	colorMode (RGB, 256);
	background (0);

	mic = new p5.AudioIn ();
	mic.start ();

	line_num = 200;
	box_num = 220;

	eyesetx = width / 2.0;
	eyesety = height / 2.0;
	eyesetz = 0.0;

	camsetx = width / 2.0;
	camsety = height / 2.0;
	camsetz = 0.0;

	offsetx = width / 2.0;
	offsety = height / 2.0;
	offsetz = 0.0;

	translate (offsetx, offsety, offsetz);

	px = 0.0
	py = 0.0;
	pz = 0.0;

}

function draw () {

	background (0);

	ambientLight (102, 102, 102);

	pz -= 10.0;

	lines.push (new LineObject (px, py, pz));

	if (lines.length > line_num) {
		lines = subset (lines, lines.length - (line_num - 1), line_num);
	}

	if (lines.length > 80){

		targetx = -(mouseX - offsetx) * 2.0;
		targety = -(mouseY - offsety) * 2.0;

		eyesetx += (targetx - eyesetx) * 0.082;
		eyesety += (targety - eyesety) * 0.082;
		eyesetz = lines[lines.length - 80].pz;

		camsetx = lines[lines.length - 20].px;
		camsety = lines[lines.length - 20].py;
		camsetz = lines[lines.length - 20].pz;


		camera (eyesetx, eyesety, eyesetz,
				camsetx, camsety, camsetz,
				0.0, 1.0, 0.0);

		for (var i = 0; i < lines.length - 1; i++) {
			if (i > 0) {
				stroke (100);
				strokeWeight (0.2);
				noFill ();
				stx = lines[i].px;
				sty = lines[i].py;
				stz = lines[i].pz;
				enx = lines[i - 1].px;
				eny = lines[i - 1].py;
				enz = lines[i - 1].pz;
				beginShape ();
				vertex (stx - 10, sty, stz);
				vertex (enx - 10, eny, enz);
				vertex (enx + 10, eny, enz);
				vertex (stx + 10, sty, stz);
				endShape ();
			}
		}

		var volume = mic.getLevel ();

		for (var i = 0; i < 6; i++) {
			if (volume > 0.06) {
				var c = color (random (256), random (256), random (256));
				var box_x = random (-volume * 100, volume * 100);
				var box_y = random (-volume * 100, volume * 100);
				var box_w = random (-volume * 400, volume * 400);
				var box_h = random (-volume * 400, volume * 400);
				var box_d = random (-volume * 400, volume * 400);
				boxes.push (new BoxObject (px + box_x, py + box_y, pz, box_w, box_h, box_d, c));
			}
		}

		for (var i = 0; i < boxes.length; i++) {
			boxes[i].render ();
		}

		if (boxes.length > box_num) {
			for (var i = 0; i < 6; i++) {
				boxes = subset (boxes, boxes.length - (box_num - 1), box_num);
			}
		}

	}
	
}

function LineObject (ipx, ipy, ipz) {

	this.px = ipx;
	this.py = ipy;
	this.pz = ipz;

}

function BoxObject (x, y, z, sx, sy, sz, c) {

	var box_sizex = sx;
	var box_sizey = sy;
	var box_sizez = sz;
	var box_locx = x;
	var box_locy = y;
	var box_locz = z;

	var col = c;

	this.render = function () {

		fill (col);
		stroke (255);
		strokeWeight (0.2);

		push ();
		translate (box_locx, box_locy, box_locz);
		box (box_sizex, box_sizey, box_sizez);
		pop ();

	}

}

 

Posted in p5.js , processing