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

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

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

Processingでクレヨンスクラッチもどきをつくる

先日テレビでクレヨンスクラッチをやっていたので、processingで実装してみました。
実際のクレヨンスクラッチは、

1.適当に色つきクレヨンで塗る
2.その上から黒のクレヨンで全体をぬりつぶす
3.クギなどでひっかく

という手順ですが、
Processingでは、

0.「スケッチ」メニュー→ライブラリをインポート→「geomerative」を探す
1.マスクをつくる
2.マスクの中に位置・色ともにランダムに円を描く

という手順になります。
マスクは「geomerative」というライブラリを使いました。重いですが、現状マスクが使える+Illustratorで編集可能なPDFに書き出せるのはこの方法しかないので・・・

こちらはマスクをリング状にしたもの。
f:id:prince9:20170718042342p:plain

こちらはマスクを円形にしたもの。
f:id:prince9:20170718042537p:plain

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で書いていたのですが、色がうまいこといかなかったので、ひとまずは力技の汚いコードです。

f:id:prince9:20170706031249p:plain

//グリッドのサイズ
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();
    }
    
   


Pressingで水玉模様を描く

水玉とチェック柄をまとめてみました。書き方は同じで、rect/ellipseを変えるだけです。

水玉模様
f:id:prince9:20170705061323p:plain

//水玉ひとつのサイズ
int rSize = 60;
int rnum = 600 / rSize;


void setup() {
  size(600, 600);
  background(255);
  smooth();
  noLoop();
  noStroke();
}

void draw() {

  
  for(int i = 0; i < rnum+1; i++){
  for(int j = 0; j < rnum+1; j++){
    if ((i + j) % 2 == 0) {
       noStroke();
      noFill();
    } else {
      fill(230,16,16);
    }
    
    ellipse(rSize * j, rSize * i, rSize, rSize);
  }
  }
}

チェック柄
f:id:prince9:20170705061459p:plain

//チェックひとつのサイズ
int rSize = 60;
int rnum = 600 / rSize;


void setup() {
  size(600, 600);
  background(255);
  smooth();
  noLoop();
  noStroke();
}

void draw() {

  
  for(int i = 0; i < rnum+1; i++){
  for(int j = 0; j < rnum+1; j++){
    if ((i + j) % 2 == 0) {
       noStroke();
       //色あり→赤→色あり→赤のチェックにする場合はここをfill()に変える
      noFill();
    } else {
      fill(230,16,16);
    }
    
    rect(rSize * j, rSize * i, rSize, rSize);
  }
  }
}