まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを。参照していないものに関しては、コピペ改変まったく問いません

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
のフクロウさんを参照しました。複雑だったので。
下記のように、ランダムな位置にフクロウさんを描きます。マウスクリックで位置を変更します。

f:id:prince9:20170728043950p:plain

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はサイズ+空けたい間隔になります。

f:id:prince9:20170726004553p:plain

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

これに気をつけてハコをランダムに描くと以下のようになります。
マウスクリックで再描画します。

f:id:prince9:20170726004734p:plain

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 プログラムで絵を描こう


f:id:prince9:20170723162226p:plain

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で書きました。
f:id:prince9:20170721114948p:plain

//円グラフのデータ
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();
}