音の可視化 openFrameworks – プログラミング de 落描き

[ Video ]

[ About ]
openFrameworksのexamples>sound>soundPlayFFTExampleを参考に、mp3データから動きをつけてみました。

ofSoundGetSpectrum関数が良い感じの数字を返してくれるぐらいの認識でしかいないので、取得した数字をこねくり回しているだけですが、良い感じではないでしょうか。

ちなみに、コーディング時間よりも圧倒的にフリー素材のBGMを探すのに時間を割かれました…YouTubeの音源素材を拝借しました、素晴らしい時代ですね。

今後、色々と改造していきたいです。

[ Source ]

#pragma once
#include "ofMain.h"

class ofApp : public ofBaseApp {

public:
	void setup();
	void update();
	void draw();

	void keyPressed(int key) {};
	void keyReleased(int key) {};
	void mouseMoved(int x, int y) {};
	void mouseDragged(int x, int y, int button) {};
	void mousePressed(int x, int y, int button) {};
	void mouseReleased(int x, int y, int button) {};
	void windowResized(int w, int h) {};
	void dragEvent(ofDragInfo dragInfo) {};
	void gotMessage(ofMessage msg) {};

	ofEasyCam cam;
	ofImage note;
	ofSoundPlayer sound;
	
	vector<float> fft_smoothed;
	int n_bands_to_get;
};

#pragma once

#include "ofMain.h"

class ofApp : public ofBaseApp {

public:

void setup();

void update();

void draw();

void keyPressed(int key) {};

void keyReleased(int key) {};

void mouseMoved(int x, int y) {};

void mouseDragged(int x, int y, int button) {};

void mousePressed(int x, int y, int button) {};

void mouseReleased(int x, int y, int button) {};

void windowResized(int w, int h) {};

void dragEvent(ofDragInfo dragInfo) {};

void gotMessage(ofMessage msg) {};

ofEasyCam cam;

ofImage note;

ofSoundPlayer sound;

vector<float> fft_smoothed;

int n_bands_to_get;

};

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup() {
	
	ofSetFrameRate(60);
	ofBackground(0);
	ofSetWindowTitle("Insta");

	this->note.load("note.png");
	this->sound.load("Race_Car.mp3");
	this->sound.play();

	this->n_bands_to_get = 120;

	for (int j = 0; j < this->n_bands_to_get; j++) {
			this->fft_smoothed.push_back(0);
	}

	ofSetLineWidth(3);
}

//--------------------------------------------------------------
void ofApp::update() {

	ofSoundUpdate();
	float* val = ofSoundGetSpectrum(this->n_bands_to_get);

	for (int i = 0; i < this->n_bands_to_get; i++) {

		this->fft_smoothed[i] *= 0.96f;
		if (this->fft_smoothed[i] < val[i]) {

			this->fft_smoothed[i] = val[i];
		}
	}
}

//--------------------------------------------------------------
void ofApp::draw() {

	this->cam.begin();

	ofSetColor(200);
	this->note.resize(50, 50);
	this->note.draw(ofVec2f(-(this->note.getWidth() / 2), -(this->note.getHeight() / 2)));

	if (this->sound.getIsPlaying()) {

		ofRotate(ofGetFrameNum() * 0.25);

		float radius = 80;
		for (int i = 0; i < this->n_bands_to_get; i++) {

			float deg = i * (360 / this->n_bands_to_get);
			float height = this->fft_smoothed[i] * 250 * i / 3;

			float x = radius * cos(deg * DEG_TO_RAD);
			float y = radius * sin(deg * DEG_TO_RAD);
			ofVec2f point_1(x, y);

			x = (radius + height) * cos(deg * DEG_TO_RAD);
			y = (radius + height) * sin(deg * DEG_TO_RAD);
			ofVec2f point_2(x, y);

			ofColor line_color;
			line_color.setHsb(255 - deg / 360 * 255, 255, 255);
			ofSetColor(line_color);
			ofDrawLine(point_1, point_2);
		}
	}
	
	this->cam.end();
}

//========================================================================
int main() {

	ofSetupOpenGL(1280, 720, OF_WINDOW);
	ofRunApp(new ofApp());
}

#include "ofApp.h"

//--------------------------------------------------------------

void ofApp::setup() {

ofSetFrameRate(60);

ofBackground(0);

ofSetWindowTitle("Insta");

this->note.load("note.png");

this->sound.load("Race_Car.mp3");

this->sound.play();

this->n_bands_to_get = 120;

for (int j = 0; j < this->n_bands_to_get; j++) {

this->fft_smoothed.push_back(0);

}

ofSetLineWidth(3);

}

//--------------------------------------------------------------

void ofApp::update() {

ofSoundUpdate();

float* val = ofSoundGetSpectrum(this->n_bands_to_get);

for (int i = 0; i < this->n_bands_to_get; i++) {

this->fft_smoothed[i] *= 0.96f;

if (this->fft_smoothed[i] < val[i]) {

this->fft_smoothed[i] = val[i];

}

//--------------------------------------------------------------

void ofApp::draw() {

this->cam.begin();

ofSetColor(200);

this->note.resize(50, 50);

this->note.draw(ofVec2f(-(this->note.getWidth() / 2), -(this->note.getHeight() / 2)));

if (this->sound.getIsPlaying()) {

ofRotate(ofGetFrameNum() * 0.25);

float radius = 80;

for (int i = 0; i < this->n_bands_to_get; i++) {

float deg = i * (360 / this->n_bands_to_get);

float height = this->fft_smoothed[i] * 250 * i / 3;

float x = radius * cos(deg * DEG_TO_RAD);

float y = radius * sin(deg * DEG_TO_RAD);

ofVec2f point_1(x, y);

x = (radius + height) * cos(deg * DEG_TO_RAD);

y = (radius + height) * sin(deg * DEG_TO_RAD);

ofVec2f point_2(x, y);

ofColor line_color;

line_color.setHsb(255 - deg / 360 * 255, 255, 255);

ofSetColor(line_color);

ofDrawLine(point_1, point_2);

}

this->cam.end();

}

//========================================================================

int main() {

ofSetupOpenGL(1280, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

[ Link ]
https://github.com/junkiyoshi/Insta20180209

https://github.com/openframeworks/openFrameworks/tree/master/examples/sound/soundPlayerFFTExample

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30