均等にrandomに色々な形を敷き詰めてみる
processingでランダムに色々なことができるのは楽しいその2。
Processingで均等だけどランダムに色々な形を敷き詰めてみることに挑戦。
「遊んで学ぶはじめてのプログラミング Processingの魔法学校」
Lv7魔法コンクール!?〜繰り返しと関数でアートに挑戦〜より
p,170のrandom_cast.pdeをちょっといじる。
random_cast2.pde
----------------------------------------------
size(600,200);
background(0);
noStroke();
for(int i=0;i<1000;i++){
int x = int(random(0,60));
int y = int(random(0,20));
println(x);
fill(255,random(125,255),random(0,125));
ellipse(x*10+5,y*10+5,10,10);
}
----------------------------------------------
fill(R,G,B)のうち、RとGを高めにしておいて、Bを低めにすることで、黄色〜暖色系の丸を敷き詰める。丸を小さめにして、だーっと並べてみると、これはこれでまた可愛い。ランダムな可愛さ。
これ、丸じゃなくて四角形とか六角形とかできないかなぁ。
ellipseをrectに変更して、ついでに四角形の辺の長さをhという変数使う。
random_cast_rect.pde
----------------------------------------------
size(600,200);
background(0);
noStroke();
int h =25;
for(int i=0;i<100;i++){
int x = int(random(0,600/h));
int y = int(random(0,200/h));
println(x);
fill(0,random(125,255),255);
rect(x*h,y*h,h,h);
}
----------------------------------------------
※ここで一度失敗している。画面サイズの前にint sx=600のようにサイズも変数で指定しちゃおうと思ったんだけど、processing動かなくなってしまった。
青っぽい四角を黒背景に色々敷き詰めてみる。かっこいい。
よし、そんじゃぁ六角形だ。六角形を呼び出す魔法の言葉はなんだ。
Proce55ing.walker,blog » Blog Archive » Processingで五角形・六角形・ハート形を描く
→ここのページを参考に、五角形、六角形、ハート形の描き方を学ぶ。
----------------------------------------------
void setup(){
size(300, 300);
}
void draw(){
pentagon(75, 75, 150);
hexagon(225, 75, 150);
heart(75, 225, 150, 150);
}
// 五角形の描画
void pentagon(float centerX, float centerY, float size){
final float COS = {0.95105654, 0.5877853, -0.5877852, -0.95105654, 0};
final float SIN = {-0.309017, 0.809017, 0.809017, -0.30901697, -1};
final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 5; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}
// 六角形の描画
void hexagon(float centerX, float centerY, float size){
final float COS = {1, 0.5, -0.5, -1, -0.5, 0.5};
final float SIN = {0, 0.8660254, 0.8660254, 0, -0.86602524, -0.86602524};
final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 6; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}
// ハート形の描画
void heart(float centerX, float centerY, float width, float height){
final float WIDTH = width / 2 * 0.85;
final float HEIGHT = height / 2;
final float OFFSET = centerY - (HEIGHT / 6 * 5);
beginShape();
for(int i = 0; i < 30; i++){
float tx = abs(sin(radians(i * 12))) * (1 + cos(radians(i * 12))) * sin(radians(i * 12)) * WIDTH + centerX;
float ty = (0.8 + cos(radians(i * 12))) * cos(radians(i * 12)) * HEIGHT + OFFSET;
vertex(tx, ty);
}
endShape(CLOSE);
}
----------------------------------------------
この中から六角形を書き出す部分を取り出す
----------------------------------------------
void setup(){
size(300, 300);
}
void draw(){
hexagon(225, 75, 150);
}
// 六角形の描画
void hexagon(float centerX, float centerY, float size){
final float COS = {1, 0.5, -0.5, -1, -0.5, 0.5};
final float SIN = {0, 0.8660254, 0.8660254, 0, -0.86602524, -0.86602524};
final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 6; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}
----------------------------------------------
これを使って均等だけどランダムに六角形を敷き詰めることに挑戦してみる。
random_cast_hexagon.pde
----------------------------------------------
void setup(){
size(600, 200);
background(0);
noStroke();
int h =25;
blendMode(ADD);
for(int j=0;j<400;j++){
int hx = int(random(0,600/h));
int hy = int(random(0,200/h));
println(hx);
fill(random(150,255),random(0,100),random(0,200));
hexagon(hx*h+h/2, hy*h+h/2, h);
}
}
// 六角形の描画
void hexagon(float centerX, float centerY, float size){
final float COS = {1, 0.5, -0.5, -1, -0.5, 0.5};
final float SIN = {0, 0.8660254, 0.8660254, 0, -0.86602524, -0.86602524};
final float RADIUS = size / 2;
beginShape();
for(int i = 0; i < 6; i++){
float tx = COS[i] * RADIUS + centerX;
float ty = SIN[i] * RADIUS + centerY;
vertex(tx, ty);
}
endShape(CLOSE);
}
----------------------------------------------
void draw{}の中にhexagonを入れちゃうと、すごい勢いでチカチカ描画が変わっていくので、一回こっきりの描画でいいやと思いvoid setup{}の中にhexagonを入れて描いてみた。これが正しいかどうかは正直わからない。
blendMode(ADD)も使ってみた。重なった部分は明るくなって(白に近づいて)いくっぽい。
六角形敷き詰められた〜
今後の課題
ダイヤ型敷き詰めてみてもいいかもしれない。
もしくは、六角形を蜂の巣状にしきつめるにはどうすっかなぁ〜
※↓参考図書です。子供がProcessingに興味持ちそうだったらまずこの本渡すなぁ。。。