noise – ページ 84 – プログラミング de 落描き

2022年8月17日

Gradation boxes. Draw by openFrameworks

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

	void setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float size);
	void setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float height, float width, float depth);

	ofEasyCam cam;
	ofMesh face, frame;

	vector<glm::vec3> location_list;
	vector<ofColor> color_list;
};

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

void setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float size);

void setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float height, float width, float depth);

ofEasyCam cam;

ofMesh face, frame;

vector<glm::vec3> location_list;

vector<ofColor> color_list;

};

#include "ofApp.h"

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

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

	ofBackground(0);
	ofSetLineWidth(1);
	ofEnableDepthTest();

	this->frame.setMode(ofPrimitiveMode::OF_PRIMITIVE_LINES);

	int span = 60;
	for (int x = -240; x <= 240; x += span) {

		for (int y = -240; y <= 240; y += span) {

			for (int z = -240; z <= 240; z += span) {

				this->location_list.push_back(glm::vec3(x, y, z));
			}
		}
	}
}

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

	ofSeedRandom(39);

	this->face.clear();
	this->frame.clear();

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

		this->setBoxToMesh(this->face, this->frame, this->location_list[i], size);
	}
}

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

	this->cam.begin();
	ofRotateY(ofGetFrameNum() * 0.333333);

	this->face.draw();
	this->frame.drawWireframe();

	for (int i = 0; i < this->frame.getNumVertices(); i++) {

		ofSetColor(this->frame.getColor(i));
		ofDrawSphere(this->frame.getVertex(i), 2);
	}

	this->cam.end();
}

//--------------------------------------------------------------
void ofApp::setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float size) {

	this->setBoxToMesh(face_target, frame_target, location, size, size, size);
}

//--------------------------------------------------------------
void ofApp::setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float height, float width, float depth) {

	int face_index = face_target.getNumVertices();
	int frame_index = frame_target.getNumVertices();

	vector<glm::vec3> vertices;
	vertices.push_back(glm::vec3(width * -0.5, height * 0.5, depth * -0.5));
	vertices.push_back(glm::vec3(width * 0.5, height * 0.5, depth * -0.5));
	vertices.push_back(glm::vec3(width * 0.5, height * 0.5, depth * 0.5));
	vertices.push_back(glm::vec3(width * -0.5, height * 0.5, depth * 0.5));

	vertices.push_back(glm::vec3(width * -0.5, height * -0.5, depth * -0.5));
	vertices.push_back(glm::vec3(width * 0.5, height * -0.5, depth * -0.5));
	vertices.push_back(glm::vec3(width * 0.5, height * -0.5, depth * 0.5));
	vertices.push_back(glm::vec3(width * -0.5, height * -0.5, depth * 0.5));

	ofColor color;
	ofSeedRandom(39);
	auto seed = glm::vec3(ofRandom(1000), ofRandom(2000, 3000), ofRandom(4000, 5000));
	for (auto& vertex : vertices) {

		face_target.addVertex(location + vertex * 0.99);
		frame_target.addVertex(location + vertex);
		
		color.setHsb(
			ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.x + ofGetFrameNum() * 0.005)), 0, 1, 168, 255),
			ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.y + ofGetFrameNum() * 0.005)), 0, 1, 100, 255),
			ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.z + ofGetFrameNum() * 0.005)), 0, 1, 100, 255));
		face_target.addColor(color);

		color.setHsb(ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.x + ofGetFrameNum() * 0.005)), 0, 1, 168, 255), 255, 255);
		frame_target.addColor(color);
	}

	face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 1); face_target.addIndex(face_index + 2);
	face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 2); face_target.addIndex(face_index + 3);

	face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 5); face_target.addIndex(face_index + 6);
	face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 6); face_target.addIndex(face_index + 7);

	face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 1);
	face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 5); face_target.addIndex(face_index + 1);

	face_target.addIndex(face_index + 1); face_target.addIndex(face_index + 5); face_target.addIndex(face_index + 6);
	face_target.addIndex(face_index + 6); face_target.addIndex(face_index + 2); face_target.addIndex(face_index + 1);

	face_target.addIndex(face_index + 2); face_target.addIndex(face_index + 6); face_target.addIndex(face_index + 7);
	face_target.addIndex(face_index + 7); face_target.addIndex(face_index + 3); face_target.addIndex(face_index + 2);

	face_target.addIndex(face_index + 3); face_target.addIndex(face_index + 7); face_target.addIndex(face_index + 4);
	face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 3);

	frame_target.addIndex(frame_index + 0); frame_target.addIndex(frame_index + 1);
	frame_target.addIndex(frame_index + 1); frame_target.addIndex(frame_index + 2);
	frame_target.addIndex(frame_index + 2); frame_target.addIndex(frame_index + 3);
	frame_target.addIndex(frame_index + 3); frame_target.addIndex(frame_index + 0);

	frame_target.addIndex(frame_index + 4); frame_target.addIndex(frame_index + 5);
	frame_target.addIndex(frame_index + 5); frame_target.addIndex(frame_index + 6);
	frame_target.addIndex(frame_index + 6); frame_target.addIndex(frame_index + 7);
	frame_target.addIndex(frame_index + 7); frame_target.addIndex(frame_index + 4);

	frame_target.addIndex(frame_index + 0); frame_target.addIndex(frame_index + 4);
	frame_target.addIndex(frame_index + 1); frame_target.addIndex(frame_index + 5);
	frame_target.addIndex(frame_index + 2); frame_target.addIndex(frame_index + 6);
	frame_target.addIndex(frame_index + 3); frame_target.addIndex(frame_index + 7);
}

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetFrameRate(60);

ofSetWindowTitle("openFrameworks");

ofBackground(0);

ofSetLineWidth(1);

ofEnableDepthTest();

this->frame.setMode(ofPrimitiveMode::OF_PRIMITIVE_LINES);

int span = 60;

for (int x = -240; x <= 240; x += span) {

for (int y = -240; y <= 240; y += span) {

for (int z = -240; z <= 240; z += span) {

this->location_list.push_back(glm::vec3(x, y, z));

}

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

void ofApp::update() {

ofSeedRandom(39);

this->face.clear();

this->frame.clear();

float size = 30;

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

this->setBoxToMesh(this->face, this->frame, this->location_list[i], size);

}

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

void ofApp::draw() {

this->cam.begin();

ofRotateY(ofGetFrameNum() * 0.333333);

this->face.draw();

this->frame.drawWireframe();

for (int i = 0; i < this->frame.getNumVertices(); i++) {

ofSetColor(this->frame.getColor(i));

ofDrawSphere(this->frame.getVertex(i), 2);

}

this->cam.end();

}

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

void ofApp::setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float size) {

this->setBoxToMesh(face_target, frame_target, location, size, size, size);

}

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

void ofApp::setBoxToMesh(ofMesh& face_target, ofMesh& frame_target, glm::vec3 location, float height, float width, float depth) {

int face_index = face_target.getNumVertices();

int frame_index = frame_target.getNumVertices();

vector<glm::vec3> vertices;

vertices.push_back(glm::vec3(width * -0.5, height * 0.5, depth * -0.5));

vertices.push_back(glm::vec3(width * 0.5, height * 0.5, depth * -0.5));

vertices.push_back(glm::vec3(width * 0.5, height * 0.5, depth * 0.5));

vertices.push_back(glm::vec3(width * -0.5, height * 0.5, depth * 0.5));

vertices.push_back(glm::vec3(width * -0.5, height * -0.5, depth * -0.5));

vertices.push_back(glm::vec3(width * 0.5, height * -0.5, depth * -0.5));

vertices.push_back(glm::vec3(width * 0.5, height * -0.5, depth * 0.5));

vertices.push_back(glm::vec3(width * -0.5, height * -0.5, depth * 0.5));

ofColor color;

ofSeedRandom(39);

auto seed = glm::vec3(ofRandom(1000), ofRandom(2000, 3000), ofRandom(4000, 5000));

for (auto& vertex : vertices) {

face_target.addVertex(location + vertex * 0.99);

frame_target.addVertex(location + vertex);

color.setHsb(

ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.x + ofGetFrameNum() * 0.005)), 0, 1, 168, 255),

ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.y + ofGetFrameNum() * 0.005)), 0, 1, 100, 255),

ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.z + ofGetFrameNum() * 0.005)), 0, 1, 100, 255));

face_target.addColor(color);

color.setHsb(ofMap(ofNoise(glm::vec4((location + vertex) * 0.0035, seed.x + ofGetFrameNum() * 0.005)), 0, 1, 168, 255), 255, 255);

frame_target.addColor(color);

}

face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 1); face_target.addIndex(face_index + 2);

face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 2); face_target.addIndex(face_index + 3);

face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 5); face_target.addIndex(face_index + 6);

face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 6); face_target.addIndex(face_index + 7);

face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 1);

face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 5); face_target.addIndex(face_index + 1);

face_target.addIndex(face_index + 1); face_target.addIndex(face_index + 5); face_target.addIndex(face_index + 6);

face_target.addIndex(face_index + 6); face_target.addIndex(face_index + 2); face_target.addIndex(face_index + 1);

face_target.addIndex(face_index + 2); face_target.addIndex(face_index + 6); face_target.addIndex(face_index + 7);

face_target.addIndex(face_index + 7); face_target.addIndex(face_index + 3); face_target.addIndex(face_index + 2);

face_target.addIndex(face_index + 3); face_target.addIndex(face_index + 7); face_target.addIndex(face_index + 4);

face_target.addIndex(face_index + 4); face_target.addIndex(face_index + 0); face_target.addIndex(face_index + 3);

frame_target.addIndex(frame_index + 0); frame_target.addIndex(frame_index + 1);

frame_target.addIndex(frame_index + 1); frame_target.addIndex(frame_index + 2);

frame_target.addIndex(frame_index + 2); frame_target.addIndex(frame_index + 3);

frame_target.addIndex(frame_index + 3); frame_target.addIndex(frame_index + 0);

frame_target.addIndex(frame_index + 4); frame_target.addIndex(frame_index + 5);

frame_target.addIndex(frame_index + 5); frame_target.addIndex(frame_index + 6);

frame_target.addIndex(frame_index + 6); frame_target.addIndex(frame_index + 7);

frame_target.addIndex(frame_index + 7); frame_target.addIndex(frame_index + 4);

frame_target.addIndex(frame_index + 0); frame_target.addIndex(frame_index + 4);

frame_target.addIndex(frame_index + 1); frame_target.addIndex(frame_index + 5);

frame_target.addIndex(frame_index + 2); frame_target.addIndex(frame_index + 6);

frame_target.addIndex(frame_index + 3); frame_target.addIndex(frame_index + 7);

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

2022年8月15日

irregularity. draw by openFrameworks

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

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

	ofSetWindowTitle("openFrameworks");
	ofSetFrameRate(30);

	ofBackground(0);
	ofNoFill();
	ofSetLineWidth(2);
	ofEnableDepthTest();
	ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);
}

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

	ofSeedRandom(39);
}

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

	ofTranslate(ofGetWindowSize() * 0.5);

	auto noise_seed = glm::vec3(ofRandom(1000), ofRandom(1000), ofRandom(1000));
	for (int x = -330; x <= 330; x += 30) {

		for (int y = -330; y <= 330; y += 30) {

			ofPushMatrix();
			ofTranslate(x, y);

			auto distance = glm::length(glm::vec2(x, y));

			auto x_value = ofNoise(noise_seed.x, x * 0.015, y * 0.015, ofGetFrameNum() * 0.015);
			auto y_value = ofNoise(noise_seed.y, x * 0.015, y * 0.015, ofGetFrameNum() * 0.015);
			auto z_value = ofNoise(noise_seed.z, x * 0.015, y * 0.015, ofGetFrameNum() * 0.015);

			auto x_deg = x_value < 0.35 ? ofMap(x_value, 0, 0.35, -360, 0) : x_value > 0.75 ? ofMap(x_value, 0.75, 1, 0, 360) : 0;
			auto y_deg = y_value < 0.35 ? ofMap(y_value, 0, 0.35, -360, 0) : y_value > 0.75 ? ofMap(y_value, 0.75, 1, 0, 360) : 0;
			auto z_deg = z_value < 0.35 ? ofMap(z_value, 0, 0.35, -360, 0) : z_value > 0.75 ? ofMap(z_value, 0.75, 1, 0, 360) : 0;

			ofRotateZ(z_deg);
			ofRotateY(y_deg);
			ofRotateX(x_deg);

			auto alpha = 64;

			ofFill();
			ofSetColor(255, 0, 0, alpha);
			ofDrawCircle(glm::vec2(), 12);

			ofNoFill();
			ofSetColor(255, 0, 0);
			ofDrawCircle(glm::vec2(), 12);

			ofPopMatrix();
		}
	}
}

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

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetWindowTitle("openFrameworks");

ofSetFrameRate(30);

ofBackground(0);

ofNoFill();

ofSetLineWidth(2);

ofEnableDepthTest();

ofEnableBlendMode(ofBlendMode::OF_BLENDMODE_ADD);

}

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

void ofApp::update() {

ofSeedRandom(39);

}

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

void ofApp::draw() {

ofTranslate(ofGetWindowSize() * 0.5);

auto noise_seed = glm::vec3(ofRandom(1000), ofRandom(1000), ofRandom(1000));

for (int x = -330; x <= 330; x += 30) {

for (int y = -330; y <= 330; y += 30) {

ofPushMatrix();

ofTranslate(x, y);

auto distance = glm::length(glm::vec2(x, y));

auto x_value = ofNoise(noise_seed.x, x * 0.015, y * 0.015, ofGetFrameNum() * 0.015);

auto y_value = ofNoise(noise_seed.y, x * 0.015, y * 0.015, ofGetFrameNum() * 0.015);

auto z_value = ofNoise(noise_seed.z, x * 0.015, y * 0.015, ofGetFrameNum() * 0.015);

auto x_deg = x_value < 0.35 ? ofMap(x_value, 0, 0.35, -360, 0) : x_value > 0.75 ? ofMap(x_value, 0.75, 1, 0, 360) : 0;

auto y_deg = y_value < 0.35 ? ofMap(y_value, 0, 0.35, -360, 0) : y_value > 0.75 ? ofMap(y_value, 0.75, 1, 0, 360) : 0;

auto z_deg = z_value < 0.35 ? ofMap(z_value, 0, 0.35, -360, 0) : z_value > 0.75 ? ofMap(z_value, 0.75, 1, 0, 360) : 0;

ofRotateZ(z_deg);

ofRotateY(y_deg);

ofRotateX(x_deg);

auto alpha = 64;

ofFill();

ofSetColor(255, 0, 0, alpha);

ofDrawCircle(glm::vec2(), 12);

ofNoFill();

ofSetColor(255, 0, 0);

ofDrawCircle(glm::vec2(), 12);

ofPopMatrix();

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

2022年8月14日

Crossing noise waves. Draw by openFrameworks

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

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

	ofSetWindowTitle("openFrameworks");
	ofSetFrameRate(30);

	ofBackground(0);
	ofSetColor(1, 97, 235);
	ofSetLineWidth(2);
}

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

	ofSeedRandom(39);
}

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

	auto noise_seed = glm::vec2(ofRandom(1000), ofRandom(1000));
	int span = 20;
	int param = 7;

	for (int y = 0; y <= 720; y += span) {

		int x = ofMap(ofNoise(noise_seed.x, y * 0.003 + ofGetFrameNum() * 0.0075), 0, 1, span * param, 720 - span * param);
		x = (x / span) * span;

		ofDrawLine(x - span * param, y, x + span * param, y);
	}	

	for (int x = 0; x <= 720; x += span) {

		int y = ofMap(ofNoise(noise_seed.y, x * 0.003 + ofGetFrameNum() * 0.0075), 0, 1, span * param, 720 - span * param);
		y = (y / span) * span;

		ofDrawLine(x, y - span * param, x, y + span * param);
	}
}

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

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

#include "ofApp.h"

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

void ofApp::setup() {

ofSetWindowTitle("openFrameworks");

ofSetFrameRate(30);

ofBackground(0);

ofSetColor(1, 97, 235);

ofSetLineWidth(2);

}

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

void ofApp::update() {

ofSeedRandom(39);

}

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

void ofApp::draw() {

auto noise_seed = glm::vec2(ofRandom(1000), ofRandom(1000));

int span = 20;

int param = 7;

for (int y = 0; y <= 720; y += span) {

int x = ofMap(ofNoise(noise_seed.x, y * 0.003 + ofGetFrameNum() * 0.0075), 0, 1, span * param, 720 - span * param);

x = (x / span) * span;

ofDrawLine(x - span * param, y, x + span * param, y);

}

for (int x = 0; x <= 720; x += span) {

int y = ofMap(ofNoise(noise_seed.y, x * 0.003 + ofGetFrameNum() * 0.0075), 0, 1, span * param, 720 - span * param);

y = (y / span) * span;

ofDrawLine(x, y - span * param, x, y + span * param);

}

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

int main() {

ofSetupOpenGL(720, 720, OF_WINDOW);

ofRunApp(new ofApp());

}

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

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