motionExpress

ー点群ー　　

今回は前回の点群の動きに時間的な表情をつけてみましょう．
一つ一つが同じ法則を持っていて，それが多数になったときに，そこに新しい動きが見えてきます。
その法則が変わることで全体の表情が変化します．

動きはこのようになります．

そしてソースコードはこうなります．



point p[];



[setup, 400, 400]{

	p = new point[100];

	for(int i = 0; i < p.length; ++i){

		int x = i % 10;

		int y = i / 10;

		p[i] = new point(100+x*20, 100+y*20);

	}

}



[paint]{

	clearAll();

	for(int i = 0; i < p.length; ++i){

		fillOval(p[i], 10, 10);	

	}

}



[everyterm, 5, 15, 0]{

	for(int i = 0; i < p.length; ++i){

		double dist = p[i].distanceTo(mouseX, mouseY);

		double f = 0;

		if(dist < 100)	f = 100-dist;

		double dire = p[i].directionTo(mouseX, mouseY)+Math.PI;

		p[i].push(f*0.3, dire);

		int x = i % 10;

		int y = i / 10;

		p[i].pushTo(100+x*20, 100+y*20);

	}

}



[everyterm, 5, 15, 5]{

	for(int i = 0; i < p.length; ++i){

		double dist = p[i].distanceTo(mouseX, mouseY);

		double f = 0;

		if(dist < 100)	f = 100-dist;

		double dire = p[i].directionTo(mouseX, mouseY)+Math.PI/2;

		p[i].push(f*0.3, dire);

		int x = i % 10;

		int y = i / 10;

		p[i].pushTo(100+x*20, 100+y*20);

	}

}



[everyterm, 5, 15, 10]{

	for(int i = 0; i < p.length; ++i){

		double dist = p[i].distanceTo(mouseX, mouseY);

		double f = 0;

		if(dist < 100)	f = 100-dist;

		double dire = p[i].directionTo(mouseX, mouseY);

		p[i].push(f*0.3, dire);

		int x = i % 10;

		int y = i / 10;

		p[i].pushTo(100+x*20, 100+y*20);

	}

}

前回いつもすべての点がマウスから離れようとしていました．今回は５秒ごとに
・離れる
・回転する
・くっつく
という動きを繰り返します．
point p[]; の宣言やsetup，paintは前回と同じです．画像的には同じものを用いて動きを変化させることで表情を持たせています．
５秒ごとに動きを変化させるということで，今回はタイミングにeverytermを使いました．
everytermはある一定の時間だけ実行されるというタイミングです．
例えばeveryterm[13, 20, 4]と書くと，

20秒を単位としてその4秒から13秒間実行されるものが繰り返される．

になります．つまり，開始後4～17秒，24～37秒，40～57秒．・・・に実行されることになります．

このeverytermを活用して，今回は
・0～５秒：離れる
・５～10秒：回転する
・10～15秒：くっつく
としました．ので
・[everyterm, 5, 15, 0]：離れる
・[everyterm, 5, 15, 5]：回転する
・[everyterm, 5, 15, 10]：くっつく
と記述しました．

実際の動きに関しては基本的には前回のものと同じです．
ただ今回は，マウスに対して動く方向が違うために，方向に関する計算部分をそれぞれ変えています．

・離れる：double dire = p[i].directionTo(mouseX, mouseY)+Math.PI;

・回転する：double dire = p[i].directionTo(mouseX, mouseY)+Math.PI/2;

・くっつく：double dire = p[i].directionTo(mouseX, mouseY);

離れる場合は前回と同じで，p[i]とは逆の方向に動くためp[i]への方向にMath.PIつまり180度を足しています．
回転する場合はp[i]への方向と垂直向きに動き続けば回転する動きが出来るので，Math.PI/2つまり90度を足しています．
くっつく場合はそのままp[i]への方向です．

このようにして，５秒単位で動きの表情を持った点群ができました．