Getting Started with Processing 第五章的easing问题

Posted 2021-01-24 fbsharl

分析 使用 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,这个时候没有延时。