分析 使用 easing

easing 的感官目的是為了 draw 的時候，畫的圖形不是即時 mouseX 的值，而是稍有落後一點。
從演算法分析，就是讓所畫圖形的 x 座標 落後於 mouseX 的值，並且朝 mouseX 的方向進行運動。
程式如下：

float x;
float easing = 0.01;

void setup(){
size(220,120);
}

void draw(){
float targetX = mouseX;
x+=(targetX-x)*easing;
ellipse(x,40,12,12);
println(targetX+":"+x);
}

draw()的第一行中，將 mouseX 的即時的值儲存在 targetX 中，然後進行下一行。
這裡回顧一下這個程式的目的：是為了畫筆的筆觸慢於mouse,並且向 mouseX 方向移動，而且最好還有一個效果，那就是越靠近 targetX 的座標時，點的速度越慢：

1. 當滑鼠移動到一點的時候，起初的那一點的原座標為x。經過第二行，x的值變成了原值加上變化的值，所以是x+=,用於在上一個值的基礎上增加x座標的值。
2. 然後 target-x 是兩點之間的距離，easing 目前是移動的倍率，目前是 0.01.即相前的每幀前行的距離。
3. 最後，通過 ellipse()函式進行輸出。

整個程式有兩個重要的要素：原始位置和向前移動的距離。這裡向前移動的距離通過 (targetX-x)*easing 計算，下面為兩種特殊情況

1. 當x=target 的時候，這個值等於 0，不再移動
2. 當easing=1的時候，相當於加上 targetX-x,這個時候沒有延時。