プログラミング de 落描き – ページ 825 – クリエイティブ・コーディングによる生成物とソース

2018年2月11日2018年2月10日

音の可視化3D openFrameworks

[ Video ]

[ About ]
昨日の動画のやつを改造して、3Dのオブジェクトにしてみました。

[ 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;
	ofLight light;
	ofImage note;
	ofSoundPlayer sound;

	vector<float> fft_smoothed;
	vector<vector<float>> log;
	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;

ofLight light;

ofImage note;

ofSoundPlayer sound;

vector<float> fft_smoothed;

vector<vector<float>> log;

int n_bands_to_get;

};

#include "ofApp.h"

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

	ofSetFrameRate(60);
	ofBackground(0);
	ofSetWindowTitle("Insta");

	ofEnableDepthTest();

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

	this->n_bands_to_get = 64;

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

	this->light.setPosition(ofVec3f(0, 0, 1024));
	this->light.enable();
}

//--------------------------------------------------------------
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];
		}
	}

	log.push_back(this->fft_smoothed);
	if (log.size() > 10) {

			this->log.erase(this->log.begin());
	}
}

//--------------------------------------------------------------
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()) {

		float radius = 80;

		for (int l = this->log.size() - 1; l > -1 ; l--)
		{
			for (int i = 0; i < this->n_bands_to_get; i++) {

				float deg = i * (360.f / this->n_bands_to_get);
				float height = this->log[l][i] * 50 * i / 3;

				float x = radius * cos(deg * DEG_TO_RAD);
				float y = radius * sin(deg * DEG_TO_RAD);
				ofVec3f point(x, y, height / 2);

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

				ofDrawBox(point, 5, 5, height);
			}

			radius += 8;
		}
	}

	this->cam.end();
}

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

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(60);

ofBackground(0);

ofSetWindowTitle("Insta");

ofEnableDepthTest();

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

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

this->sound.play();

this->n_bands_to_get = 64;

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

this->fft_smoothed.push_back(0);

}

this->light.setPosition(ofVec3f(0, 0, 1024));

this->light.enable();

}

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

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];

}

log.push_back(this->fft_smoothed);

if (log.size() > 10) {

this->log.erase(this->log.begin());

}

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

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()) {

float radius = 80;

for (int l = this->log.size() - 1; l > -1 ; l--)

{

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

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

float height = this->log[l][i] * 50 * i / 3;

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

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

ofVec3f point(x, y, height / 2);

ofColor line_color;

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

ofSetColor(line_color);

ofDrawBox(point, 5, 5, height);

}

radius += 8;

}

this->cam.end();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2018年2月10日2018年2月9日

音の可視化 openFrameworks

[ 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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2018年2月9日2018年2月8日

再帰で立方体 openFrameworks

[ Video ]

[ About ]
昨日の「再帰で四角」を3Dにしてみました。level変数によって高さが決まるので、面積の大きい四角形は高さが低く、面積の小さい四角は高さが高く描写されています。

フレーム数で伸びるようにしたので、ニョキっと感が出て良いと思います。

[ Source ]

#pragma once
#include "ofMain.h"
#include "RecuRect.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;
	ofLight light;
	RecuRect r_rect;
};

#pragma once

#include "ofMain.h"

#include "RecuRect.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;

ofLight light;

RecuRect r_rect;

};

#include "ofApp.h"

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

	ofEnableDepthTest();
	ofEnableLighting();
	ofNoFill();
	this->light.setPosition(ofVec3f(0, 0, 1024));
	this->light.enable();
}

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

	if (ofGetFrameNum() % 180 == 0) {

		ofSetColor(ofRandom(255), ofRandom(255), ofRandom(255));
		this->r_rect = RecuRect(5, ofVec2f(0, 0), 720, true);
	}

	this->r_rect.update();
}

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

	this->cam.begin();
	ofRotate(ofGetFrameNum() * 0.25);

	ofNoFill();
	ofDrawRectangle(ofVec2f(-ofGetWidth() / 2, -ofGetHeight() / 2), ofGetWidth(), ofGetHeight());
	this->r_rect.draw();

	this->cam.end();
}

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

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(60);

ofBackground(255);

ofSetWindowTitle("Insta");

ofEnableDepthTest();

ofEnableLighting();

ofNoFill();

this->light.setPosition(ofVec3f(0, 0, 1024));

this->light.enable();

}

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

void ofApp::update() {

if (ofGetFrameNum() % 180 == 0) {

ofSetColor(ofRandom(255), ofRandom(255), ofRandom(255));

this->r_rect = RecuRect(5, ofVec2f(0, 0), 720, true);

}

this->r_rect.update();

}

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

void ofApp::draw() {

this->cam.begin();

ofRotate(ofGetFrameNum() * 0.25);

ofNoFill();

ofDrawRectangle(ofVec2f(-ofGetWidth() / 2, -ofGetHeight() / 2), ofGetWidth(), ofGetHeight());

this->r_rect.draw();

this->cam.end();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

#pragma once
#include "ofMain.h"

class RecuRect
{
public:
	RecuRect();
	RecuRect(int level, ofVec2f location, float size, bool origin = false);
	~RecuRect();

	void update();
	void draw();
private:
	int level;
	ofVec2f location;
	float size;
	int type;
	bool origin;
	float height;
	float height_max;

	std::vector<RecuRect> rects;
};

#pragma once

#include "ofMain.h"

class RecuRect

{

public:

RecuRect();

RecuRect(int level, ofVec2f location, float size, bool origin = false);

~RecuRect();

void update();

void draw();

private:

int level;

ofVec2f location;

float size;

int type;

bool origin;

float height;

float height_max;

std::vector<RecuRect> rects;

};

#include "RecuRect.h"

RecuRect::RecuRect() {

}

RecuRect::RecuRect(int level, ofVec2f location, float size, bool origin) {

	this->type = ofRandom(100);

	if (origin || (level > 0 && this->type > 20)) {

		this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x - size / 4, location.y - size / 4), size / 2));
		this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x - size / 4, location.y + size / 4), size / 2));
		this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x + size / 4, location.y - size / 4), size / 2));
		this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x + size / 4, location.y + size / 4), size / 2));
	}

	this->level = level;
	this->location = location;
	this->size = size;
	this->origin = origin;
	this->height = 0;
	this->height_max = -1 * (140 - 20 * level);
}

RecuRect::~RecuRect() {

}

void RecuRect::update() {

	for (int i = 0; i < this->rects.size(); i++) {

		this->rects[i].update();
	}

	if (this->height > this->height_max) {
		this->height -= 3;
	}
}

void RecuRect::draw() {

	for (int i = 0; i < this->rects.size(); i++) {

		this->rects[i].draw();
	}
	
	if (this->type > 60) {

		ofFill();
		ofDrawBox(this->location.x, this->location.y, -this->height / 2, size, size, this->height);
	}
}

#include "RecuRect.h"

RecuRect::RecuRect() {

}

RecuRect::RecuRect(int level, ofVec2f location, float size, bool origin) {

this->type = ofRandom(100);

if (origin || (level > 0 && this->type > 20)) {

this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x - size / 4, location.y - size / 4), size / 2));

this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x - size / 4, location.y + size / 4), size / 2));

this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x + size / 4, location.y - size / 4), size / 2));

this->rects.push_back(RecuRect(level - 1, ofVec2f(location.x + size / 4, location.y + size / 4), size / 2));

}

this->level = level;

this->location = location;

this->size = size;

this->origin = origin;

this->height = 0;

this->height_max = -1 * (140 - 20 * level);

}

RecuRect::~RecuRect() {

}

void RecuRect::update() {

for (int i = 0; i < this->rects.size(); i++) {

this->rects[i].update();

}

if (this->height > this->height_max) {

this->height -= 3;

}

void RecuRect::draw() {

for (int i = 0; i < this->rects.size(); i++) {

this->rects[i].draw();

}

if (this->type > 60) {

ofFill();

ofDrawBox(this->location.x, this->location.y, -this->height / 2, size, size, this->height);

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

月	火	水	木	金	土	日
				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