font – ページ 69 – プログラミング de 落描き

2018年1月31日2018年1月30日

ofTrueTypeFontからPath情報を取得してバラバラにする openFrameworks

[ Video ]

[ About ]
ofTrueTypeFontからPath情報を取得、分解しました。ofPathからmeshは取得出来たのですが、メッシュの大きさが大小バラバラだったので、ResampleしてそれをofTessellatorというクラスを使って作り直すという変？な事をしています。

それっぽいMesh情報が取れた後は、さらにMeshの中にあるFaceを一つづつ取り出して、Noiseと掛け合わせています。

文字は、MonsterHunterが発売され、Hunter×Hunberが連載再開という事で、熱いキーワード「HUNTER」にしてみました。

[ Source ]

#pragma once
#include "ofMain.h"
#include "ofFbo.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;

	ofTrueTypeFont font;
	string words;
	ofPoint words_size;
	vector<ofTTFCharacter> paths;
};

#pragma once

#include "ofMain.h"

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

ofTrueTypeFont font;

string words;

ofPoint words_size;

vector<ofTTFCharacter> paths;

};

#include "ofApp.h"

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

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

	ofSetColor(0, 32, 255);

	this->font.loadFont("fonts/Kazesawa-Bold.ttf", 250, true, false, true);
	this->words = "OTHER";
	this->words_size = ofPoint(this->font.stringWidth(this->words), this->font.stringHeight(this->words));
	this->paths = this->font.getStringAsPoints(this->words);
}

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

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

	this->cam.begin();
	ofRotateX(180);

	for (int p_index = 0; p_index < this->paths.size(); p_index++) {

		vector<ofPolyline> outline = this->paths[p_index].getOutline();
		
		for (int o_index = 0; o_index < outline.size(); o_index++) {

			outline[o_index] = outline[o_index].getResampledBySpacing(30);
			ofMesh mesh;
			ofTessellator t;
			t.tessellateToMesh(outline, ofPolyWindingMode::OF_POLY_WINDING_ODD, mesh);

			vector<ofMeshFace> triangles = mesh.getUniqueFaces();
			for (int i = 0; i < triangles.size(); i++) {

				ofPoint avg = (triangles[i].getVertex(0) + triangles[i].getVertex(1) + triangles[i].getVertex(2)) / 3;
				float noise_value = ofNoise(avg.x * 0.005 - ofGetFrameNum() * 0.05);

				ofMesh draw_mesh;
				ofPoint adjust(-this->words_size.x / 2, this->words_size.y / 2);

				if (noise_value < 0.4){

					adjust += ofPoint(0, 0, 500 * (noise_value - 0.4));
				}
				
				draw_mesh.addVertex(triangles[i].getVertex(0) + adjust);
				draw_mesh.addVertex(triangles[i].getVertex(1) + adjust);
				draw_mesh.addVertex(triangles[i].getVertex(2) + adjust);

				draw_mesh.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");

ofSetColor(0, 32, 255);

this->font.loadFont("fonts/Kazesawa-Bold.ttf", 250, true, false, true);

this->words = "OTHER";

this->words_size = ofPoint(this->font.stringWidth(this->words), this->font.stringHeight(this->words));

this->paths = this->font.getStringAsPoints(this->words);

}

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

void ofApp::update() {

}

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

void ofApp::draw() {

this->cam.begin();

ofRotateX(180);

for (int p_index = 0; p_index < this->paths.size(); p_index++) {

vector<ofPolyline> outline = this->paths[p_index].getOutline();

for (int o_index = 0; o_index < outline.size(); o_index++) {

outline[o_index] = outline[o_index].getResampledBySpacing(30);

ofMesh mesh;

ofTessellator t;

t.tessellateToMesh(outline, ofPolyWindingMode::OF_POLY_WINDING_ODD, mesh);

vector<ofMeshFace> triangles = mesh.getUniqueFaces();

for (int i = 0; i < triangles.size(); i++) {

ofPoint avg = (triangles[i].getVertex(0) + triangles[i].getVertex(1) + triangles[i].getVertex(2)) / 3;

float noise_value = ofNoise(avg.x * 0.005 - ofGetFrameNum() * 0.05);

ofMesh draw_mesh;

ofPoint adjust(-this->words_size.x / 2, this->words_size.y / 2);

if (noise_value < 0.4){

adjust += ofPoint(0, 0, 500 * (noise_value - 0.4));

}

draw_mesh.addVertex(triangles[i].getVertex(0) + adjust);

draw_mesh.addVertex(triangles[i].getVertex(1) + adjust);

draw_mesh.addVertex(triangles[i].getVertex(2) + adjust);

draw_mesh.draw();

}

this->cam.end();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

2017年12月29日2018年3月15日

Insta20171228

[ Video ]

[ About ]
A to Z.

[ Source ]

#pragma once
#include "ofMain.h"
#include "Particle.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 mouseEntered(int x, int y) {};
	void mouseExited(int x, int y) {};
	void windowResized(int w, int h) {};
	void dragEvent(ofDragInfo dragInfo) {};
	void gotMessage(ofMessage msg) {};

	void create_particles(char moji_1, char moji_2);

	char moji_1;
	char moji_2;
	float progress;

	ofTrueTypeFont font;

	vector<Particle> particles;
	int particle_count;
};

#pragma once

#include "ofMain.h"

#include "Particle.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 mouseEntered(int x, int y) {};

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

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

void dragEvent(ofDragInfo dragInfo) {};

void gotMessage(ofMessage msg) {};

void create_particles(char moji_1, char moji_2);

char moji_1;

char moji_2;

float progress;

ofTrueTypeFont font;

vector<Particle> particles;

int particle_count;

};

#include "ofApp.h"

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

	ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

	this->particle_count = 600;
	this->font.loadFont("Kazesawa-Bold.ttf", 450, true, false, true);

	this->moji_1 = '?';
	this->moji_2 = '@';
	this->progress = 0;

	this->create_particles(this->moji_1, this->moji_2);
}

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

	this->progress += 0.05;
	if (this->progress > 2) {
		this->progress = 0;
		this->moji_1 = this->moji_2;
		this->moji_2 = this->moji_1 + 1;
		this->create_particles(this->moji_1, this->moji_2);
	}

	for (int i = 0; i < this->particle_count; i++) {
		this->particles[i].set_progress(this->progress);
		this->particles[i].update();
	}

}

//--------------------------------------------------------------
void ofApp::draw() {
	ofTranslate(ofGetWidth() / 2 - this->font.stringWidth("W") / 2, ofGetHeight() / 2 + this->font.stringHeight("W") / 2);

	for (int i = 0; i < this->particle_count; i++) {
		this->particles[i].draw();
	}
}

//--------------------------------------------------------------
void ofApp::create_particles(char moji_1, char moji_2) {
	
	this->particles.clear();
	this->particles.shrink_to_fit();
	for (int i = 0; i < this->particle_count; i++) {
		this->particles.push_back(Particle());
	}

	ofTTFCharacter char_1_path = this->font.getCharacterAsPoints(moji_1);
	ofTTFCharacter char_2_path = this->font.getCharacterAsPoints(moji_2);
	vector<ofPolyline> outline_1 = char_1_path.getOutline();
	vector<ofPolyline> outline_2 = char_2_path.getOutline();

	int count_1 = this->particle_count / outline_1.size();
	int count_2 = this->particle_count / outline_2.size();


	int particle_index = 0;
	for (int outline_index = 0; outline_index < outline_1.size(); outline_index++) {
		outline_1[outline_index] = outline_1[outline_index].getResampledByCount(count_1);

		vector<ofPoint> vertices = outline_1[outline_index].getVertices();
		for (int vertices_index = 0; vertices_index < vertices.size(); vertices_index++) {
			this->particles[particle_index].set_point_1(vertices[vertices_index]);
			particle_index++;
		}
	}

	//particle_index = 0;
	for (int outline_index = 0; outline_index < outline_2.size(); outline_index++) {
		outline_2[outline_index] = outline_2[outline_index].getResampledByCount(count_2);

		vector<ofPoint> vertices = outline_2[outline_index].getVertices();
		for (int vertices_index = 0; vertices_index < vertices.size(); vertices_index++) {
			this->particles[particle_index].set_point_2(vertices[vertices_index]);		
			particle_index--;
		}
	}
}


//--------------------------------------------------------------
int main() {
	ofSetupOpenGL(720, 720, OF_WINDOW);
	ofRunApp(new ofApp());
}

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(60);

ofBackground(0);

ofSetWindowTitle("Insta");

ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

this->particle_count = 600;

this->font.loadFont("Kazesawa-Bold.ttf", 450, true, false, true);

this->moji_1 = '?';

this->moji_2 = '@';

this->progress = 0;

this->create_particles(this->moji_1, this->moji_2);

}

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

void ofApp::update() {

this->progress += 0.05;

if (this->progress > 2) {

this->progress = 0;

this->moji_1 = this->moji_2;

this->moji_2 = this->moji_1 + 1;

this->create_particles(this->moji_1, this->moji_2);

}

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

this->particles[i].set_progress(this->progress);

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

}

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

void ofApp::draw() {

ofTranslate(ofGetWidth() / 2 - this->font.stringWidth("W") / 2, ofGetHeight() / 2 + this->font.stringHeight("W") / 2);

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

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

}

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

void ofApp::create_particles(char moji_1, char moji_2) {

this->particles.clear();

this->particles.shrink_to_fit();

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

this->particles.push_back(Particle());

}

ofTTFCharacter char_1_path = this->font.getCharacterAsPoints(moji_1);

ofTTFCharacter char_2_path = this->font.getCharacterAsPoints(moji_2);

vector<ofPolyline> outline_1 = char_1_path.getOutline();

vector<ofPolyline> outline_2 = char_2_path.getOutline();

int count_1 = this->particle_count / outline_1.size();

int count_2 = this->particle_count / outline_2.size();

int particle_index = 0;

for (int outline_index = 0; outline_index < outline_1.size(); outline_index++) {

outline_1[outline_index] = outline_1[outline_index].getResampledByCount(count_1);

vector<ofPoint> vertices = outline_1[outline_index].getVertices();

for (int vertices_index = 0; vertices_index < vertices.size(); vertices_index++) {

this->particles[particle_index].set_point_1(vertices[vertices_index]);

particle_index++;

}

//particle_index = 0;

for (int outline_index = 0; outline_index < outline_2.size(); outline_index++) {

outline_2[outline_index] = outline_2[outline_index].getResampledByCount(count_2);

vector<ofPoint> vertices = outline_2[outline_index].getVertices();

for (int vertices_index = 0; vertices_index < vertices.size(); vertices_index++) {

this->particles[particle_index].set_point_2(vertices[vertices_index]);

particle_index--;

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

#pragma once
#include "ofMain.h"

class Particle {
public:
	Particle();
	Particle(ofVec3f point_1, ofVec3f point_2);

	void update();
	void draw();

	void set_point_1(ofVec3f point_1);
	void set_point_2(ofVec3f point_2);
	void set_progress(float value);

	ofVec3f get_location();
private:
	ofVec3f location;
	ofVec3f point_1;
	ofVec3f point_2;

	float progress;

	ofImage img;
};

#pragma once

#include "ofMain.h"

class Particle {

public:

Particle();

Particle(ofVec3f point_1, ofVec3f point_2);

void update();

void draw();

void set_point_1(ofVec3f point_1);

void set_point_2(ofVec3f point_2);

void set_progress(float value);

ofVec3f get_location();

private:

ofVec3f location;

ofVec3f point_1;

ofVec3f point_2;

float progress;

ofImage img;

};

#include "Particle.h"

Particle::Particle() : Particle(ofVec3f(0, 0, 0), ofVec3f(0, 0, 0)) {}

Particle::Particle(ofVec3f point_1, ofVec3f point_2) {
	this->point_1 = point_1;
	this->point_2 = point_2;
	this->location = this->point_1;
	this->progress = 0.f;
	
	int size = 200;
	int r = 55;
	int g = 100;
	int b = 180;

	this->img.allocate(size, size, OF_IMAGE_COLOR);
	unsigned char* pixels = this->img.getPixels().getData();

	for (int x = 0; x < size; x++) {
		for (int y = 0; y < size; y++) {
			float distance = ((size / 2 - x) * (size / 2 - x) + (size / 2 - y) * (size / 2 - y)) / 50.f;
			if (distance == 0) { distance = 0.003; }

			int r_value = r / distance - 3;
			r_value = max(0, min(r_value, 255));

			int g_value = g / distance - 3;
			g_value = max(0, min(g_value, 255));

			int b_value = b / distance - 3;
			b_value = max(0, min(b_value, 255));

			pixels[x * 3 * size + y * 3 + 0] = r_value;
			pixels[x * 3 * size + y * 3 + 1] = g_value;
			pixels[x * 3 * size + y * 3 + 2] = b_value;
		}
	}

	this->img.update();
}

void Particle::update(){
	if (this->progress > 1) {
		this->progress = 1;
	}
	
	ofVec3f gap = this->point_2 - this->point_1;	
	gap = gap * this->progress;

	this->location = this->point_1 + gap;
}

void Particle::draw() {
	if (this->point_1 != ofVec3f(0, 0, 0) || this->point_2 != ofVec3f(0, 0, 0)) {
		this->img.draw(this->location - ofVec3f(100, 100));
	}
}

void Particle::set_point_1(ofVec3f point_1) {
	this->point_1 = point_1;
}

void Particle::set_point_2(ofVec3f point_2) {
	this->point_2 = point_2;
}

void Particle::set_progress(float value) {
	this->progress = value;
}

ofVec3f Particle::get_location() {
	return this->location;
}

#include "Particle.h"

Particle::Particle() : Particle(ofVec3f(0, 0, 0), ofVec3f(0, 0, 0)) {}

Particle::Particle(ofVec3f point_1, ofVec3f point_2) {

this->point_1 = point_1;

this->point_2 = point_2;

this->location = this->point_1;

this->progress = 0.f;

int size = 200;

int r = 55;

int g = 100;

int b = 180;

this->img.allocate(size, size, OF_IMAGE_COLOR);

unsigned char* pixels = this->img.getPixels().getData();

for (int x = 0; x < size; x++) {

for (int y = 0; y < size; y++) {

float distance = ((size / 2 - x) * (size / 2 - x) + (size / 2 - y) * (size / 2 - y)) / 50.f;

if (distance == 0) { distance = 0.003; }

int r_value = r / distance - 3;

r_value = max(0, min(r_value, 255));

int g_value = g / distance - 3;

g_value = max(0, min(g_value, 255));

int b_value = b / distance - 3;

b_value = max(0, min(b_value, 255));

pixels[x * 3 * size + y * 3 + 0] = r_value;

pixels[x * 3 * size + y * 3 + 1] = g_value;

pixels[x * 3 * size + y * 3 + 2] = b_value;

}

this->img.update();

}

void Particle::update(){

if (this->progress > 1) {

this->progress = 1;

}

ofVec3f gap = this->point_2 - this->point_1;

gap = gap * this->progress;

this->location = this->point_1 + gap;

}

void Particle::draw() {

if (this->point_1 != ofVec3f(0, 0, 0) || this->point_2 != ofVec3f(0, 0, 0)) {

this->img.draw(this->location - ofVec3f(100, 100));

}

void Particle::set_point_1(ofVec3f point_1) {

this->point_1 = point_1;

}

void Particle::set_point_2(ofVec3f point_2) {

this->point_2 = point_2;

}

void Particle::set_progress(float value) {

this->progress = value;

}

ofVec3f Particle::get_location() {

return this->location;

}

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

2017年12月28日2018年3月15日

Insta20171227

[ Video ]

[ About ]
TrueTypeFontからPolylineを取得して、Noiseをかける。
TrueTypeFont to Polyline * Noise.

[ 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 mouseEntered(int x, int y) {};
	void mouseExited(int x, int y) {};
	void windowResized(int w, int h) {};
	void dragEvent(ofDragInfo dragInfo) {};
	void gotMessage(ofMessage msg) {};

	ofTrueTypeFont font;
};

#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 mouseEntered(int x, int y) {};

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

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

void dragEvent(ofDragInfo dragInfo) {};

void gotMessage(ofMessage msg) {};

ofTrueTypeFont font;

};

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup() {
	ofSetFrameRate(30);
	ofBackground(255);
	ofSetWindowTitle("Insta");
	
	ofSetColor(0);
	ofFill();

	this->font.loadFont("Kazesawa-Bold.ttf", 150, true, false, true);
}

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

}

//--------------------------------------------------------------
void ofApp::draw() {
	ofTranslate(100, 50);

	char moji = 'A';
	for (int moji_index = 0; moji_index < 26; moji_index++) {

		ofTTFCharacter char_path = this->font.getCharacterAsPoints(moji);
		vector<ofPolyline> outline = char_path.getOutline();
		ofVec2f center;
		float noise_value;

		ofBeginShape();
		for (int outline_index = 0; outline_index < outline.size(); outline_index++) {

			if (outline_index == 0) {
				center = outline[outline_index].getCentroid2D();
			}
			else {
				ofNextContour(true);
			}

			outline[outline_index] = outline[outline_index].getResampledByCount(300);

			vector<ofPoint> vertices = outline[outline_index].getVertices();
			for (int vertices_index = 0; vertices_index < vertices.size(); vertices_index++) {
				ofPoint point = vertices[vertices_index] -center;
				noise_value = ofNoise(outline_index, point.x * 0.05, point.y * 0.05, ofGetFrameNum() * 0.05);
				if (noise_value < 0.5) {
					noise_value = 0.5;
				}
				ofVertex(point * noise_value);
			}
		}
		ofEndShape(true);

		if ((moji_index + 1) % 6 == 0) {
			ofTranslate(-500, 150);
		} else {
			ofTranslate(100, 0);
		}

		moji += 1;
	}
}

//--------------------------------------------------------------
int main() {
	ofSetupOpenGL(720, 720, OF_WINDOW);
	ofRunApp(new ofApp());
}

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(30);

ofBackground(255);

ofSetWindowTitle("Insta");

ofSetColor(0);

ofFill();

this->font.loadFont("Kazesawa-Bold.ttf", 150, true, false, true);

}

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

void ofApp::update() {

}

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

void ofApp::draw() {

ofTranslate(100, 50);

char moji = 'A';

for (int moji_index = 0; moji_index < 26; moji_index++) {

ofTTFCharacter char_path = this->font.getCharacterAsPoints(moji);

vector<ofPolyline> outline = char_path.getOutline();

ofVec2f center;

float noise_value;

ofBeginShape();

for (int outline_index = 0; outline_index < outline.size(); outline_index++) {

if (outline_index == 0) {

center = outline[outline_index].getCentroid2D();

}

else {

ofNextContour(true);

}

outline[outline_index] = outline[outline_index].getResampledByCount(300);

vector<ofPoint> vertices = outline[outline_index].getVertices();

for (int vertices_index = 0; vertices_index < vertices.size(); vertices_index++) {

ofPoint point = vertices[vertices_index] -center;

noise_value = ofNoise(outline_index, point.x * 0.05, point.y * 0.05, ofGetFrameNum() * 0.05);

if (noise_value < 0.5) {

noise_value = 0.5;

}

ofVertex(point * noise_value);

}

ofEndShape(true);

if ((moji_index + 1) % 6 == 0) {

ofTranslate(-500, 150);

} else {

ofTranslate(100, 0);

}

moji += 1;

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

openFrameworks、初心者脱出の鍵は、ofPolylineにアリ？

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