码迷,mamicode.com
首页 > 其他好文 > 详细

Getting Started with Processing 第五章的easing问题

时间:2018-12-05 02:21:07      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:特殊情况   class   roc   位置   java   之间   变化   +=   get   

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





Getting Started with Processing 第五章的easing问题

标签:特殊情况   class   roc   位置   java   之间   变化   +=   get   

原文地址:https://www.cnblogs.com/FBsharl/p/10068288.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!