//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増える } }