2018年7月 – ページ 3 – プログラミング de 落描き

2018年7月25日2018年7月25日

Self-healing video. openframeworks

[ Video ]

[ About ]
自己修復する動画を作りました。画像処理にOpenCV、物理エンジンにofxBox2dを使っています。

I made a self-healing video. Using library is OpenCV and ofxBox2d.

[ Source ]

#pragma once
#include "ofMain.h"
#include "ofxBox2d.h"
#include "opencv2/opencv.hpp"

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;

	ofxBox2d box2d;
	vector<shared_ptr<ofxBox2dRect>> rects;

	cv::VideoCapture cap;
	cv::Size cap_size;

	float rect_size;
	vector<cv::Mat> frames;
	vector<unique_ptr<ofImage>> images;
	vector<cv::Rect> cv_rects;
	vector<ofPoint> start_point;
};

#pragma once

#include "ofMain.h"

#include "ofxBox2d.h"

#include "opencv2/opencv.hpp"

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;

ofxBox2d box2d;

vector<shared_ptr<ofxBox2dRect>> rects;

cv::VideoCapture cap;

cv::Size cap_size;

float rect_size;

vector<cv::Mat> frames;

vector<unique_ptr<ofImage>> images;

vector<cv::Rect> cv_rects;

vector<ofPoint> start_point;

};

#include "ofApp.h"

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

	ofBackground(39);
	ofSetWindowTitle("openframeworks");

	this->cap.open("D:\\video\\image.mp4");
	this->cap_size = cv::Size(640, 360);
	ofSetFrameRate(this->cap.get(CV_CAP_PROP_FPS));

	this->box2d.init();
	this->box2d.setGravity(0, 0);
	this->box2d.createBounds();
	this->box2d.setFPS(30);
	this->box2d.registerGrabbing();

	this->rect_size = 20;
	for (int x = 0; x < this->cap_size.width; x += this->rect_size) {

		for (int y = 0; y < this->cap_size.height; y += this->rect_size) {

			ofPoint start_point(x + ofGetWidth() * 0.5 - this->cap_size.width * 0.5, y + ofGetHeight() * 0.5 - this->cap_size.height * 0.5);

			this->rects.push_back(shared_ptr<ofxBox2dRect>(new ofxBox2dRect));
			this->rects.back().get()->setPhysics(1.0, 0.5, 5.0);
			this->rects.back().get()->setup(this->box2d.getWorld(), start_point.x, start_point.y, this->rect_size, this->rect_size);

			unique_ptr<ofImage> image(new ofImage());
			image->allocate(this->rect_size, this->rect_size, OF_IMAGE_COLOR);
			cv::Mat frame = cv::Mat(cv::Size(image->getWidth(), image->getHeight()), CV_MAKETYPE(CV_8UC3, image->getPixels().getNumChannels()), image->getPixels().getData(), 0);
			this->images.push_back(std::move(image));
			this->frames.push_back(frame);

			cv::Rect rect = cv::Rect(x, y, this->rect_size, this->rect_size);
			this->cv_rects.push_back(rect);

			this->start_point.push_back(start_point);
		}
	}

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

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

	cv::Mat src, frame;
	this->cap >> src;
	if (src.empty()) {

		cap.set(CV_CAP_PROP_POS_FRAMES, 1);
		return;
	}

	cv::resize(src, frame, this->cap_size);
	cv::cvtColor(frame, frame, CV_BGR2RGB);


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

		ofVec2f distance = this->start_point[i] - this->rects[i]->getPosition();
		this->rects[i]->addForce(distance, 0.01);

		cv::Mat tmp_box_image(frame, this->cv_rects[i]);
		tmp_box_image.copyTo(this->frames[i]);
		this->images[i]->update();
	}

	this->box2d.update();

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

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

		ofPushMatrix();
		ofTranslate(this->rects[i].get()->getPosition().x, this->rects[i].get()->getPosition().y);
		ofRotate(this->rects[i].get()->getRotation());

		this->images[i]->draw(-this->rect_size / 2, -this->rect_size / 2);

		ofPopMatrix();
	}

	this->fbo.end();
}

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

	this->fbo.draw(0, 0);
}

//========================================================================
int main() {

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

100

101

#include "ofApp.h"

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

void ofApp::setup() {

ofBackground(39);

ofSetWindowTitle("openframeworks");

this->cap.open("D:\\video\\image.mp4");

this->cap_size = cv::Size(640, 360);

ofSetFrameRate(this->cap.get(CV_CAP_PROP_FPS));

this->box2d.init();

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

this->box2d.createBounds();

this->box2d.setFPS(30);

this->box2d.registerGrabbing();

this->rect_size = 20;

for (int x = 0; x < this->cap_size.width; x += this->rect_size) {

for (int y = 0; y < this->cap_size.height; y += this->rect_size) {

ofPoint start_point(x + ofGetWidth() * 0.5 - this->cap_size.width * 0.5, y + ofGetHeight() * 0.5 - this->cap_size.height * 0.5);

this->rects.push_back(shared_ptr<ofxBox2dRect>(new ofxBox2dRect));

this->rects.back().get()->setPhysics(1.0, 0.5, 5.0);

this->rects.back().get()->setup(this->box2d.getWorld(), start_point.x, start_point.y, this->rect_size, this->rect_size);

unique_ptr<ofImage> image(new ofImage());

image->allocate(this->rect_size, this->rect_size, OF_IMAGE_COLOR);

cv::Mat frame = cv::Mat(cv::Size(image->getWidth(), image->getHeight()), CV_MAKETYPE(CV_8UC3, image->getPixels().getNumChannels()), image->getPixels().getData(), 0);

this->images.push_back(std::move(image));

this->frames.push_back(frame);

cv::Rect rect = cv::Rect(x, y, this->rect_size, this->rect_size);

this->cv_rects.push_back(rect);

this->start_point.push_back(start_point);

}

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

}

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

void ofApp::update() {

cv::Mat src, frame;

this->cap >> src;

if (src.empty()) {

cap.set(CV_CAP_PROP_POS_FRAMES, 1);

return;

}

cv::resize(src, frame, this->cap_size);

cv::cvtColor(frame, frame, CV_BGR2RGB);

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

ofVec2f distance = this->start_point[i] - this->rects[i]->getPosition();

this->rects[i]->addForce(distance, 0.01);

cv::Mat tmp_box_image(frame, this->cv_rects[i]);

tmp_box_image.copyTo(this->frames[i]);

this->images[i]->update();

}

this->box2d.update();

this->fbo.begin();

ofClear(0);

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

ofPushMatrix();

ofTranslate(this->rects[i].get()->getPosition().x, this->rects[i].get()->getPosition().y);

ofRotate(this->rects[i].get()->getRotation());

this->images[i]->draw(-this->rect_size / 2, -this->rect_size / 2);

ofPopMatrix();

}

this->fbo.end();

}

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

void ofApp::draw() {

this->fbo.draw(0, 0);

}

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

int main() {

ofSetupOpenGL(1280, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2018年7月24日2018年7月24日

Sphere in the box. openframeworks

[ Video ]

[ About ]
物理ライブラリ(ofxBullet)を使って球体を箱に閉じ込めました。球体はお互いに反発しており、球体のサイズは反発関係にある球体の数で増減します。

I locked the sphere into a box with a physical engine (ofxBullet). The Sphere are repelling each other. And, size is determined by the number nearby spheres.

[ Source ]

#pragma once
#include "ofMain.h"
#include "ofxBullet.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) {};

	ofCamera cam;
	ofxBulletWorldRigid world;

	unique_ptr<ofxBulletCustomShape> bounds_shape;
	vector<unique_ptr<ofxBulletSphere>> spheres;
};

#pragma once

#include "ofMain.h"

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

ofCamera cam;

ofxBulletWorldRigid world;

unique_ptr<ofxBulletCustomShape> bounds_shape;

vector<unique_ptr<ofxBulletSphere>> spheres;

};

#include "ofApp.h"

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

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

	ofBackground(239);
	ofEnableDepthTest();

	// Initialize ofxBulletWorld
	this->cam.setPosition(ofVec3f(0, 3.f, -30.f));
	this->cam.lookAt(ofVec3f(0, 0, 0), ofVec3f(0, -1, 0));
	this->world.setup();
	this->world.enableGrabbing();
	this->world.setCamera(&this->cam);
	this->world.setGravity(ofVec3f());

	// Create Big Box
	ofVec3f start_location;
	ofPoint dimens;
	float bounds_width = 300;
	float h_width = bounds_width * 0.5;
	float depth = 10.;
	float h_depth = depth * 0.5;
	this->bounds_shape.reset(new ofxBulletCustomShape());
	this->bounds_shape->create(world.world, ofVec3f(0, 0, 0), 10.);
	for (int i = 0; i < 6; i++) {
		if (i == 0) { // ground //
			start_location.set(0., h_width + h_depth, 0.);
			dimens.set(bounds_width, depth, bounds_width);
		}
		else if (i == 1) { // back wall //
			start_location.set(0, 0, h_width + h_depth);
			dimens.set(bounds_width, bounds_width, depth);
		}
		else if (i == 2) { // right wall //
			start_location.set(h_width + h_depth, 0, 0.);
			dimens.set(depth, bounds_width, bounds_width);
		}
		else if (i == 3) { // left wall //
			start_location.set(-h_width - h_depth, 0, 0.);
			dimens.set(depth, bounds_width, bounds_width);
		}
		else if (i == 4) { // ceiling //
			start_location.set(0, -h_width - h_depth, 0.);
			dimens.set(bounds_width, depth, bounds_width);
		}
		else if (i == 5) { // front wall //
			start_location.set(0, 0, -h_width - h_depth);
			dimens.set(bounds_width, bounds_width, depth);
		}
		btBoxShape* boxShape = ofBtGetBoxCollisionShape(dimens.x, dimens.y, dimens.z);
		this->bounds_shape->addShape(boxShape, start_location);
	}
	this->bounds_shape->add();

	// Create Spheres
	for (int i = 0; i < 255; i++) {

		unique_ptr<ofxBulletSphere> sphere(new ofxBulletSphere);
		float size = 5;
		sphere->create(this->world.world, ofVec3f(ofRandom(-100, 100), ofRandom(-100, 100), ofRandom(-100, 100)), 1, size);
		sphere->setRestitution(1.0);
		sphere->add();
		this->spheres.push_back(move(sphere));
	}
}

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

	ofSeedRandom(39);

	// Big Box Moving To Center 
	if (!ofGetMousePressed()) {

		ofVec3f diff = ofVec3f(0, 0, 0) - bounds_shape->getPosition();
		diff *= 500.f;
		bounds_shape->applyCentralForce(diff);
	}

	// Compute Spheres Relation
	for (int i = 0; i < this->spheres.size(); i++) {

		for (int j = i + 1; j < this->spheres.size(); j++) {

			float distance = this->spheres[i]->getPosition().distance(this->spheres[j]->getPosition());
			if (distance < 80) {

				ofVec3f diff = this->spheres[i]->getPosition() - this->spheres[j]->getPosition();
				ofMap(distance, 0, 50, 40, -2);
				this->spheres[i]->applyCentralForce(diff);
				this->spheres[j]->applyCentralForce(-diff);
			}
		}
	}

	this->world.update();
}

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

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

	// Draw Big Box
	ofNoFill();
	if (ofGetMousePressed()) {

		ofSetColor(39, 39, 239);
	}
	else {

		ofSetColor(39);
	}
	bounds_shape->transformGL();
	ofDrawBox(ofVec3f(0, 0, 0), 300);
	bounds_shape->restoreTransformGL();

	// Compute Sphere Size
	ofFill();
	vector<float> sphere_sizes(this->spheres.size(), 0.0f);
	for (int i = 0; i < this->spheres.size(); i++) {

		for (int j = i + 1; j < this->spheres.size(); j++) {

			float distance = this->spheres[i]->getPosition().distance(this->spheres[j]->getPosition());
			if (distance < 50) {

				sphere_sizes[i] += 2;
				sphere_sizes[j] += 2;
			}
		}
	}

	// Draw Sphere
	for (int i = 0; i < this->spheres.size(); i++) {

		ofColor sphere_color;
		sphere_color.setHsb(ofRandom(255), 200, 255);
		ofSetColor(sphere_color);

		ofDrawSphere(this->spheres[i]->getPosition(), sphere_sizes[i]);
	}
}

//--------------------------------------------------------------
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

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

#include "ofApp.h"

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

void ofApp::setup(){

ofSetFrameRate(60);

ofSetWindowTitle("openFrameworks");

ofBackground(239);

ofEnableDepthTest();

// Initialize ofxBulletWorld

this->cam.setPosition(ofVec3f(0, 3.f, -30.f));

this->cam.lookAt(ofVec3f(0, 0, 0), ofVec3f(0, -1, 0));

this->world.setup();

this->world.enableGrabbing();

this->world.setCamera(&this->cam);

this->world.setGravity(ofVec3f());

// Create Big Box

ofVec3f start_location;

ofPoint dimens;

float bounds_width = 300;

float h_width = bounds_width * 0.5;

float depth = 10.;

float h_depth = depth * 0.5;

this->bounds_shape.reset(new ofxBulletCustomShape());

this->bounds_shape->create(world.world, ofVec3f(0, 0, 0), 10.);

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

if (i == 0) { // ground //

start_location.set(0., h_width + h_depth, 0.);

dimens.set(bounds_width, depth, bounds_width);

}

else if (i == 1) { // back wall //

start_location.set(0, 0, h_width + h_depth);

dimens.set(bounds_width, bounds_width, depth);

}

else if (i == 2) { // right wall //

start_location.set(h_width + h_depth, 0, 0.);

dimens.set(depth, bounds_width, bounds_width);

}

else if (i == 3) { // left wall //

start_location.set(-h_width - h_depth, 0, 0.);

dimens.set(depth, bounds_width, bounds_width);

}

else if (i == 4) { // ceiling //

start_location.set(0, -h_width - h_depth, 0.);

dimens.set(bounds_width, depth, bounds_width);

}

else if (i == 5) { // front wall //

start_location.set(0, 0, -h_width - h_depth);

dimens.set(bounds_width, bounds_width, depth);

}

btBoxShape* boxShape = ofBtGetBoxCollisionShape(dimens.x, dimens.y, dimens.z);

this->bounds_shape->addShape(boxShape, start_location);

}

this->bounds_shape->add();

// Create Spheres

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

unique_ptr<ofxBulletSphere> sphere(new ofxBulletSphere);

float size = 5;

sphere->create(this->world.world, ofVec3f(ofRandom(-100, 100), ofRandom(-100, 100), ofRandom(-100, 100)), 1, size);

sphere->setRestitution(1.0);

sphere->add();

this->spheres.push_back(move(sphere));

}

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

void ofApp::update() {

ofSeedRandom(39);

// Big Box Moving To Center

if (!ofGetMousePressed()) {

ofVec3f diff = ofVec3f(0, 0, 0) - bounds_shape->getPosition();

diff *= 500.f;

bounds_shape->applyCentralForce(diff);

}

// Compute Spheres Relation

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

for (int j = i + 1; j < this->spheres.size(); j++) {

float distance = this->spheres[i]->getPosition().distance(this->spheres[j]->getPosition());

if (distance < 80) {

ofVec3f diff = this->spheres[i]->getPosition() - this->spheres[j]->getPosition();

ofMap(distance, 0, 50, 40, -2);

this->spheres[i]->applyCentralForce(diff);

this->spheres[j]->applyCentralForce(-diff);

}

this->world.update();

}

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

void ofApp::draw() {

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

// Draw Big Box

ofNoFill();

if (ofGetMousePressed()) {

ofSetColor(39, 39, 239);

}

else {

ofSetColor(39);

}

bounds_shape->transformGL();

ofDrawBox(ofVec3f(0, 0, 0), 300);

bounds_shape->restoreTransformGL();

// Compute Sphere Size

ofFill();

vector<float> sphere_sizes(this->spheres.size(), 0.0f);

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

for (int j = i + 1; j < this->spheres.size(); j++) {

float distance = this->spheres[i]->getPosition().distance(this->spheres[j]->getPosition());

if (distance < 50) {

sphere_sizes[i] += 2;

sphere_sizes[j] += 2;

}

// Draw Sphere

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

ofColor sphere_color;

sphere_color.setHsb(ofRandom(255), 200, 255);

ofSetColor(sphere_color);

ofDrawSphere(this->spheres[i]->getPosition(), sphere_sizes[i]);

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

2018年7月23日2018年7月23日

Spiral circles. openframeworks

[ Video ]

[ About ]
円の断片を規則的に回転させてみました。

I tried regularly rotating pieces of a circle.

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

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

};

#include "ofApp.h"

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

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

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

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

	ofSeedRandom(39);
}

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

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

	for (int x_index = -2; x_index <= 2; x_index++) {

		for (int y_index = -2; y_index <= 2; y_index++) {

			ofPoint location(x_index * 144, y_index * 144);
			ofPushMatrix();
			ofTranslate(location);

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

				ofColor color;
				color.setHsb(ofRandom(255), 200, 255);
				ofSetColor(color);

				int start_deg = ofGetFrameNum() * i;
				int radius = i * 6;

				ofBeginShape();
				for (int deg = start_deg; deg < start_deg + 90; deg += 1) {

					ofVertex(radius * cos(deg * DEG_TO_RAD), radius * sin(deg * DEG_TO_RAD));
				}
				ofEndShape();
			}

			ofPopMatrix();
		}
	}
}

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

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(60);

ofSetWindowTitle("Insta");

ofBackground(39);

ofNoFill();

ofSetLineWidth(2);

}

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

void ofApp::update() {

ofSeedRandom(39);

}

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

void ofApp::draw() {

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

for (int x_index = -2; x_index <= 2; x_index++) {

for (int y_index = -2; y_index <= 2; y_index++) {

ofPoint location(x_index * 144, y_index * 144);

ofPushMatrix();

ofTranslate(location);

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

ofColor color;

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

ofSetColor(color);

int start_deg = ofGetFrameNum() * i;

int radius = i * 6;

ofBeginShape();

for (int deg = start_deg; deg < start_deg + 90; deg += 1) {

ofVertex(radius * cos(deg * DEG_TO_RAD), radius * sin(deg * DEG_TO_RAD));

}

ofEndShape();

}

ofPopMatrix();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

[ほしいものリスト]
Amazon

[ Sponsor Link ]

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