Processingでランダムな回数ぶん繰り返す
Processingでランダムな回数ぶん繰り返し描画します。
マウスをクリックするたびに四角形の個数が変わります。
メモです。
int col; void setup() { size(600,600); noLoop(); } void draw() { background(255); //0から10のランダムな回数ぶん、rectを繰り返す col = int(random(11)); println(col); for(int i = 0; i < col; i++){ rect(50, 50 + 50 * i, 30, 30); } } void mousePressed() { redraw();// ボタンが押されたときだけ実行 }
processingで同じ範囲の乱数を複数パターン生成する
0から10までの乱数が欲しいけど、変数を同じにすると同じパターンになっちゃう・・・というときの解決策です。
同じ範囲の乱数を複数パターン生成しています。
下記の場合、0と1の乱数を10パターン作っています。重複はしていますが、変化のパターンは異なります。
//ランダム配列用 int[] col1 = new int[10]; //色の配列 color[] colarray1 = { #abcf2d,#5fb734 }; void setup() { size(600,600); noLoop(); } void draw() { background(255); randomGe(); //配列の最初のパターン(0か1か)で色の配列(colarray1)から色を取り出す fill(colarray1[col1[0]]); ellipse(100,50,20,20); //配列の2つ目のパターン(0か1か)で色の配列(colarray1)から色を取り出す fill(colarray1[col1[1]]); ellipse(200,50,20,20); } void randomGe() { for(int i = 0; i < col1.length; i++){ //乱数生成 col1[i] = int(random(2)); } } void mousePressed() { redraw();// ボタンが押されたときだけ実行 }
Processingで特定の色の組み合わせからランダムに色を選ぶ
Processingで特定の色の組み合わせからランダムに色を選ぶ方法です。
4色の中からランダムに選ぶ、みたいなときに使います。基本ですが、私がswitch使ってめんどくさいことをしてたので、違うやり方を忘れないようにメモ。
//ランダム用 int col; //色の配列 color[] colarray = { #ed621c,#e81c44,#abcf2d,#5fb734,#874195,#01449d,#45bcca,#f6c620,#898989 }; void setup() { size(600,600); noLoop(); } void draw() { background(255); col = colarray[(int)random(0,9)]; fill(col); ellipse(100,50,20,20); } void mousePressed() { redraw();// ボタンが押されたときだけ実行 }
Processingで図形を特定の個数&ランダムな位置に描く、その2
Macのビジュアルプログラミング環境「Quartz Composer」では、図形をグループ化してそれごと動かすというのが簡単にできます。
が、Processingだとfor使って計算しなくちゃアカンからめんどいのーと思ってこのハコの記事
prince9.hatenablog.com
を書いていたのですが、
translateで動かせばええやんと。
とはいえ図形によってはtranslate使うと線(stroke)がジャギる感があるので、あんまり使いたくなかったのでした・・・
図形はオライリー社が出してる「Processingをはじめよう」
www.oreilly.co.jp
のフクロウさんを参照しました。複雑だったので。
下記のように、ランダムな位置にフクロウさんを描きます。マウスクリックで位置を変更します。
int x,y; void setup() { size(600,600); background(204); noLoop(); } void draw() { background(204); //100から400の間で、10個ランダムに描く。実際はtranslateでランダムに移動させている for (int i = 0; i < 10; i++) { x = int(random(100, 400)); y = int(random(100, 400)); owl(); } /* //フクロウさんそのものコード translate(110,110); stroke(0); strokeWeight(70); line(0,-35,0,-65); noStroke(); fill(255); ellipse(-17.5,-65,35,35); ellipse(17.5,-65,35,35); arc(0,-65,70,70,0,PI); fill(0); ellipse(-14,-65,8,8); ellipse(14,-65,8,8); quad(0,-58,4,-51,0,-44,-4,-51); */ } void owl() { //フクロウさんのコード pushMatrix(); translate(x,y); stroke(0); strokeWeight(70); line(0,-35,0,-65); noStroke(); fill(255); ellipse(-17.5,-65,35,35); ellipse(17.5,-65,35,35); arc(0,-65,70,70,0,PI); fill(0); ellipse(-14,-65,8,8); ellipse(14,-65,8,8); quad(0,-58,4,-51,0,-44,-4,-51); popMatrix(); } void mousePressed() { redraw();// ボタンが押されたときだけ実行 }
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(); }