如何在Processing中实现弹跳球动画？

弹跳球在Processing中是一个很是经典的动画效果，就是一个球在两堵墙中间不停地碰撞，能够在Processing中使用如下代码实现：

float circleX;
float xspeed = 10;

void setup(){
  size(640, 360);
  circleX = 0;
}

void draw(){
  background(50);
  fill(150);
  stroke(255);
  ellipse(circleX, height/2, 20, 20);
  circleX = circleX + xspeed;
  
  if(circleX > width || circleX < 0){
     xspeed = xspeed * -1;
  }
}

代码的关键是在xspeed这个变量上，由于在draw函数中，代码一直循环执行，因此小球的横坐标circleX是随着xspeed变化的。当circleX的位置大于width或者小于0的时候，xspeed经过* -1变成反向。

若是咱们想模拟小球撞到墙后，能量损失的过程，能够把xspeed = speed * -1 变为 xspeed = xspeed * -0.9

可是发现小球到达最右边的时候，像是被卡住了似的，咱们能够分析小球到达右边时候circleX和xspeed的变化。

若是小球的circleX 等于370，那么xspeed变为-9，因此下个循环circleX变为361,仍是大于360，这时候xspeed变为8.1，下个循环circleX变为369.1,这时候xspeed变为-7.29。咱们把它们可能的值列在下面：

circleX = 370, xspeed = -9
circleX = 361, xspeed = 8.1
circleX = 369.1, xspeed = -7.29
circleX = 361.81, xspeed = 6.561
circleX = 368.371, xspeed = -5.9049
circleX = 362.461, xspeed = 5.31414
...

从上面值能够看出，小球一直在360-370这个区间震荡，没法返回。能够改为下面的代码，限制小球不能超过整个画布的大小，就能够让小球正常返回，否则就会在边缘震荡:

if(circleX > width){
    xspeed = xspeed * -0.9;
    circleX = width;
  }
  
  if(circleX < 0){
    xspeed = xspeed * -0.9;
    circleX = 0;
  }