如何在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;
  }