pixels – プログラミング de 落描き

2019年1月22日2019年1月22日

Color particles and pixel shift particles. Processing

[ Video ]

[ About ]
色の軌跡を残すパーティクルと、画面のピクセルの色情報を移動させるパーティクル

Color particles and pixel shift particles.

[ Source ]

void setup()
{
  size(512, 512);
  frameRate(30);
  background(239);
  colorMode(HSB);
}

void draw()
{
  randomSeed(39);
  
  fill(239, 8);
  noStroke();
  rect(0, 0, width, height);
  
  PVector location;
  for(int i = 0; i < 16; i++)
  {     
    location = new PVector(map(noise(random(100), frameCount * 0.01), 0, 1, -100, width + 100), map(noise(random(100), frameCount * 0.01), 0, 1, -100, height + 100));
    if(location.x < 0) { location.x = 0; }
    if(location.x >= width) { location.x = width - 1; }
    if(location.y < 0) { location.y = 0; }
    if(location.y >= height) { location.y = height - 1; }
    
    fill(i * 16, 255, 230);
    ellipse(location.x, location.y, 25, 25);
  }
  
  loadPixels();
  
  for(int i = 0; i < 1500; i++)
  { 
    location = new PVector(map(noise(random(100), frameCount * 0.001), 0, 1, -200, width + 200), map(noise(random(100), frameCount * 0.001), 0, 1, -200, height + 200));
    if(location.x < 0) { location.x = 0; }
    if(location.x >= width) { location.x = width - 1; }
    if(location.y < 0) { location.y = 0; }
    if(location.y >= height) { location.y = height - 1; }
    color c = pixels[int(location.x) + width * int(location.y)];
    
    fill(c);
    ellipse(location.x, location.y, 8, 8);
  }
}

void setup()

{

size(512, 512);

frameRate(30);

background(239);

colorMode(HSB);

}

void draw()

{

randomSeed(39);

fill(239, 8);

noStroke();

rect(0, 0, width, height);

PVector location;

for(int i = 0; i < 16; i++)

{

location = new PVector(map(noise(random(100), frameCount * 0.01), 0, 1, -100, width + 100), map(noise(random(100), frameCount * 0.01), 0, 1, -100, height + 100));

if(location.x < 0) { location.x = 0; }

if(location.x >= width) { location.x = width - 1; }

if(location.y < 0) { location.y = 0; }

if(location.y >= height) { location.y = height - 1; }

fill(i * 16, 255, 230);

ellipse(location.x, location.y, 25, 25);

}

loadPixels();

for(int i = 0; i < 1500; i++)

{

location = new PVector(map(noise(random(100), frameCount * 0.001), 0, 1, -200, width + 200), map(noise(random(100), frameCount * 0.001), 0, 1, -200, height + 200));

if(location.x < 0) { location.x = 0; }

if(location.x >= width) { location.x = width - 1; }

if(location.y < 0) { location.y = 0; }

if(location.y >= height) { location.y = height - 1; }

color c = pixels[int(location.x) + width * int(location.y)];

fill(c);

ellipse(location.x, location.y, 8, 8);

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2018年1月23日2018年1月22日

イラストをBoxの滝で描写 openFrameworks

[ Video ]

[ About ]
滝のようなBoxの流れを作って、それぞれの色をJPEGファイルからX, Y座標を元に拾ってきています。

本当は箱の中にBoxをため込んで最終的にイラストが見えるようなものにしたかったのですが、処理スピードの問題で断念しました。

[ Source ]

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

	ofEasyCam cam;
	ofLight light;

	ofxBulletWorldRigid world;
	vector<ofxBulletBox*> boxes;

	ofImage img;
	ofPixels pixels;
};

#pragma once

#include "ofMain.h"

#include "ofxBullet.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 windowResized(int w, int h) {};

void dragEvent(ofDragInfo dragInfo) {};

void gotMessage(ofMessage msg) {};

ofEasyCam cam;

ofLight light;

ofxBulletWorldRigid world;

vector<ofxBulletBox*> boxes;

ofImage img;

ofPixels pixels;

};

#include "ofApp.h"

//--------------------------------------------------------------
ofApp::~ofApp() {
	for (ofxBulletBox* tmp : this->boxes) {
		delete tmp;
	}
	this->boxes.clear();
}

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

	this->world.setup();
	this->world.setGravity(ofVec3f(0.0, 64.0, 0));

	ofEnableLighting();
	this->light.enable();

	this->img.loadImage("he.jpg");
	this->pixels = this->img.getPixelsRef();
}

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

	for (int i = 0; i < 10; i++) {
		ofxBulletBox* box = new ofxBulletBox();
		float size = ofRandom(5, 15);
		box->create(this->world.world, ofVec3f(ofRandom(-256, 256), -300, 0), 1.0, size, size, size);
		box->setRestitution(0.5);
		box->add();

		this->boxes.push_back(box);
	}

	this->world.update();
}

//--------------------------------------------------------------
void ofApp::draw() {
	this->cam.begin();
	ofRotateX(180);
	
	this->light.setPosition(this->cam.getPosition());

	for (int i = this->boxes.size() - 1; i >= 0; i--) {
		
		if (this->boxes[i]->getPosition().y > ofGetHeight() / 2) {
			delete this->boxes[i];
			this->boxes.erase(this->boxes.begin() + i);
			continue;
		}

		int x = this->boxes[i]->getPosition().x + 256;
		int y = this->boxes[i]->getPosition().y + 256;

		if (x >= 0 && x < 512 && y >= 0 && y < 512) {
			ofSetColor(this->pixels.getColor(x, y));
			this->boxes[i]->draw();
		}

	}

	this->cam.end();
}

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

#include "ofApp.h"

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

ofApp::~ofApp() {

for (ofxBulletBox* tmp : this->boxes) {

delete tmp;

}

this->boxes.clear();

}

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

void ofApp::setup() {

ofSetFrameRate(60);

ofEnableDepthTest();

ofBackground(0);

ofSetWindowTitle("Insta");

this->world.setup();

this->world.setGravity(ofVec3f(0.0, 64.0, 0));

ofEnableLighting();

this->light.enable();

this->img.loadImage("he.jpg");

this->pixels = this->img.getPixelsRef();

}

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

void ofApp::update() {

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

ofxBulletBox* box = new ofxBulletBox();

float size = ofRandom(5, 15);

box->create(this->world.world, ofVec3f(ofRandom(-256, 256), -300, 0), 1.0, size, size, size);

box->setRestitution(0.5);

box->add();

this->boxes.push_back(box);

}

this->world.update();

}

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

void ofApp::draw() {

this->cam.begin();

ofRotateX(180);

this->light.setPosition(this->cam.getPosition());

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

if (this->boxes[i]->getPosition().y > ofGetHeight() / 2) {

delete this->boxes[i];

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

continue;

}

int x = this->boxes[i]->getPosition().x + 256;

int y = this->boxes[i]->getPosition().y + 256;

if (x >= 0 && x < 512 && y >= 0 && y < 512) {

ofSetColor(this->pixels.getColor(x, y));

this->boxes[i]->draw();

}

this->cam.end();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

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