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

2018年5月6日2018年5月6日

立方体の座標を走る線 openFrameowrks

[ Video ]

[ About ]
立方体の表面座標をなぞりながら、一方向に向かって動く線をたくさん描写しています。それぞれの線がもつ高さの初期位置を、立方体一辺よりも狭い範囲の乱数にすることで、スパンごとの微妙な隙間が空き、ループしている事がハッキリ可視化することが出来て新しい発見でした。

[ 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;
	ofPoint make_rect_point(float half_len, int deg, int z);
};

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

ofPoint make_rect_point(float half_len, int deg, int z);

};

#include "ofApp.h"

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

	ofSetFrameRate(30);
	ofBackground(39);
	ofSetWindowTitle("Insta");

	ofEnableDepthTest();
	ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);
}

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

	ofSeedRandom(39);
}

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

	this->cam.begin();
	ofRotateX(270);
	ofRotateZ(230);

	for (int i = 0; i < 200; i++) {

		vector<ofPoint> points;
		int z_param = ofRandom(250);
		int deg_param = ofRandom(360);
		ofColor color;
		color.setHsb(ofRandom(255), 255, 255);

		for (int i = 0; i < 15; i++) {
			
			int z = (z_param + ((ofGetFrameNum() + i) * 5)) % 500 - 250;
			int deg = deg_param + (ofGetFrameNum() + i) * 5;
			ofPoint point = this->make_rect_point(250, deg, z);
			points.push_back(point);
		}
		
		for (int i = 1; i < points.size(); i++) {

			if (points[i - 1].distance(points[i]) < 100) {
			
				ofSetColor(color, ofMap(points[i - 1].y + points[i - 1].x, -500, 500, 64, 255));
				ofDrawLine(points[i - 1], points[i]);
			}
		}

	}

	this->cam.end();
}

//--------------------------------------------------------------
ofPoint ofApp::make_rect_point(float half_len, int deg, int z) {

	int param = (deg + 45) / 90;
	ofPoint point;

	switch (param % 4) {

	case 0:

		return ofPoint(half_len, ofMap((deg + 45) % 90, 0, 89, -half_len, half_len),z);
	case 1:

		return  ofPoint(ofMap((deg + 45) % 90, 0, 89, half_len, -half_len), half_len, z);
	case 2:

		return ofPoint(-half_len, ofMap((deg + 45) % 90, 0, 89, half_len, -half_len), z);
	case 3:

		return ofPoint(ofMap((deg + 45) % 90, 0, 89, -half_len, half_len), -half_len, z);
	default:

		return ofPoint();
	}
}

//--------------------------------------------------------------
int main() {

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(30);

ofBackground(39);

ofSetWindowTitle("Insta");

ofEnableDepthTest();

ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

}

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

void ofApp::update() {

ofSeedRandom(39);

}

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

void ofApp::draw() {

this->cam.begin();

ofRotateX(270);

ofRotateZ(230);

for (int i = 0; i < 200; i++) {

vector<ofPoint> points;

int z_param = ofRandom(250);

int deg_param = ofRandom(360);

ofColor color;

color.setHsb(ofRandom(255), 255, 255);

for (int i = 0; i < 15; i++) {

int z = (z_param + ((ofGetFrameNum() + i) * 5)) % 500 - 250;

int deg = deg_param + (ofGetFrameNum() + i) * 5;

ofPoint point = this->make_rect_point(250, deg, z);

points.push_back(point);

}

for (int i = 1; i < points.size(); i++) {

if (points[i - 1].distance(points[i]) < 100) {

ofSetColor(color, ofMap(points[i - 1].y + points[i - 1].x, -500, 500, 64, 255));

ofDrawLine(points[i - 1], points[i]);

}

this->cam.end();

}

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

ofPoint ofApp::make_rect_point(float half_len, int deg, int z) {

int param = (deg + 45) / 90;

ofPoint point;

switch (param % 4) {

case 0:

return ofPoint(half_len, ofMap((deg + 45) % 90, 0, 89, -half_len, half_len),z);

case 1:

return ofPoint(ofMap((deg + 45) % 90, 0, 89, half_len, -half_len), half_len, z);

case 2:

return ofPoint(-half_len, ofMap((deg + 45) % 90, 0, 89, half_len, -half_len), z);

case 3:

return ofPoint(ofMap((deg + 45) % 90, 0, 89, -half_len, half_len), -half_len, z);

default:

return ofPoint();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

2018年5月5日2018年5月5日

ofFboからofPixels へアクセスして加工する openFrameworks

[ Video ]

[ About ]
ofFboに描写した内容を、反転＋透過＋歪みなどを加えることで影のようにならないかと思い、試行錯誤してみました。歪みを大きくしたところ、水面のような感じが出てきたので雰囲気で色々と足してみました。

具体的には画面の半分にあたる広さのofFboを作成、通常通りにupdate内で描写の支持をします。draw内では、上半分に通常通りに描写、下半分にはofFboから取得したPixelsを元にピクセル単位で色情報にアクセス、修正を加えたものを描写しています。

[ 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) {};

	ofFbo fbo;

	void draw_tree(ofPoint point, float deg, int len, int depth);
};

#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) {};

ofFbo fbo;

void draw_tree(ofPoint point, float deg, int len, int depth);

};

#include "ofApp.h"

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

	ofSetFrameRate(30);
	ofBackground(39);
	ofSetWindowTitle("Insta");

	ofSetCircleResolution(36);
	this->fbo.allocate(ofGetWidth(), ofGetHeight() / 2);
}

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

	ofSeedRandom(39);

	this->fbo.begin();
	ofClear(0);

	// Draw Sun To Fbo
	ofPushMatrix();
	ofTranslate(this->fbo.getWidth() / 3, this->fbo.getHeight() / 5 * 2);

	ofSetColor(239, 39, 39);
	ofDrawCircle(ofPoint(), 130);

	ofPopMatrix();

	// Draw Firefry To Fbo
	ofSetColor(239, 239, 39);
	for (int i = 0; i < 15; i++) {

		int x = ofRandom(ofGetWidth());
		int y = (int)(ofRandom(this->fbo.getHeight()) + ofGetFrameNum()) % (int)this->fbo.getHeight();

		ofDrawCircle(x, y, 2);
	}

	// Draw Tree To Fbo
	ofSetColor(239);
	for (int i = 0; i < 60; i++) {

		int x = ofRandom(this->fbo.getWidth());
		this->draw_tree(ofPoint(x, this->fbo.getHeight()), -90, ofRandom(30, 70), 8);
	}

	this->fbo.end();
}

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

	ofTranslate(ofGetWidth() / 2, ofGetHeight() / 2);

	// Draw Fbo 
	ofSetColor(255, 255);
	this->fbo.draw(-ofGetWidth() / 2, -ofGetHeight() / 2);
	
	// Draw Shadow
	ofPixels pixels;
	this->fbo.readToPixels(pixels);

	for (int y = 0; y < pixels.getHeight(); y++) {

		int noise_x = ofMap(ofNoise(y * 0.05 + ofGetFrameNum() * 0.05), 0, 1, -20, 20);
		noise_x = noise_x * ofMap(y, 0, pixels.getHeight(), 1, 0.1);

		if (noise_x > 0) {

			for (int x = pixels.getWidth() - 1; x > noise_x; x--) {

				pixels.setColor(x, y, pixels.getColor(x - noise_x, y));
			}
			for (int x = 0; x < noise_x; x++) {

				pixels.setColor(x, y, ofColor(39));
			}
		}
		else if(noise_x < 0) {

			for (int x = 0; x < pixels.getWidth() + noise_x; x++) {

				pixels.setColor(x, y, pixels.getColor(x - noise_x, y));
			}
			for (int x = pixels.getWidth() + noise_x; x < pixels.getWidth(); x++) {

				pixels.setColor(x, y, ofColor(39));
			}
		}

	}
	ofImage image;
	image.setFromPixels(pixels);

	ofRotate(180);
	ofRotateY(180);
	ofSetColor(255, 64);
	image.draw(-ofGetWidth() / 2, -ofGetHeight() / 2);

}

//--------------------------------------------------------------
void ofApp::draw_tree(ofPoint point, float deg, int len, int depth){

	ofSetLineWidth(0.1 + depth / 8);
	ofPoint target(len * cos(deg * DEG_TO_RAD), len * sin(deg * DEG_TO_RAD));
	ofDrawLine(point, point + target);

	if (depth > 1) {

		this->draw_tree(point + target, deg - ofRandom(-5, 15), len * 0.4, depth - 1);
		this->draw_tree(point + target, deg + ofRandom(-5, 15), len * 0.8, depth - 1);
	}

}


//--------------------------------------------------------------
int main() {

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(30);

ofBackground(39);

ofSetWindowTitle("Insta");

ofSetCircleResolution(36);

this->fbo.allocate(ofGetWidth(), ofGetHeight() / 2);

}

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

void ofApp::update() {

ofSeedRandom(39);

this->fbo.begin();

ofClear(0);

// Draw Sun To Fbo

ofPushMatrix();

ofTranslate(this->fbo.getWidth() / 3, this->fbo.getHeight() / 5 * 2);

ofSetColor(239, 39, 39);

ofDrawCircle(ofPoint(), 130);

ofPopMatrix();

// Draw Firefry To Fbo

ofSetColor(239, 239, 39);

for (int i = 0; i < 15; i++) {

int x = ofRandom(ofGetWidth());

int y = (int)(ofRandom(this->fbo.getHeight()) + ofGetFrameNum()) % (int)this->fbo.getHeight();

ofDrawCircle(x, y, 2);

}

// Draw Tree To Fbo

ofSetColor(239);

for (int i = 0; i < 60; i++) {

int x = ofRandom(this->fbo.getWidth());

this->draw_tree(ofPoint(x, this->fbo.getHeight()), -90, ofRandom(30, 70), 8);

}

this->fbo.end();

}

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

void ofApp::draw() {

ofTranslate(ofGetWidth() / 2, ofGetHeight() / 2);

// Draw Fbo

ofSetColor(255, 255);

this->fbo.draw(-ofGetWidth() / 2, -ofGetHeight() / 2);

// Draw Shadow

ofPixels pixels;

this->fbo.readToPixels(pixels);

for (int y = 0; y < pixels.getHeight(); y++) {

int noise_x = ofMap(ofNoise(y * 0.05 + ofGetFrameNum() * 0.05), 0, 1, -20, 20);

noise_x = noise_x * ofMap(y, 0, pixels.getHeight(), 1, 0.1);

if (noise_x > 0) {

for (int x = pixels.getWidth() - 1; x > noise_x; x--) {

pixels.setColor(x, y, pixels.getColor(x - noise_x, y));

}

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

pixels.setColor(x, y, ofColor(39));

}

else if(noise_x < 0) {

for (int x = 0; x < pixels.getWidth() + noise_x; x++) {

pixels.setColor(x, y, pixels.getColor(x - noise_x, y));

}

for (int x = pixels.getWidth() + noise_x; x < pixels.getWidth(); x++) {

pixels.setColor(x, y, ofColor(39));

}

ofImage image;

image.setFromPixels(pixels);

ofRotate(180);

ofRotateY(180);

ofSetColor(255, 64);

image.draw(-ofGetWidth() / 2, -ofGetHeight() / 2);

}

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

void ofApp::draw_tree(ofPoint point, float deg, int len, int depth){

ofSetLineWidth(0.1 + depth / 8);

ofPoint target(len * cos(deg * DEG_TO_RAD), len * sin(deg * DEG_TO_RAD));

ofDrawLine(point, point + target);

if (depth > 1) {

this->draw_tree(point + target, deg - ofRandom(-5, 15), len * 0.4, depth - 1);

this->draw_tree(point + target, deg + ofRandom(-5, 15), len * 0.8, depth - 1);

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

2018年5月4日2018年5月4日

デブリ openFrameworks

[ Video ]

[ About ]
円柱状の空間を目に見えないParticleが一定速度で移動しています。Particle同士の距離が一定以下になったとき、Particle自身とそれぞれのParticleを結ぶ線が浮き出ます。また、距離と透過度は連動しており、近づくほどハッキリと、遠ざかると薄っすらとなっていきます。

[ 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;
};

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

};

#include "ofApp.h"

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

	ofSetFrameRate(30);
	ofBackground(39);
	ofSetWindowTitle("Insta");

	ofEnableDepthTest();
	ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);
}

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

	ofSeedRandom(39);
}

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

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

	// Make Particle Location
	vector<ofPoint> points;
	for (int i = 0; i < 512; i++) {

		int radius = ofRandom(100, 300);
		float z_speed = ofRandom(1, 3);
		float deg_speed = ofRandom(1, 2);

		float deg = ofRandom(360) + ofGetFrameNum() * deg_speed;
		float z = ofRandom(-ofGetWidth() / 2, ofGetWidth() / 2);
		z += (int)(z + ofGetFrameNum() * z_speed) % ofGetWidth() - ofGetWidth() / 2;
		ofPoint point(radius * cos(deg * DEG_TO_RAD), radius * sin(deg * DEG_TO_RAD), z);

		points.push_back(point);
	}
	
	// Draw Particle
	for (int i = 0; i < points.size(); i++) {

		for (int j = i + 1; j < points.size(); j++) {

			float distance = points[i].distance(points[j]);
			if (distance < 40) {

				ofSetColor(239, ofMap(distance, 0, 40, 255, 128));

				ofDrawLine(points[i], points[j]);
				ofDrawSphere(points[i], 3);
				ofDrawSphere(points[j], 3);
			}
			else if(distance < 50){

				ofSetColor(239, ofMap(distance, 40, 50, 128, 0));

				ofDrawLine(points[i], points[j]);
				ofDrawSphere(points[i], 3);
				ofDrawSphere(points[j], 3);
			}
		}
	}
	
	this->cam.end();
}

//--------------------------------------------------------------
int main() {

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(30);

ofBackground(39);

ofSetWindowTitle("Insta");

ofEnableDepthTest();

ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

}

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

void ofApp::update() {

ofSeedRandom(39);

}

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

void ofApp::draw() {

this->cam.begin();

ofRotateX(270);

// Make Particle Location

vector<ofPoint> points;

for (int i = 0; i < 512; i++) {

int radius = ofRandom(100, 300);

float z_speed = ofRandom(1, 3);

float deg_speed = ofRandom(1, 2);

float deg = ofRandom(360) + ofGetFrameNum() * deg_speed;

float z = ofRandom(-ofGetWidth() / 2, ofGetWidth() / 2);

z += (int)(z + ofGetFrameNum() * z_speed) % ofGetWidth() - ofGetWidth() / 2;

ofPoint point(radius * cos(deg * DEG_TO_RAD), radius * sin(deg * DEG_TO_RAD), z);

points.push_back(point);

}

// Draw Particle

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

for (int j = i + 1; j < points.size(); j++) {

float distance = points[i].distance(points[j]);

if (distance < 40) {

ofSetColor(239, ofMap(distance, 0, 40, 255, 128));

ofDrawLine(points[i], points[j]);

ofDrawSphere(points[i], 3);

ofDrawSphere(points[j], 3);

}

else if(distance < 50){

ofSetColor(239, ofMap(distance, 40, 50, 128, 0));

ofDrawLine(points[i], points[j]);

ofDrawSphere(points[i], 3);

ofDrawSphere(points[j], 3);

}

this->cam.end();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

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