Processingで四角形を3つくっつけてハコをつくる
今度は四角形を3つくっつけて、ハコをつくってみました。
forの使い方がポイントですね。
一定間隔で図形を並べる場合はforを使いますが、うちわけは下記のようになります。
これはサイズ100の四角形を50ずつ空けて、3つ描いています。
30は上と左の空き量(描画開始位置)、150はサイズ+空けたい間隔になります。
size(600, 600 ); for( int i = 0; i < 3; i++ ) { for( int j = 0; j < 3; j++ ) { //描画開始位置の設定+(図形サイズ+図形の間隔)この場合だと大きさが100で隙間が50 rect( 30 + 150 * i, 30 + 150 * j, 100, 100); } }
これに気をつけてハコをランダムに描くと以下のようになります。
マウスクリックで再描画します。
void setup() { size(600, 600 ); background(#FFFFFF); smooth(); noStroke(); colorMode( HSB, 360, 100, 100); noLoop(); } void draw() { background(#FFFFFF); //左と上の空き量の設定=描画開始位置の設定,図形の間隔の設定(図形サイズ+隙間。この場合だと大きさが100で隙間が50) tileMoz(30,30,150); } void tileMoz(int posiX,int posiY,int space) { for( int i = 0; i < 3; i++ ) { for( int j = 0; j < 3; j++ ) { //上の四角の右下・下の四角の右上、上の四角の左下・下の四角の左上をランダムに int posiYran = int(random(posiY+30,posiY+70)); int posiXran = int(random(posiX+30,posiX+70)); //全体のサイズが100、隙間の間隔が50 noStroke(); fill(int(random(360)),90,90); quad( posiX+ j * space, posiY+ i * space, posiXran+ j * space, posiY+ i * space, posiXran+ j * space, posiYran+ i * space, posiX+ j * space, posiY + 100+ i * space); noStroke(); fill(int(random(360)),90,90); quad(posiXran+ j * space, posiY+ i * space, posiX + 100+ j * space, posiY+ i * space, posiX + 100+ j * space, posiYran+ i * space, posiXran+ j * space, posiYran+ i * space); noStroke(); fill(237,78,38); quad(posiXran+ j * space, posiYran+ i * space, posiX + 100+ j * space, posiYran+ i * space, posiX + 100+ j * space, posiY + 100+ i * space, posiX+ j * space, posiY + 100+ i * space); noFill(); strokeWeight(5); stroke(237,78,38); //左と上の空き量の設定=描画開始位置の設定+(図形サイズ+図形の間隔)この場合だと大きさが100で隙間が50 rect( 30 + 150 * i, 30 + 150 * j, 100, 100); strokeWeight(3); stroke(237,78,38); line(posiXran+ j * space, posiY+ i * space, posiXran+ j * space, posiYran+ i * space); } } } void mousePressed() { redraw(); }
Processingで四角形を2つくっつけて、複数ランダムに描く
タイルに色を塗ろうと思ったのですが、配色がメンドくてプログラムに任せた第二弾。
今度は四角形タイルです。書き換えればパズルもいけそうですね。
quadを2つくっつけて四角形にしています。例によってマウスクリックでランダムに形が生成されます。
参考にさせて頂いたサイトがこちら。
コンピュータ基礎II プログラムで絵を描こう
void setup() { size(600, 600 ); background(#FFFFFF); smooth(); noStroke(); colorMode( HSB, 360, 100, 100); noLoop(); } void draw() { background(#FFFFFF); //左と上の空き量の設定=描画開始位置の設定,図形の間隔の設定(図形サイズ+隙間。この場合だと大きさが100で隙間が50) tileMoz(30,30,150); } void tileMoz(int posiX,int posiY,int space) { for( int i = 0; i < 3; i++ ) { for( int j = 0; j < 3; j++ ) { //上の四角の右下・下の四角の右上、上の四角の左下・下の四角の左上をランダムに int posiYran1 = int(random(posiY,posiY+100)); int posiYran2 = int(random(posiY,posiY+100)); //全体のサイズが100、隙間の間隔が50 noStroke(); fill(int(random(360)),30,100); quad( posiX+ j * space, posiY+ i * space, posiX + 100+ j * space, posiY+ i * space, posiX + 100+ j * space, posiYran1+ i * space, posiX+ j * space, posiYran2+ i * space); noStroke(); fill(int(random(360)),30,100); quad( posiX+ j * space, posiYran2+ i * space, posiX + 100+ j * space, posiYran1+ i * space, posiX + 100+ j * space, posiY + 100+ i * space, posiX+ j * space, posiY + 100+ i * space); } } } void mousePressed() { redraw(); }
Processingで円グラフを描く
半円の向きをランダムにしてくっつけて、1つの円にしようと思っていろいろやってたら、円グラフを描くやり方が公式で解説されていた
PieChart \ Examples \ Processing.org
のでそちらを参考にしました。
こんな感じです。半円の角度と色がマウスボタンを押すごとに変わります。
レーザーカッターで円形にくり抜いてカラフルなコースター的なものを作ろうとしてたのですが、配色を考えるのがめんどくなったのでProcessingで書きました。
//円グラフのデータ int[] angles = {180, 180}; void setup() { size(600, 600); background(#FFFFFF); noStroke(); noLoop(); colorMode(HSB,360,100,100); } void draw() { pieChart(150,150,100, angles); } void pieChart(int posiX,int posiY,float diameter, int[] data) { //3列×3列 for(int n = 0; n < 3; n++) { for(int j = 0; j < 3; j++) { //境界線の角度 float lastAngle = random(360); for (int i = 0; i < data.length; i++) { fill(int(random(360)),30,100); //実際の円グラフ arc(100+posiX*n, 100+posiY*j, diameter, diameter, lastAngle, lastAngle+radians(data[i])); lastAngle += radians(data[i]); } } } } void mousePressed() { redraw(); }
Processingでクレヨンスクラッチもどきをつくる
先日テレビでクレヨンスクラッチをやっていたので、processingで実装してみました。
実際のクレヨンスクラッチは、
1.適当に色つきクレヨンで塗る
2.その上から黒のクレヨンで全体をぬりつぶす
3.クギなどでひっかく
という手順ですが、
Processingでは、
0.「スケッチ」メニュー→ライブラリをインポート→「geomerative」を探す
1.マスクをつくる
2.マスクの中に位置・色ともにランダムに円を描く
という手順になります。
マスクは「geomerative」というライブラリを使いました。重いですが、現状マスクが使える+Illustratorで編集可能なPDFに書き出せるのはこの方法しかないので・・・
こちらはマスクをリング状にしたもの。
こちらはマスクを円形にしたもの。
import geomerative.*; void setup() { size(600,600,P2D); background(0); RG.init(this); noLoop(); } void draw() { //色クレヨンで描いた上から黒クレヨンを塗りつぶす background(0); //引っ掻く回数 for (int i=0; i<50; i++) { //マスクの形 makeCircle(int(random(width)),int(random(height)),int(random(10,200))); } } void makeCircle(int x, int y, int r) { //リング形のマスク、r-は太さ(ここだとstroke(10)と同じ)、引っ掻いた形 RShape mask = RShape.createRing(x, y, r,r-10); /* //円形のマスクにする場合は、createRingではなくcreateCircleを使う RShape mask = RShape.createCircle(x, y, r); */ //画面サイズの半分だとだいたい画面が埋め尽くされる for (int i=0; i<300; i++) { //色クレヨンの色 fill(random(255),random(255),random(255)); //色クレヨンで描いた柄 RShape strip = RShape.createCircle(random(width),random(height),random(10,200)); RShape masked = strip.intersection(mask); masked.setStroke(false); RG.shape(masked); } } //マウスを押すと再描画 void mousePressed() { redraw(); }
Processingで円が重ならないようにランダムに描く
Processingで円が重ならないようにランダムに描きます。
2点間の距離を出す「dist」を使って、2つの円の半径の合計が2点間の距離より小さくなればOKです。
つまり、cとpの2点間の距離 > cの半径+pの半径の場合に描画されます。
processing本家の掲示板にお世話になりました。
//配列準備 ArrayList <PVector> circles; void setup() { background(0); size(600, 600); //色相・彩度・明度で指定 colorMode(HSB, 360, 100, 100); smooth(); noLoop(); } void draw() { background(0); circles = new ArrayList <PVector>(); addCircle(); for (int i=0; i<circles.size(); i++) { PVector p = circles.get(i); noStroke(); fill(int(random(0,360)),100,100); ellipse(p.x, p.y, p.z, p.z); } } void addCircle() { //10は個数 while (circles.size() < 10) { //大きさが10から100の間 float diameter = random(10, 100); PVector c = new PVector(random(width), random(height), diameter); boolean overlapping = false; for (PVector p : circles) { /* distは2点間の距離を出す dist(x1, y1, x2, y2) この場合は、cとpの2点間の距離 > cの半径+pの半径の場合に描画される cとpの2点間の距離 < cの半径+pの半径の場合は重なってしまう */ if (dist(c.x, c.y, p.x, p.y) < (c.z + p.z)) { overlapping = true; break; } } if (!overlapping) { //配列の要素を追加 circles.add(c); } } } //マウスを押すと再描画 void mousePressed() { redraw(); }
Processingで図形の色を特定の色の中からランダムに変える
今回はメモ程度。
例えば、赤・緑・青・黄色の中から1色ランダムに選びます。
条件分岐のswitchと配列を使います。
マウスクリックで色を変更します。
//色ランダム int colrd; void setup() { size(600, 600); background(255); smooth(); noLoop(); } void draw() { background(255); noStroke(); colorRandom(); ellipse(100,100,70,70); } void colorRandom() { color[] c = new color[4]; c[0] = color(15,217,255); c[1] = color(73,232,171); c[2] = color(254,142,167); c[3] = color(255,186,56); colrd = int(random(0, 3)); switch(colrd) { case 0: fill(c[0]); break; case 1: fill(c[1]); break; case 2: fill(c[2]); break; case 3: fill(c[3]); break; } } void mousePressed() { redraw(); }
Processingでランダムに記号を描く2
形と色がランダムに変わるようにしました。
ストライプに関してはforで書いていたのですが、色がうまいこといかなかったので、ひとまずは力技の汚いコードです。
//グリッドのサイズ int gridSize = 50; //ランダムの値 int rd1; //色ランダム int colrd; //繰り返し描画用 int i,j; void setup() { size(400,400); background(0); noLoop(); } void draw() { background(0); for(j = 0; j < height/gridSize+1; j++){ for (i = 0; i < width/gridSize+1; i++) { rd1 = int(random(14)); shapeParts(); /* グリッド線を引きたい場合は下記 noFill(); strokeWeight(1); stroke(0); rect(gridSize * i, gridSize * j, gridSize, gridSize); */ } } strokeWeight(5); fill(0); stroke(255,186,56); rect(gridSize * 4, gridSize * 3, gridSize * 5, gridSize *2); strokeWeight(2); rect(gridSize * 4+9, gridSize * 3+9, gridSize * 5-20, gridSize *2-20); } void shapeParts() { switch(rd1) { case 0: //三角 noStroke(); colorRandom(); triangle(gridSize * i,gridSize * j,gridSize * i,gridSize * j+gridSize,gridSize * i+gridSize,gridSize * j); break; case 1: //リボン noStroke(); colorRandom(); triangle(gridSize * i,gridSize * j,gridSize * i,gridSize * j+gridSize,gridSize * i+gridSize,gridSize * j); triangle(gridSize * i,gridSize * j,gridSize * i+gridSize,gridSize * j+gridSize,gridSize * i+gridSize,gridSize * j); break; case 2: //三角ふたつ1 noStroke(); colorRandom(); triangle(gridSize * i,gridSize * j,gridSize * i+25,gridSize * j+25,gridSize * i+gridSize,gridSize * j); triangle(gridSize * i+25,gridSize * j+25,gridSize * i,gridSize * j+gridSize,gridSize * i+gridSize,gridSize * j+gridSize); break; case 3: //三角ふたつ2 noStroke(); colorRandom(); triangle(gridSize * i,gridSize * j,gridSize * i,gridSize * j+gridSize,gridSize * i+25,gridSize * j+25); triangle(gridSize * i+gridSize,gridSize * j,gridSize * i+25,gridSize * j+25,gridSize * i+gridSize,gridSize * j+gridSize); break; case 4: //円 noStroke(); ellipseMode(CORNER); colorRandom(); ellipse(gridSize * i, gridSize * j, gridSize, gridSize); break; case 5: //円輪郭のみ noStroke(); ellipseMode(CORNER); colorRandom(); ellipse(gridSize * i, gridSize * j, gridSize, gridSize); fill(0); ellipse(gridSize * i+10, gridSize * j+10, gridSize-20, gridSize-20); break; case 6: //四角+円 noStroke(); colorRandom(); rect(gridSize * i, gridSize * j, gridSize, gridSize); fill(0); ellipse(gridSize * i+10, gridSize * j+10, gridSize-20, gridSize-20); break; case 7: //四角輪郭のみ noStroke(); colorRandom(); rect(gridSize * i, gridSize * j, gridSize, gridSize); fill(0); rect(gridSize * i+10, gridSize * j+10, gridSize-20, gridSize-20); break; case 8: //階段 noStroke(); colorRandom(); rect(gridSize * i,gridSize * j+34,17,16); rect(gridSize * i+16,gridSize *+ j+18,17,32); rect(gridSize * i+32,gridSize * j,18,50); break; case 9: //階段 noStroke(); colorRandom(); rect(gridSize * i,gridSize * j+34,16,17); rect(gridSize * i,gridSize * j+17,32,17); rect(gridSize * i,gridSize * j,50,17); break; case 10: //ダイヤ noStroke(); colorRandom(); quad(gridSize * i+25, gridSize * j, gridSize * i, gridSize * j+25, gridSize * i+25, gridSize * j+50, gridSize * i+50, gridSize * j+25); break; case 11: //ストライプ縦 noStroke(); fill(255,186,56); rect(gridSize * i,gridSize * j,10,50); fill(0); rect(gridSize * i+10,gridSize * j,10,50); fill(255,186,56); rect(gridSize * i+20,gridSize * j,10,50); fill(0); rect(gridSize * i+30,gridSize * j,10,50); fill(255,186,56); rect(gridSize * i+40,gridSize * j,10,50); break; case 12: //ストライプ横 noStroke(); fill(255,186,56); rect(gridSize * i,gridSize * j,50,10); fill(0); rect(gridSize * i,gridSize * j+10,50,10); fill(255,186,56); rect(gridSize * i,gridSize * j+20,50,10); fill(0); rect(gridSize * i,gridSize * j+30,50,10); fill(255,186,56); rect(gridSize * i,gridSize * j+40,50,10); break; case 13: noFill(); noStroke(); break; } } void colorRandom() { color[] c = new color[4]; /* c[0] = color(225,211,86); c[1] = color(113,217,254); c[2] = color(49,210,187); c[3] = color(200,120,181); */ c[0] = color(15,217,255); c[1] = color(73,232,171); c[2] = color(254,142,167); c[3] = color(255,186,56); colrd = int(random(0, 3)); switch(colrd) { case 0: fill(c[0]); break; case 1: fill(c[1]); break; case 2: fill(c[2]); break; case 3: fill(c[3]); break; } } //マウスを押して再描画 void mousePressed() { redraw(); }