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

2019年2月8日2019年2月8日

Shape of between circle to rectangle. openFrameworks

[ Video ]

[ About ]
円の角度情報を元に対応する正方形の座標を算出、ノイズ関数で円と正方形の座標を行き来する図形

Shape of between circle to rectangle.

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

	glm::vec2 make_point(int len, int param);
};

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

glm::vec2 make_point(int len, int param);

};

#include "ofApp.h"

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

	ofSetFrameRate(60);
	ofSetWindowTitle("openFrameworks");

	ofBackground(239);
	ofSetColor(39);
	ofSetLineWidth(2);
	ofNoFill();
}

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

	ofSeedRandom(39);
}

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

	int span = 72;
	int radius = 30;
	int len = radius * 2;
	for (int x = span * 0.5; x < ofGetWidth(); x += span) {

		for (int y = span * 0.5; y < ofGetHeight(); y += span) {

			ofPushMatrix();
			ofTranslate(x, y);

			float noise_value = ofNoise(ofRandom(1000), ofGetFrameNum() * 0.01);

			ofBeginShape();
			for (int deg = 0; deg < 360; deg += 1) {

				glm::vec2 circle_point = glm::vec2(radius * cos(deg * DEG_TO_RAD), radius * sin(deg * DEG_TO_RAD));
				glm::vec2 rect_point = this->make_point(len, ofMap(deg, 0, 360, 87.5, 187.5));

				glm::vec2 difference = circle_point - rect_point;
				glm::vec2 between_point = rect_point + difference * noise_value;

				ofVertex(between_point);
			}
			ofEndShape(true);
			ofPopMatrix();
		}
	}
}

//--------------------------------------------------------------
glm::vec2 ofApp::make_point(int len, int param) {

	param = param % 100;
	if (param < 25) {

		return glm::vec2(ofMap(param, 0, 25, -len * 0.5, len * 0.5), -len * 0.5);
	}
	else if (param < 50) {

		return glm::vec2(len * 0.5, ofMap(param, 25, 50, -len * 0.5, len * 0.5));
	}
	else if (param < 75) {

		return glm::vec2(ofMap(param, 50, 75, len * 0.5, -len * 0.5), len * 0.5);
	}
	else {

		return glm::vec2(-len * 0.5, ofMap(param, 75, 100, len * 0.5, -len * 0.5));
	}
}

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

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(60);

ofSetWindowTitle("openFrameworks");

ofBackground(239);

ofSetColor(39);

ofSetLineWidth(2);

ofNoFill();

}

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

void ofApp::update() {

ofSeedRandom(39);

}

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

void ofApp::draw() {

int span = 72;

int radius = 30;

int len = radius * 2;

for (int x = span * 0.5; x < ofGetWidth(); x += span) {

for (int y = span * 0.5; y < ofGetHeight(); y += span) {

ofPushMatrix();

ofTranslate(x, y);

float noise_value = ofNoise(ofRandom(1000), ofGetFrameNum() * 0.01);

ofBeginShape();

for (int deg = 0; deg < 360; deg += 1) {

glm::vec2 circle_point = glm::vec2(radius * cos(deg * DEG_TO_RAD), radius * sin(deg * DEG_TO_RAD));

glm::vec2 rect_point = this->make_point(len, ofMap(deg, 0, 360, 87.5, 187.5));

glm::vec2 difference = circle_point - rect_point;

glm::vec2 between_point = rect_point + difference * noise_value;

ofVertex(between_point);

}

ofEndShape(true);

ofPopMatrix();

}

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

glm::vec2 ofApp::make_point(int len, int param) {

param = param % 100;

if (param < 25) {

return glm::vec2(ofMap(param, 0, 25, -len * 0.5, len * 0.5), -len * 0.5);

}

else if (param < 50) {

return glm::vec2(len * 0.5, ofMap(param, 25, 50, -len * 0.5, len * 0.5));

}

else if (param < 75) {

return glm::vec2(ofMap(param, 50, 75, len * 0.5, -len * 0.5), len * 0.5);

}

else {

return glm::vec2(-len * 0.5, ofMap(param, 75, 100, len * 0.5, -len * 0.5));

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2019年2月7日

Afterimage of Noise. openFrameworks

[ Video ]

[ About ]
ノイズの残像

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

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

};

#include "ofApp.h"

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

	ofSetFrameRate(60);
	ofSetWindowTitle("openFrameworks");

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

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

}

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

	ofTranslate(ofGetWidth() * 0.5, ofGetHeight() * 0.5);

	int base_radius = 330;
	for (int radius = base_radius; radius > 0; radius -= 5) {

		vector<glm::vec2> vertices;
		for (int deg = 0; deg < 360; deg += 1) {

			glm::vec2 noise_location = glm::vec2(cos(deg * DEG_TO_RAD), sin(deg * DEG_TO_RAD));
			float noise_value = ofMap(ofNoise(noise_location.x, noise_location.y, radius * 0.005 + ofGetFrameNum() * 0.005), 0, 1, 0.5, 1);
			float noise_radius = radius * noise_value;

			vertices.push_back(glm::vec2(noise_radius * cos(deg * DEG_TO_RAD), noise_radius * sin(deg * DEG_TO_RAD)));
		}

		ofNoFill();
		ofSetColor(255, 0, 0, ofMap(radius , base_radius, 0, 255, 0));
		ofBeginShape();
		ofVertices(vertices);
		ofEndShape(true);
	}
}

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

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(60);

ofSetWindowTitle("openFrameworks");

ofBackground(0);

ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

ofEnableDepthTest();

}

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

void ofApp::update() {

}

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

void ofApp::draw() {

ofTranslate(ofGetWidth() * 0.5, ofGetHeight() * 0.5);

int base_radius = 330;

for (int radius = base_radius; radius > 0; radius -= 5) {

vector<glm::vec2> vertices;

for (int deg = 0; deg < 360; deg += 1) {

glm::vec2 noise_location = glm::vec2(cos(deg * DEG_TO_RAD), sin(deg * DEG_TO_RAD));

float noise_value = ofMap(ofNoise(noise_location.x, noise_location.y, radius * 0.005 + ofGetFrameNum() * 0.005), 0, 1, 0.5, 1);

float noise_radius = radius * noise_value;

vertices.push_back(glm::vec2(noise_radius * cos(deg * DEG_TO_RAD), noise_radius * sin(deg * DEG_TO_RAD)));

}

ofNoFill();

ofSetColor(255, 0, 0, ofMap(radius , base_radius, 0, 255, 0));

ofBeginShape();

ofVertices(vertices);

ofEndShape(true);

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2019年2月7日2019年2月7日

キャリアに役立つ？クリエイティブ・コーディング

先日、Processing Community Day Tokyo というProcessingユーザの交流イベントへ参加してきました。

Processing Community Day Tokyo
https://pcd-tokyo.github.io

普段の実生活ではProcessingやクリエイティブ・コーディングという単語を知っている人も周りには少なく、「ニッチな趣味」として細々とやってきましたが、PCDの会場ではProcessingを知っていて当たり前の空間が広がっており年甲斐もなく、非常に心が躍りワクワクした時間を過ごす事が出来ました。

また、これまでSNSなどで知り合いになった方々などとも実際にお会いしたり、光栄にも「投稿見てます」と声をかけて頂く事もあって、これまで特別な目的があって投稿を続けて来たわけでは無かったのですが、ひとつ報われた気がしました。

さて、そんな素晴らしいイベントで、実は、一点だけ心残りがあります。

WorldCafeという参加者同士のディスカッションの場が設けられ「キャリア形成進路においてのクリエイティブ・コーディング」という議題に参加したのですが、最終的に「求む、弟子」というキャリアに全然関係ない、良く分からない主張をして終わってしまったのです(悲劇！)

自身ではProcessingやopenFrameworksでやってきた事が、仕事に活きて来た事も多々あると思っておりますので、贖罪の意味も込めて、自分の体験を通じて感じた事柄を列挙していきたいと思います。

1. プログラミング技術習得の為の実験場

C++やOpenCVについては、実は業務上で新しく習得する必要がありました。習得レベル的にはヘビーだったとは思うのですが、業務と併せてクリエイティブ・コーディングとして扱う事で楽しく進める事が出来、習得速度も速かったです。

また、会社で実施されるOJTや研修の知識だけだと、業務で扱う範囲内で完結してしまいがちなのですが、自身の興味や関心を優先するクリエイティブ・コーディングではあえてトリッキーな書き方をしてみたり、使った事のない機能をわざと使ってみるなど、業務ではやらないような挑戦的な事(自分的には)する機会も多かったです。その分、失敗もありましたが、そこから学ぶ事も多く総合的な理解度を深める事が出来たと思います。

「絵を出力する」という事が最終目的なのでコードの書き方などが間違っていたりしても最終的には許される。という寛容さも色々と試す事が出来る環境の一因でした。

更に、SNSに投稿をすることで「いいね！」などのメンションからモチベーションを供給する事によって継続し続けられます。素晴らしい！

2. 可視化

クリエイティブ・コーディングでは「可視化」や「インタラクティブ性」が得意だと思うのですが、その点が業務でもデモアプリや実験的なサンプルを作るのに活躍してくれます。

「百聞は一見に如かず」という言葉もあるように、何かを誰かに伝える際、見せられるもの有る・無しが、事柄が伝わるかどうかに対する大きなウェイトを持っていると考えており、「見せれる・触れる」ものを作るスキル・手段があるという事自体が個人的な強み・武器になっていると思います。

これはクリエイティブ・コーディング単体で強みにはなりづらいが、自分の持つスキルや技術と組み合わせ、それらをアウトプットする事で相乗的な強みに変えられるという事です。

3. 活きるプログラミング

クリエイティブ・コーディング、実は、ここだけの話、単純にやっていて楽しいんです。

色々とソースコードをいじり回しながら、動いた！思わぬ動きを発見した！ネットに投稿してメンションが沢山来た！快感！！など従来のプログラミングの楽しさとは別次元の楽しさがあります。

これまでもプログラミングは好きでしたが、クリエイティブ・コーディングを通じて、更に一段と好きになりました。今はこんな楽しい事をもっと広げて行くべきと、漠然ではありますが考えております。(ゆえにの弟子発言)

個人的には「好きな事を仕事にしよう！」とかあまり好きな考え方ではないですが、仕事で扱っているプログラミングに興味や関心を更に深める事が出来て幸せだと感じますし、きっかけをくれたProcessing, openFrameworks達には感謝をしています。

もっとユーザ増えろ。

おしまい。

[ほしいものリスト]
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