processing 反応（２）「イージング easing」

ゆっくり行こう

「イージング easing」

float x;
float easing = 0.01;
float diameter = 100;

void setup() {
	size(500,400);
}

void draw() {
	float targetX = mouseX;
	x += (targetX - x) * easing;
	ellipse(x, 200, diameter,diameter);
	printIn(targetX + " : " + x);
}

対象がマウスに近づくにつれゆっくりになっていく。

＜　現在の値　+=（目標値 – 現在の値）* easing係数　＞

＜解説＞

変数 float x　とする

float 変数　easing に0.01を代入

float 変数　diameter （直径）に１２を代入

Void setup() x軸２２０、y軸１２０の四角形を設定（作る）

Void draw() float 変数　targetX に mouseX(マウスの X地点）を代入

x に targetX (目標値）ー x（現在の値） それにeasingの値をかけた値を足して代入する。

→目標値に近くと現在値がゆっくりになっていく。離れると早くなる。