//https://liginc.co.jp/186614
//Processingでデジタルアートを作ろう
//円を複数書いてみよう

PFont myFont1; //フォントを格納する変数

void setup() {
  //キャンバスを設定。画面サイズ、背景色、色などを最初に設定します。
  size(1000, 600);
  //size([横幅], [縦幅])
  background(255);
  //background([0が黒〜255が白],[透明度]);
  myFont1 = createFont( "メイリオ", 32 );
  //createFont(name, size) フォントを動的に作成する
  //http://zawaworks.hatenablog.com/entry/2017/03/13/160055
  //"ＭＳ ゴシック" "ＭＳ 明朝"
  textFont( myFont1 );
  //textFont()　使用フォントを選択する。loadFont()やcreateFont()で作成したフォントを使えるようにします。
}

//変数の定義。floatは小数、intは整数。
float x = 400;
float y = 300;
float randomX;
float randomY;
int r = 180;
float s_x = 600;
float s_y = 300;
float s_randomX;
float s_randomY;
int s_r = 100;
int Counter = 0;
//『=』は、右の値を左の変数に代入することを意味します。

// マウスをクリックしたときの処理  
void mouseClicked() {   
  text( "mouseX = " + str(int(mouseX)), 450, 590 );
  text( "mouseY = " + str(int(mouseY)), 700, 590 );
  //text(文字列, x座標, y座標)

  if  (abs(x - mouseX) + abs(y - mouseY) <  abs(s_x - mouseX) + abs(s_y - mouseY)) {
    // abs(a) aの絶対値を求める    
    x = mouseX;
    y = mouseY;
  } else {
    s_x = mouseX;
    s_y = mouseY;
  }
}

void draw() {
  //draw()は１秒間の間に初期値は60 だけ繰り返し実行されます。

  fill(255, 10);
  //fill([赤], [青], [緑], [透明度])
  //グレースケールの後ろの値は透過度を表します。透過度は0?100の値を指定できます。

  noStroke();
  //noStroke()とすると線なし

  rect(0, 0, 1000, 600);
  //rect([始点のx座標],[始点のy座標],[終点のx座標],[終点のx座標])
  //最初に背景と同じ色の四角を画面いっぱい書いて、draw()が実行されるたびに画面を一度まっさらにします。
  fill(255, 128, 0);
  text("マウスでクリックすると近い方の円がそこに飛びます", 10, 40 );
  fill(20);
  textSize(24);  //文字サイズを変更
  text("左下の座標は円の中心、右下の座標はマウスでクリックした点です", 10, 80 );
  textSize(32);  //サイズを戻す
  fill(255, 10);
  
  x = x + random(-5, 5);
  y = y + random(-5, 5);
  s_x = s_x + random(-5, 5);
  s_y = s_y + random(-5, 5);
  //random()は、適当な数字(乱数)を作ってくれます。今回は-5から5の間の値を自動で返します。

  //キャンバスから出ないように
  if (x < 150 ) x= x + 10;
  else if (x > 850 ) x= x - 10;
  if (y < 150 ) y= y + 10;
  else if (y > 450 ) y= y - 10;

  if (s_x < 100 ) s_x= s_x + 10;
  else if (s_x > 900 ) s_x= s_x - 10;
  if (s_y < 100 ) s_y= s_y + 10;
  else if (s_y > 500 ) s_y= s_y - 10;

  int i = 0;

  while (i < 10) {
    //while 文を使って繰り返しを制御します。while()のカッコの中に条件式を書きます

    noFill();
    //noFill()とすると塗りつぶしなし

    stroke(random(255), random(255), 255);
    //線や輪郭線の色 stroke([赤], [青], [緑], [透明度])

    randomX=  x + random(-10, 10);
    randomY=  y + random(-10, 10);

    ellipse(randomX, randomY, r, r);

    stroke(random(255), 255, random(255));
    //線や輪郭線の色 stroke([赤], [青], [緑], [透明度])

    s_randomX=  s_x + random(-10, 10);
    s_randomY=  s_y + random(-10, 10);

    ellipse(s_randomX, s_randomY, s_r, s_r);
    //ellipse([円の中心のx座標], [円の中心のy座標], 縦の半径, 横の半径)

    i = i + 1;
    //draw()が実行されるごとに、i の値が1増える
  }

  fill( 60 );
  //fill() 塗りに色を付ける
  //fill(d) グレースケール。整数dが0なら黒、255なら白、その間の数は数が小さいほど濃い灰色。
  //fill(d,a) グレースケールだが、「透明度」を追加指定する。aの0は完全に透明、255は完全に不透明。

  Counter = Counter + 1;
  if (Counter > 30) {
    text( "x = " + str(int(x)), 45, 550 );
    text( "y = " + str(int(y)), 235, 550 );
    text( "s_x = " + str(int(s_x)), 10, 590 );
    text( "s_y = " + str(int(s_y)), 200, 590 );
    //text(文字列, x座標, y座標)
    Counter=0;
  }
}