ラズパイ3倍美味しいブログ

ラズパイ3を美味しく食べるはずがinto the VR!!! Amazon echoのAlexaがトモダチ・・・ラズパイはおやつ。

○ッキーマークもどきできたよ!?

 前回の記事で、Processingつかって、黒背景にドットをグラデーションかけて並べてみたけど、なんか目がチカチカする。円の大きさを大きくして、もうちょっと式を綺麗にするべく少々いじってみた。

dots3.pde
------------------------------------
void setup(){

size(640,1136);
background(255);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();
float r=50;

for(int i=0;i<(height/r)+2;i+=2){
for(int j=0;j<(width/r)+2;j+=2){
fill(360*(i/(height/r))*(j/(width/r)),100,100);
ellipse(j*r,i*r,r,r);
}
}
for(int i=1;i<(height/r)+2;i+=2){
for(int j=1;j<(width/r)+2;j+=2){
fill(360*(i/(height/r))*(j/(width/r)),100,100);
ellipse(j*r,i*r,r,r);
}
}

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots3.png");
}
}
------------------------------------

f:id:umesyurock0603:20170219234859p:plain

お、かわいいじゃーん★(自画自賛
円の半径をrという変数にできた&ちょっとプログラムスッキリしたぞ?いい感じかもしれない?!少なくとも1つ前の記事よりはましになった気がする。

ドットか〜。このドット、そういえばもしかして、こんなことできるだろうか。
大きな円の上に小さな円を2つ並べてみたら・・・もしかして。
dots4.pde
------------------------------------
void setup(){

size(640,1136);
background(0);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();
float r=60;
float mm=35;//耳の位置調整用
float mr=r*2/3;//耳の直径

for(int i=0;i<(height/r)+2;i+=2){
for(int j=0;j<(width/r)+2;j+=2){
ellipse(j*r,i*r,r,r);
ellipse(j*r-mm,i*r-mm,mr,mr);
ellipse(j*r+mm,i*r-mm,mr,mr);
fill(360*(i/(height/r))*(j/(width/r)),100,100);

}
}
ellipse(0,0,r,r);
fill(0,100,100);//左上の赤丸のためプログラム

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots4.png");
}
}
------------------------------------

f:id:umesyurock0603:20170219235004p:plain

ハハッ!できちゃった。左上の赤丸がどうしても白くなってしまうので、無理やり後から加えるという荒業を使っています。数式の美しさはどうしたんだ!!とはいいつつ、○ッキーマークできたので、楽しくなってきた。
相変わらず力技です。

力技ついでに、もう一個作ってみる。

dots5.pde
------------------------------------
void setup(){

size(640,1136);
background(0);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();
float r=60;
float mm=35;//耳の位置調整用
float mr=r*2/3;//耳の直径
float s=30;
float mms=17;
float ms=s*2/3;

for(int i=0;i<(height/r)+2;i+=2){
for(int j=0;j<(width/r)+2;j+=2){
ellipse(j*r,i*r,r,r);
ellipse(j*r-mm,i*r-mm,mr,mr);
ellipse(j*r+mm,i*r-mm,mr,mr);
fill(360*(i/(height/r))*(j/(width/r)),100,100);

}
}
ellipse(0,0,r,r);
fill(0,100,100);//左上の赤丸のためプログラム

for(int i=1;i<(height/r)+2;i+=2){
for(int j=1;j<(width/r)+2;j+=2){
ellipse(j*r,i*r-ms,s,s);
ellipse(j*r-mms,i*r-mms-ms,ms,ms);
ellipse(j*r+mms,i*r-mms-ms,ms,ms);
fill(360*(i/(height/r))*(j/(width/r)),100,100);
}
}

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots5.png");
}
}
------------------------------------

f:id:umesyurock0603:20170219235139p:plain

ハハッ!!さらに仲間が増えたよ!なんとなく等間隔に互い違いに並べたように見えるけど、これもわりとで調整しているので力技だよ。力技Processingだよ!

コメントはちゃんと書かないと、多分1週間後の自分へのダイイングメッセージにもならない気がする。この変数、なんでこんな名前つけてんだよ!って多分ツッコミしかしてないと思う。コメントはちゃんと書こう。。。

ネスト(入れ子)構造使ってみる

 Processingで自分の思い描いた図形を描くことを勉強したい。
自分の思った通りの図形を数式で描いてみたいんだよう。
こういうのを考えるのは、頭の体操というか、頭の良い人はもっとスマートな式を作ることができるんだろうかとか思う。

r-dimension.xsrv.jp

for文の中に、またfor文を入れるのは、これをネスト(入れ子)構造という。
うん、習った気がする。

www.d-improvement.jp

ついでに、カラーモードをHSBモードにする方法も入れてみる。

dots.pde
--------------------------------------------------
void setup(){

size(500,500);
background(255);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();

for(int i=0;i<9;i+=2){
for(int j=0;j<9;j+=2){
fill(3.6*(j+1)*(i+1),100,100);
ellipse(50+j*50,50+i*50,50,50);
}
}
for(int i=1;i<9;i+=2){
for(int j=1;j<9;j+=2){
fill(3.6*(j+1)*(i+1),100,100);
ellipse(50+j*50,50+i*50,50,50);
}
}

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots.png");
}
}
--------------------------------------------------
互い違いに並べてみる。なんかもっとまとめられそうな気もするんだけど、とりあえずこうすれば、このような法則で丸を並べられそう。

f:id:umesyurock0603:20170219111831p:plain

自分のテンションをあげたいので、iPhoneSEの壁紙にしてみる。
dots2.pde
--------------------------------------------------
void setup(){

size(640,1136);
background(0);
noStroke();
colorMode(HSB, 360, 100, 100, 100);//HSBモード(H:360段階, S,B,Alpha:各100段階)で指定する
smooth();

for(int i=0;i<(height/10)+2;i+=2){
for(int j=0;j<(width/10)+2;j+=2){
fill(3.6*(j/10+1)*(i/10+1),100,100);
ellipse(-10+j*10,-10+i*10,10,10);
}
}
for(int i=1;i<(height/10)+2;i+=2){
for(int j=1;j<(width/10)+2;j+=2){
fill(3.6*(j/10+1)*(i/10+1),100,100);
ellipse(-10+j*10,-10+i*10,10,10);
}
}

}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("dots2.png");
}
}
--------------------------------------------------

f:id:umesyurock0603:20170219112306p:plain

色が、もうちょっとグラデーションかけたいのだが、なんか、四角の塊が見えるような。
今回できるようになったこと
・RGBの色指定から、HSBでの色指定というものを知った。
・forの中を入れ子構造にすることができた。あとiとかjとか2つずつ大きくするということもできるようになった。i+=2という感じで。

今後の課題
・互い違いに丸を打てるようになったので、このxy値を中心として、正三角形を並べてみるとか、そういうことできないだろうか。
・もっとスマートにできるんじゃないか、という考えはいつも心の中に浮かぶ。

バレンタインだけど、三角形を並べます

 Processing使って、バレンタインになにを必死になって三角形を並べてんだと思いますが、並べました。ランダムに、しかも、ひっくり返ってたりもします。iphone SEの壁紙にできるように、大きさは横640ピクセル、縦1136ピクセルに合わせています。

random_cast_triangle.pde(※この記事の下にちょっと改良版載せてます20170219)

--------------------------------------
void setup(){

size(640,1136);
background(#63F09A);
strokeWeight(1);
stroke(0);
int h =30;//正三角形の辺の長さ

for(int i=0;i<2000;i++){
int tx = int(random(0,640/h+1));//x方向に何個目の三角形か
int ty = int(random(0,1136/h*2));//y方向に何個目の三角形か
fill(0,random(150,255),random(100,200));
if (i%2==0){
float x1=-h/2+h*tx;
float y1=h*sin(radians(60))*ty;
float x2=x1-h/2;
float y2=y1+h*sin(radians(60));
float x3=x2+h;
float y3=y2;
float x4=x1+h;
float y4=y1;
triangle(x1,y1,x2,y2,x3,y3);
}else{
float x1=-h/2+h*tx;
float y1=h*sin(radians(60))*ty;
float x2=x1-h/2;
float y2=y1+h*sin(radians(60));
float x3=x2+h;
float y3=y2;
float x4=x1+h;
float y4=y1;
triangle(x1,y1,x3,y3,x4,y4);
}
}
}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("random_cast_triangle.png");
}
}
--------------------------------------

エンターキー押して画像保存!

f:id:umesyurock0603:20170214103956p:plain

数式の美しさはどこへ行った。なんかすごい力技で作った気がする。
Processingのマスターから見たら、多分、ここはこっちに統一できる、とかあるんだろうな。同じことを繰り返し書いているのがすごく気持ち悪いんだけど、消すとダメだって怒られるから残している。もう少し知識を増やしてかっこよく計算式をまとめてみたい。

今回のまとめ

・トライアングルを正位置と逆位置とでランダムに並べることができた。

・ifとelse使ってみた
・sin(radians(90))使ってみた

今後の課題

・使う色を選んでランダムに並べてみたい。

・六角形も綺麗にしきつめてみたい。蜂の巣みたいに。
・ひし形をしきつめたい。(中心点を規定して描くとかできないかなぁ)
・いちご並べたい
・桜舞わせたい
・Processingで3Dの世界覗いてみたい。

 

------

ちょっとプログラムいじったので追記。通りすがりさんのコメントで学んだことを入れてみた。(他にも色々いじってるのでごちゃごちゃはしている。)

random_cast_triangle2.pde

--------------------------------

void setup(){

size(640,1136);
background(0);
smooth();
strokeWeight(1);
stroke(0);
colorMode(HSB, 360, 100, 100, 100);
int h =30;//正三角形の辺の長さ

for(int i=0;i<2000;i++){
int tx = int(random(0,640/h+1));//x方向に何個目の三角形か
int ty = int(random(0,1136/h*2));//y方向に何個目の三角形か
fill(random(140,180),random(80,100),100,random(100));
float x1=-h/2+h*tx;
float y1=h*sin(radians(60))*ty;
float x2=x1-h/2;
float y2=y1+h*sin(radians(60));
float x3=x2+h;
float y3=y2;
float x4=x1+h;
float y4=y1;
if (i%2==0){
triangle(x1,y1,x2,y2,x3,y3);
}else{
triangle(x1,y1,x3,y3,x4,y4);
}
}
}

void draw(){}

void keyPressed(){
if(keyCode==ENTER){
save("random_cast_triangle2.png");
}
}

--------------------------------

上記のプログラムのポイントは、ifの前にfloat x1・・・とかの条件をまとめて書くことができた、というところ。繰り返し書くのはできるだけ避けたいもんね!画像は下記のようになる。RGBではなく、HSBで色を指定することで思ったような色を指定したいんだけど、Hueの範囲がまだ自分の中でつかめていない。緑〜青にかけてのサイバーっぽい色合いにしてみたいなぁ。とりあえず現時点ではこんなかんじ。この三角も綺麗に並べ直したいんだよなぁ。。。

f:id:umesyurock0603:20170219110546p:plain

 

Processingで作ったA4サイズのハートの包装紙作ってラッピングする

 もうすぐ本当にバレンタインなんだけど、まだ包装紙とか用意してないぜって人に捧ぐ(つまり私だよ)

 前回の記事に続いて、ファンシーなハートを思いのほかファンシーに並べることができたので、気を良くした私はA4サイズの画像を作ることを思いついた。
A4用紙のピクセル値ってなんだろう。下記を参考にします。

www.benricho.org


A4サイズ、300dpiの場合→横3508ピクセル☓縦2480ピクセルで作ることにする。
サイズを大きく変えると、ハートの大きさも、散らす数も色々適当に変える必要がある。
random_heart_funcy_a4.pde
-------------------------------------
void setup(){
size(3508, 2480);//A4サイズ、300dpi
background(#E0B5C9);
noStroke();
randomSeed(1);
for(int i=0;i<1500;i++){
float hx = random(width);
float hy = random(0,height);
float h = random(40,200);
println(hx);
fill(random(210,255),random(0,100),random(0,100),random(50,100));
heart(hx, hy, h,h);
}
}

void draw(){}

// ハート形の描画
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 keyPressed(){
if(keyCode==ENTER){
save("random_heart_funcy_a4.png");
}
}
-------------------------------------
よーしできた。

f:id:umesyurock0603:20170212210123p:plain

2.2MB。ハートだけなのに重いな。。。こんなものなのか。
これをA4用紙に印刷してみる。

Processingで作ったハートの包装紙だよ。↓印刷した

 f:id:umesyurock0603:20170212212103j:image

これを使えば、どんなものでもラッピング自由自在。愛に溢れております。

 f:id:umesyurock0603:20170212212114j:image

f:id:umesyurock0603:20170212212119j:image

(うーん。ラッピングの腕前はまだまだなので、A4サイズの用紙でセンス良くラッピングする方法を探さねば。。。)

可愛いハートをいろんなサイズで好き勝手に敷き詰める

Processingで自分の想像通りに何かを作り上げるのは楽しい。

色々な関数を覚えていくのは、魔法の言葉を覚えていくようだな、ってまさに思う。魔法学校の生徒も、こんな風に魔法の言葉を覚えていって、魔法の言葉を使いこなせる生徒はどんどん上級魔法を使っていけるようになるんだろう。なんかそんなことをイメージしてしまう。


そんなわけでProcessingのrandom()の魔法は面白い。ハートを出せる魔法を学んだのでバンバン撃ってる。前回に続いて、ランダムにハートを敷き詰めてみたい。位置は別に揃ってなくてもいいや。画面の大きさは私の所持携帯iPhoneSEの画面サイズにする。横640ピクセル☓縦1136ピクセルね。

 

ハート形の描写は前回の記事と同様、下記のサイトを参考にしている。

Proce55ing.walker,blog » Blog Archive » Processingで五角形・六角形・ハート形を描く

作ってみたぞー
random_heart_funcy.pde
----------------------------------------------
void setup(){
size(640, 1136);
background(#E0B5C9);
noStroke();
randomSeed(5);
for(int i=0;i<500;i++){
float hx = random(width);
float hy = random(0,height);
float h = random(20,100);
println(hx);
fill(random(210,255),random(0,100),random(0,100),random(50,100));
heart(hx, hy, h,h);
}
}

void draw(){}

// ハート形の描画
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 keyPressed(){
if(keyCode==ENTER){
save("random_heart_funcy.png");
}
}
----------------------------------------------

f:id:umesyurock0603:20170212093847p:plain

ハートがファンシーになったし、大きさもばらばらだし、かーわいー!
女子力が上がる壁紙できました。

今回は、randomSeed(5);というのを使っている。
これをいれていることで、ランダムだけど、毎回このプログラムを実行すればこの形に出会えるようにしている。他の形を見てみたければrandomSeed(0);とかrandomSeed(777);とかを入れてみればまた違った形に出会える。

randomSeedについては、
『遊んで学ぶ はじめてのプログラミング Processingの魔法学校』
Lv7魔法コンクール!?〜繰り返しと関数でアートに挑戦〜p,171-172
バラバラだけど毎回同じにする〜randomSeed〜バラバラな数の出方を決める。
で学んだ。こういうことなのかな、と思いながらやっている。

 

今後の課題

ファンシーな色合いを3つぐらい指定しといて、これらの中からどれかの色で塗ったハートを敷き詰めるとかしたい。このハートがつぎつぎ出てきては古いのが消えていくようなGIF動画を作ってみたいなぁ。

 

※↓参考図書です。randomSeedって何の役にたつのかな?っと思ってたけど、いまちょっとわかりかけてる。

Processingでハートいっぱい!

 processingでランダムに色々なことができるのは楽しい。まだまだrandom()の魔法にとりつかれています。

 次は何を敷き詰めてやろうか。バレンタインデーも近いことだしランダムにハートを敷き詰めてみたい。
画面の大きさは私の所持携帯iPhoneSEの画面サイズにする。4インチのRetinaディスプレイなんだ。1136☓640ピクセルで326dpiなのねなるほど。
 ハート形の描写は前回の記事でも参考にしたものだけど、下記のサイトを参考にする。

Proce55ing.walker,blog » Blog Archive » Processingで五角形・六角形・ハート形を描く


ハート形の描き方
----------------------------------------------
void setup(){
size(300, 300);
}
void draw(){
heart(75, 225, 150, 150);
}
// ハート形の描画
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);
}
----------------------------------------------
heart(x座標, y座標, ハートの縦サイズ, ハートの横サイズ);
であることに注意する。
さーしきつめてみるぞ?ついでに、その画像をエンターキー押したら保存できるようにするぞ?これでiPhoneSEの自作背景画像をゲットするのが目的です。
----------------------------------------------
void setup(){
size(640, 1136);
background(0);
noStroke();
int h =20;
for(int j=0;j<600;j++){
int hx = int(random(0,640/h));
int hy = int(random(0,1136/h+1));
println(hx);
fill(random(150,255),random(0,100),random(0,200));
heart(hx*h+h/2, hy*h+h/2, h,h);
}
}
void draw(){}

// ハート形の描画
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 keyPressed(){
if(keyCode==ENTER){
save("random_cast_heart.png");
}
}
----------------------------------------------

Enterキーぽちー!

f:id:umesyurock0603:20170211185136p:plain

すごーい!ハートいっぱい、たーのしー

 

今回のメモ
 void draw(){}の中にハートをランダムに敷き詰めるプログラムを入れると、時が経つにつれてどんどんハートがふえていくの。FrameRate(1)としても、現れるスピードはゆっくりにはなるのだけど、やっぱり時が経つとハートが増えていくのはかわらない。
やっぱり、void setup(){}の中に書いている方が、一回だけ描くという目的にはあってるみたい。

 

今後の課題

星を敷き詰めたい。ハートもう少しポップな色合いで大きさ変えたりして敷き詰めたい。ダイヤも敷き詰めたい。

均等に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);
}
----------------------------------------------

f:id:umesyurock0603:20170208041537p:plain

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

f:id:umesyurock0603:20170208041613p:plain


※ここで一度失敗している。画面サイズの前に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);
}
----------------------------------------------

f:id:umesyurock0603:20170208041659p:plain


void draw{}の中にhexagonを入れちゃうと、すごい勢いでチカチカ描画が変わっていくので、一回こっきりの描画でいいやと思いvoid setup{}の中にhexagonを入れて描いてみた。これが正しいかどうかは正直わからない。

blendMode(ADD)も使ってみた。重なった部分は明るくなって(白に近づいて)いくっぽい。
六角形敷き詰められた〜

今後の課題

ダイヤ型敷き詰めてみてもいいかもしれない。
もしくは、六角形を蜂の巣状にしきつめるにはどうすっかなぁ〜

※↓参考図書です。子供がProcessingに興味持ちそうだったらまずこの本渡すなぁ。。。