上のプログラムのソースです。

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

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

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

//変数の定義。floatは小数、intは整数。
float x1 = 300;//青
float y1 = 200;
float randomX1;
float randomY1;
float x2 = 700;//緑
float y2 = 300;
float randomX2;
float randomY2;
float x3 = 500;//赤
float y3 = 400;
float randomX3;
float randomY3;
int r = 100;

int Counter = 0;
//『=』は、右の値を左の変数に代入することを意味します。

void draw() {
  //draw()は1秒間の間に初期値は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(255, 10);

  x1 = x1 + random(-20, 20);
  y1 = y1 + random(-20, 20);
  x2 = x2 + random(-20, 20);
  y2 = y2 + random(-20, 20);
  x3 = x3 + random(-5, 5);//赤の動作は小さい
  y3 = y3 + random(-5, 5);
  //random()は、適当な数字(乱数)を作ってくれます。今回は-5から5の間の値を自動で返します。

  //離れていると追いかける
  if (x1-x3 > 500 ) x1= x1 - 5;//動作が小さい
  if (x3-x1 > 500 ) x1= x1 + 5;
  if (x2-x1 > 500 ) x2= x2 - 5;
  if (x1-x2 > 500 ) x2= x2 + 5;
  if (x3-x1 > 500 ) x3= x3 - 20;//赤は近づく動作が大きい
  if (x1-x3 > 500 ) x3= x3 + 20;

  //近づきすぎると離れる。abs(a) aの絶対値を求める
  if (abs(x1-x3)+abs(y1-y3)<150) {
    if (0< x1-x3 && x1-x3 < 100 ) x1= x1 + 5;
    if (0< x3-x1 && x3-x1 < 100 ) x1= x1 - 5;
    if (0< y1-y3 && y1-y3 < 100 ) y1= y1 + 5;
    if (0< y3-y1 && y3-y1 < 100 ) y1= y1 - 5;
  }
  //青と緑は距離をあける
  if (abs(x2-x1)+abs(y2-y1)<200) {
    if (0< x2-x1 && x2-x1 < 100 ) x2= x2 + 5;
    if (0< x1-x2 && x1-x2 < 100 ) x2= x2 - 5;
    if (0< y2-y1 && y2-y1 < 100 ) y2= y2 + 5;
    if (0< y1-y2 && y1-y2 < 100 ) y2= y2 - 5;
  }
  if (abs(x3-x2)+abs(y3-y2)<150) {
    if (0< x3-x2 && x3-x2 < 100 ) x3= x3 + 20;//赤は離れる動作が大きい
    if (0< x2-x3 && x2-x3 < 100 ) x3= x3 - 20;
    if (0< y3-y2 && y3-y2 < 100 ) y3= y3 + 20;
    if (0< y2-y3 && y2-y3 < 100 ) y3= y3 - 20;
  }

  //キャンバスから出ないように
  if (x1 < 100 ) x1= x1 + 10;
  else if (x1 > 900 ) x1= x1 - 10;
  if (y1 < 100 ) y1= y1 + 10;
  else if (y1 > 500 ) y1= y1 - 10;

  if (x2 < 100 ) x2= x2 + 10;
  else if (x2 > 900 ) x2= x2 - 10;
  if (y2 < 100 ) y2= y2 + 10;
  else if (y2 > 500 ) y2= y2 - 10;

  if (x3 < 100 ) x3= x3 + 10;
  else if (x3 > 900 ) x3= x3 - 10;
  if (y3 < 100 ) y3= y3 + 10;
  else if (y3 > 500 ) y3= y3 - 10;

  int i = 0;

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

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

    //円1青
    stroke(random(255), random(255), 255);
    //線や輪郭線の色 stroke([赤], [青], [緑], [透明度])
    randomX1=  x1 + random(-5, 5);
    randomY1=  y1 + random(-5, 5);
    ellipse(randomX1, randomY1, r, r);
    //ellipse([円の中心のx座標], [円の中心のy座標], 縦の半径, 横の半径)

    //円2緑
    stroke(random(255), 255, random(255));
    randomX2=  x2 + random(-5, 5);
    randomY2=  y2 + random(-5, 5);
    ellipse(randomX2, randomY2, r, r);

    //円3赤
    stroke(255, random(255), random(255));
    randomX3=  x3 + random(-10, 10);
    randomY3=  y3 + random(-10, 10);
    ellipse(randomX3, randomY3, r, r);

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

ホームページのトップに戻る