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

2017年10月19日2017年12月5日

Insta20171018

[ Video ]

[ About ]
ofxBox2dという物理エンジンのaddonを使ってみました。
キーボードのキー入力がある間は、Circleが毎フレーム追加されていきます。
この動画中では重力が存在するので生成されたCircleは下へ落下します。

キー入力中は画面四方の壁が存在していますが、キー入力がなくなると消えるので、画面外に落下して見えなくなります。(放っておくと計算量が増え続けるので、見えなくなったCircleを削除しています)

重力や衝突、摩擦などの計算はすべてBox2d側で処理をしてくれるので、利用する側は諸々の設定をしたあとに、update関数やdara関数を呼んであればOKです

[ Source ]

#pragma once
#include "ofMain.h"
#include "ofxBox2d.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) {}
		
		ofxBox2d	box2d;
		vector<shared_ptr<ofxBox2dCircle>> circles;
		vector<ofColor> circles_color;
};

#pragma once

#include "ofMain.h"

#include "ofxBox2d.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) {}

ofxBox2d box2d;

vector<shared_ptr<ofxBox2dCircle>> circles;

vector<ofColor> circles_color;

};

#include "ofApp.h"

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

	this->box2d.init();
	this->box2d.setGravity(0, 10);
	this->box2d.createBounds();
	this->box2d.setFPS(60);
	this->box2d.registerGrabbing();
}

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

	if (ofGetKeyPressed()) {
		if (this->box2d.bCheckBounds) {
			float r = ofRandom(1.0, 20.0);
			this->circles.push_back(shared_ptr<ofxBox2dCircle>(new ofxBox2dCircle));
			this->circles.back().get()->setPhysics(3.0, 0.53, 0.1);
			this->circles.back().get()->setup(this->box2d.getWorld(), ofRandom(ofGetWidth()), 0, r);
		} else {
			this->box2d.createBounds();
			this->box2d.checkBounds(true);
		}

	} else {
		if (this->box2d.bCheckBounds) {
			this->box2d.createBounds(0, 0, 0, 0);
			this->box2d.checkBounds(false);
		}
	}

	ofColor circle_color;
	circle_color.setHsb(ofRandom(255), 255, 255);
	this->circles_color.push_back(circle_color);

	this->box2d.update();

	for (int i = this->circles.size() - 1; i > -1; i--) {
		if (this->circles[i].get()->getPosition().y > ofGetHeight() + 20) {
			this->circles[i].get()->destroy();
			this->circles.erase(this->circles.begin() + i);
			this->circles_color.erase(this->circles_color.begin() + i);
		}
	}
}

//--------------------------------------------------------------
void ofApp::draw(){
	for (int i = 0; i < this->circles.size(); i++) {
		ofNoFill();
		ofSetColor(this->circles_color[i]);
		this->circles[i].get()->draw();
	}

	this->box2d.drawGround();
}

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

#include "ofApp.h"

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

void ofApp::setup(){

ofSetFrameRate(60);

ofBackground(0);

ofSetWindowTitle("Insta");

this->box2d.init();

this->box2d.setGravity(0, 10);

this->box2d.createBounds();

this->box2d.setFPS(60);

this->box2d.registerGrabbing();

}

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

void ofApp::update(){

if (ofGetKeyPressed()) {

if (this->box2d.bCheckBounds) {

float r = ofRandom(1.0, 20.0);

this->circles.push_back(shared_ptr<ofxBox2dCircle>(new ofxBox2dCircle));

this->circles.back().get()->setPhysics(3.0, 0.53, 0.1);

this->circles.back().get()->setup(this->box2d.getWorld(), ofRandom(ofGetWidth()), 0, r);

} else {

this->box2d.createBounds();

this->box2d.checkBounds(true);

}

} else {

if (this->box2d.bCheckBounds) {

this->box2d.createBounds(0, 0, 0, 0);

this->box2d.checkBounds(false);

}

ofColor circle_color;

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

this->circles_color.push_back(circle_color);

this->box2d.update();

for (int i = this->circles.size() - 1; i > -1; i--) {

if (this->circles[i].get()->getPosition().y > ofGetHeight() + 20) {

this->circles[i].get()->destroy();

this->circles.erase(this->circles.begin() + i);

this->circles_color.erase(this->circles_color.begin() + i);

}

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

void ofApp::draw(){

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

ofNoFill();

ofSetColor(this->circles_color[i]);

this->circles[i].get()->draw();

}

this->box2d.drawGround();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2017年10月18日2017年12月5日

Insta20171017

[ Video ]

[ About ]
Particleをsin関数を使って動かしています。

[ Source ]

#pragma once
#include "ofMain.h"
#include "Particle.h"

class ofApp : public ofBaseApp {

public:
	~ofApp();

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

	ofEasyCam cam;
	vector<Particle*> particles;
};

#pragma once

#include "ofMain.h"

#include "Particle.h"

class ofApp : public ofBaseApp {

public:

~ofApp();

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

ofEasyCam cam;

vector<Particle*> particles;

};

#include "ofApp.h"

//--------------------------------------------------------------
ofApp::~ofApp() {
	for (int i = this->particles.size() - 1; i > -1; i--) {
		delete this->particles[i];
		this->particles.erase(this->particles.begin() + i);
	}
}

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

	ofEnableSmoothing();
	ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

	for (int i = 0; i < 512; i++) {
		this->particles.push_back(new Particle());
	}
}

//--------------------------------------------------------------
void ofApp::update() {
	for (Particle* p : this->particles) {
		p->update();
	}
}

//--------------------------------------------------------------
void ofApp::draw() {
	this->cam.begin();

	for (Particle* p : this->particles) {
		p->draw();
	}

	this->cam.end();
}

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

#include "ofApp.h"

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

ofApp::~ofApp() {

for (int i = this->particles.size() - 1; i > -1; i--) {

delete this->particles[i];

this->particles.erase(this->particles.begin() + i);

}

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

void ofApp::setup() {

ofSetFrameRate(60);

ofBackground(0);

ofSetWindowTitle("Insta");

ofEnableSmoothing();

ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

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

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

}

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

void ofApp::update() {

for (Particle* p : this->particles) {

p->update();

}

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

void ofApp::draw() {

this->cam.begin();

for (Particle* p : this->particles) {

p->draw();

}

this->cam.end();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

#pragma once
#include "ofMain.h"

class Particle {
public:
	Particle();
	~Particle() {}

	void update();
	void draw();

private:
	ofVec2f location;
	float	step;

	float	body_size;
	ofColor body_color;
	float	alpha;
};

#pragma once

#include "ofMain.h"

class Particle {

public:

Particle();

~Particle() {}

void update();

void draw();

private:

ofVec2f location;

float step;

float body_size;

ofColor body_color;

float alpha;

};

#include "Particle.h"

Particle::Particle()
{
	this->location = ofVec2f(ofRandom(-ofGetWidth() / 2, ofGetWidth() / 2), ofRandom(-ofGetHeight() / 2, ofGetHeight() / 2));
	this->step = ofRandom(2.0, 5.0);
	this->body_size = ofRandom(10, 40);
	this->body_color.setHsb(ofRandom(255), 255, 255);
	this->alpha = ofRandom(200, 255);
}

void Particle::update()
{
	float x = this->location.x + this->step;
	float y = this->location.y + sin((this->location.x + this->body_size + ofGetFrameNum()) * 0.005) * this->body_size * 0.05;
	this->location = ofVec2f(x, y);

	if (this->location.x > ofGetWidth() / 2 + this->body_size) { 
		this->location.x = -ofGetWidth() / 2 - this->body_size; 
	}

}

void Particle::draw()
{
	ofSetColor(this->body_color, this->alpha);
	ofDrawEllipse(this->location, this->body_size, this->body_size);
}

#include "Particle.h"

Particle::Particle()

{

this->location = ofVec2f(ofRandom(-ofGetWidth() / 2, ofGetWidth() / 2), ofRandom(-ofGetHeight() / 2, ofGetHeight() / 2));

this->step = ofRandom(2.0, 5.0);

this->body_size = ofRandom(10, 40);

this->body_color.setHsb(ofRandom(255), 255, 255);

this->alpha = ofRandom(200, 255);

}

void Particle::update()

{

float x = this->location.x + this->step;

float y = this->location.y + sin((this->location.x + this->body_size + ofGetFrameNum()) * 0.005) * this->body_size * 0.05;

this->location = ofVec2f(x, y);

if (this->location.x > ofGetWidth() / 2 + this->body_size) {

this->location.x = -ofGetWidth() / 2 - this->body_size;

}

void Particle::draw()

{

ofSetColor(this->body_color, this->alpha);

ofDrawEllipse(this->location, this->body_size, this->body_size);

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2017年10月17日2017年12月5日

503 Error

今朝、サイトの設定をイジっていたのですが、作業中に

Service Temporarily Unavailable

の文字が…

Webサーバのアクセス負荷などが大きくなり、サーバ側がアクセス制限をした際に表示されるエラーページですね。

はて？そんなに閲覧者数も多くないはずなのに？と首をかしげていたのですが、調べてみると転送データ量も関係してくるようですね(言われてみれば当たり前か…

動画ファイル(mp4)を直接Webサーバに入れて、videoタグを使って再生するようにしていたのですが、おそらくこの部分のデータ転送量が大きくなっていたと思われます。

トップページに最新の投稿が並ぶので、投稿数分の動画が読み込まれるようですしユーザにも優しい仕様ではなかったですね。

とゆーことで、動画をYouTubeに投稿して埋め込むスタイルにしました。
これで、しばらく様子見しよう。そうしよう。

[ 追記 2017/10/18 ]

埋め込みYoutubeの解像度を720×720にしていたんですが、Androidのブラウザで見るとレイアウトが変になっていました。

Android自体の解像度は上がってきてるからセーフかと思ったんですが、ブラウザ側で制御されている事情もあるのか…

320×320にサイズダウンしてみました。

[ 追記 2017/12/05 ]

ログアクセスを眺めているとPCからのアクセスが主になってきたので、見やすいように512×512にあげてました。
スマートフォンだと少し帯入ってしまいますが、様子見。

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