Processingでハコをランダムに複数描く2
前回は色は固定で表示/非表示の切り替えをランダムに行っていましたが、今回は色の切り替えと表示/非表示がランダムに切り替わるようにしました。
色はfill()の色だけでなく、チェック柄も使えます。
模様を色として使う場合、ハコのそれぞれの面の形にマスクをする必要があります。
方法としては、こちらのリンク
Proce55ing.walker,blog » Blog Archive » マスクを使ってPGraphicsの内容をくりぬいて使用する
のようにPGraphicsを強引に使うパターンと、マスクができるライブラリ「geomerative」のRShapeを使うパターンです。
参考にさせて頂きました。ありがとうございます。
geomerativeをやってみたのですが、どうも平行四辺形が作れないっぽいので諦めました(たぶん方法はあると思うのですが、重かったこともあり今回はパス)。
PGraphicsを使ってマスクをした場合、PDF書き出ししたときに画像扱いになってしまうので、ちょっと要注意かもです。
ま、Illustratorでライブトレスすれば良いのですが・・・それだとなんだか負けた感。
geomerativeに関しては問題なし。
ひとまずPGraphicsでやってみました。マウスボタンをクリックすると、ランダムに色や模様が変わります。
べた塗り・チェック柄・非表示・縦のストライプ、合計4種類です。
ストライプはこちら
Processing : だらっと学習帳
を参照させて頂きました。ありがとうございます。
輪郭線ありはこんな感じで、
なしはこんな感じ。輪郭線をなしにする場合は、hexagonStroke()とvoid hexagonStroke()〜を消します。
びみょーに柄がはみ出したりしてるので、マスクのサイズを微調整する必要がありますね。
たぶんサイズの問題だと思うのですが、水玉模様にするとなぜか重なって表示されてしまう不具合が出たので、水玉は使いませんでした。
//pg1が左側面、pg2が右側面、pg3がフタ PGraphics pg1,pg2,pg3; //mask1はpg1の形のマスク、mask2はpg2の形のマスク、mask3はpg3の形のマスク PGraphics mask1,mask2,mask3; //チェック柄の設定、チェックひとつのサイズ int RECT_SIZE = 5; //400はsetup()のsizeの設定 int rnum = 400 / RECT_SIZE; //ストライプ柄の設定 int rect_w = 5; int rect_h = 400; int num2 = 400 / rect_w; //2色のストライプ color[] c = new color[2]; //どれくらいの間隔でハコを描くか(現在はぴったり隣同士) int x1,y1; //ランダムに色や模様を変える int rd1,rd2,rd3; void setup() { size(400, 400); smooth(); background(255); noLoop(); //ストライプの色の設定 c[0] = color(0); c[1] = color(255); } void draw() { for (y1 = 0; y1 < 500; y1 += 90) { for (x1 = 0; x1 <= 500; x1 += 80) { rd1 = int(random(6)); rd2 = int(random(6)); rd3 = int(random(6)); //マスクと色の設定 quadMask(); image(pg1.get(), 0, 0); image(pg2.get(), 0, 0); image(pg3.get(), 0, 0); //六角形の輪郭 hexagonStroke(); } } } void quadMask() { mask1 = createGraphics(width, height); mask2 = createGraphics(width, height); mask3 = createGraphics(width, height); mask1.beginDraw(); mask2.beginDraw(); mask3.beginDraw(); mask1.smooth(); mask2.smooth(); mask3.smooth(); mask1.noStroke(); mask2.noStroke(); mask3.noStroke(); mask1.fill(255); mask2.fill(255); mask3.fill(255); //ここを変えると大きさが変わる。変えた場合はx1とy1の調整が必要 mask1.quad(x1, y1, x1, y1+50, x1+40,y1+70, x1+40, y1+20); mask2.quad(x1+40, y1+20, x1+40, y1+70, x1+80,y1+50, x1+80, y1); mask3.quad(x1+40, y1-20, x1, y1, x1+40,y1+20, x1+80, y1); mask1.endDraw(); mask2.endDraw(); mask3.endDraw(); pg1 = createGraphics(width, height); pg2 = createGraphics(width, height); pg3 = createGraphics(width, height); pg1.beginDraw(); pg2.beginDraw(); pg3.beginDraw(); pg1.smooth(); pg2.smooth(); pg3.smooth(); pg1.background(255); pg2.background(255); pg3.background(255); switch(rd1) { case 0: //べた塗り pg1.noStroke(); pg1.fill(251,247,16); pg1.rect(0, 0, 400,400); pg1.mask(mask1.get()); pg1.endDraw(); break; case 1: //べた塗り pg1.noStroke(); pg1.fill(37,61,159); pg1.rect(0, 0, 400,400); pg1.mask(mask1.get()); pg1.endDraw(); break; case 2: //非表示 pg1.noFill(); pg1.noStroke(); pg1.mask(mask1.get()); pg1.endDraw(); break; case 3: //チェック柄 dots1(); pg1.mask(mask1.get()); pg1.endDraw(); break; case 4: //ストライプ dots2(); pg1.mask(mask1.get()); pg1.endDraw(); break; //べた塗り case 5: pg1.noStroke(); pg1.fill(0); pg1.rect(0, 0, 400,400); pg1.mask(mask1.get()); pg1.endDraw(); break; } switch(rd2) { case 0: pg2.noStroke(); pg2.fill(251,247,16); pg2.rect(0, 0, 400,400); pg2.mask(mask2.get()); pg2.endDraw(); break; case 1: pg2.noStroke(); pg2.fill(37,61,159); pg2.rect(0, 0, 400,400); pg2.mask(mask2.get()); pg2.endDraw(); break; case 2: pg2.noFill(); pg2.noStroke(); pg2.mask(mask2.get()); pg2.endDraw(); break; case 3: dots1(); pg2.mask(mask2.get()); pg2.endDraw(); break; case 4: dots2(); pg2.mask(mask2.get()); pg2.endDraw(); break; case 5: pg2.noStroke(); pg2.fill(0); pg2.rect(0, 0, 400,400); pg2.mask(mask2.get()); pg2.endDraw(); break; } switch(rd3) { case 0: pg3.noStroke(); pg3.fill(251,247,16); pg3.rect(0, 0, 400,400); pg3.mask(mask3.get()); pg3.endDraw(); break; case 1: pg3.noStroke(); pg3.fill(37,61,159); pg3.rect(0, 0, 400,400); pg3.mask(mask3.get()); pg3.endDraw(); break; case 2: pg3.noFill(); pg3.noStroke(); pg3.mask(mask3.get()); pg3.endDraw(); break; case 3: dots1(); pg3.mask(mask3.get()); pg3.endDraw(); break; case 4: dots2(); pg3.mask(mask3.get()); pg3.endDraw(); break; case 5: pg3.noStroke(); pg3.fill(0); pg3.rect(0, 0, 400,400); pg3.mask(mask3.get()); pg3.endDraw(); break; } } //チェック柄 void dots1() { pg1.noStroke(); pg2.noStroke(); pg3.noStroke(); for (int y = 0; y < rnum+1; y ++) { for (int x = 0; x < rnum+1; x ++) { if ((y + x) % 2 == 0) { pg1.fill(255); pg2.fill(255); pg3.fill(255); } else { pg1.fill(230,16,16); pg2.fill(230,16,16); pg3.fill(230,16,16); } pg1.rect(RECT_SIZE * x, RECT_SIZE * y, RECT_SIZE, RECT_SIZE); pg2.rect(RECT_SIZE * x, RECT_SIZE * y, RECT_SIZE, RECT_SIZE); pg3.rect(RECT_SIZE * x, RECT_SIZE * y, RECT_SIZE, RECT_SIZE); } } } //ストライプ void dots2() { pg1.noStroke(); pg2.noStroke(); pg3.noStroke(); for (int n = 0; n < num2;n++) { pg1.fill(c[n%c.length]); pg2.fill(c[n%c.length]); pg3.fill(c[n%c.length]); pg1.rect(n*rect_w, 0, rect_w, rect_h); pg2.rect(n*rect_w, 0, rect_w, rect_h); pg3.rect(n*rect_w, 0, rect_w, rect_h); } } //六角形の輪郭線 void hexagonStroke() { noFill(); stroke(34,24,22); strokeWeight(2); line(x1+40,y1-20,x1,y1); line(x1,y1,x1,y1+50); line(x1,y1+50,x1+40,y1+70); line(x1+40,y1+70,x1+80,y1+50); line(x1+80,y1+50,x1+80,y1); line(x1+80,y1,x1+40,y1-20); } //マウスを押して再描画 void mousePressed() { redraw(); }
【追記】
dots1()は下記のように書き換えができますが、なぜか重くなります。
【追記の追記】
原因が分かりましたので、書き直しました。現在上に表示されているのが、訂正した書き方になります。
forの最大数を打ち間違えてました・・・