【Processing】画像保存の方法 - 超ゆるゆる技術ブログ🌷

f:id:dd15038:20181123132248p:plain
sample5.png（画像の名前）

ほとんど自分用メモです📝
キーボードのどれかを押したらProcessingの画像をスクショできる仕組みを書いておきます。

プログラム

int a = 1; //番号順に画像保存するために変数を定義

void setup(){
  size(300, 150); //サイズ設定
  colorMode(HSB, 360, 100, 100);
  noStroke(); //線無し
}

void draw(){
  //背景を暗い青色に設定
  background(245, 71, 30);
  
  //横に4つ描くまで処理を続ける
  for(int i = 0; i < 4; i++){
    //縦に3つ描くまで処理を続ける
    for(int j = 0; j < 3; j++){
      fill(random(360), 50 * j, random(100));
      ellipse(50  + 65 * i, 50 + 35 * j, 30, 30);
    }
  }
}

void keyPressed(){
  //エンターキーが押されたら
  if(keyCode == ENTER){
    //「sample 番号 .png」の名前で画像を保存
    save("sample" + a + ".png");
    //この処理を行うごとにaを1増やす
    a++;
  }
}

setup関数の中身ちょこっと解説
カラーモードはHSBで、これは色相（H）、彩度（S）、明度（B）を順に表しています。
設定は色相が360°、彩度が100%、明度も100%になっています。
色相はどんな色にするか（例えば、赤、黄色などのざっくりとした色合いと思って大丈夫です）決めるところ、彩度はその色の鮮やかさ、明度はその色の明るさを表しています。

draw関数の中身ちょこっと解説
for文を使って、繰り返しの処理を行っています。
一番めのfor文ではellipse()で描く円を横に4つ並べるための、
二番めのfor文では横に描いた円それぞれの下に、つまり縦に続くように3つ並べるための準備をしているような感じです。

fillの中身の、色相と明度はランダムに決めるように設定しています。
random(360)のように書くと、0～360の中からランダムで色が決定されます。
ちなみに、random(100, 200)という風に書くと、100～200までの中から値が決まります。
また、真ん中の彩度に関しては、グラデーションのように徐々に色が変化してほしかったので、繰り返し処理文のなかで使った変数「j」を初期設定の彩度の「50」にかけることで、近い値同士で色が変化するようにしました。

またellipse()の解説ですが、この関数は

ellipse(Xの位置（横）, Yの位置（縦）, 幅, 高さ);

というルールでできています。
位置の所に書いてある「50」は初期位置（基準位置）の設定、「+65」などはほかの円とどれくらいの距離をとるかの設定です。
「*i」などの意味は、iをかけることで横に縦に配置するようにの命令です。

keyPressed関数
この関数は、何かキーが押された時に実行されます。
さらにif()関数の中で、エンターキーが押された時ににだけ実行される文を作ります。
save()関数は、ここに記した名前で画像保存するように処理します。
「+」というのが間に挟まっていますがこれは、前と後ろの文字をつなげるという意味で、実際には名前に入りません。
最後に「a++」することで、次の処理の際に、「a」はひとつ加算されたものとして処理されます。