【Processing-日常1】小圆碰撞

Processing创意编程，需要我们一起不断地积累和练习。今后把日常练习整理成文章给自己和大家做个总结和参考。

---

本例是【日常】的第一例。应用程序要点如下：

• 画布中绘画一个圆
• 圆在画布里不停地漂浮，撞到画框，反弹

• 圆在撞到画框时触发事件：圆在一个范围内放大和缩小，同时改变颜色

• 【算法评级】 –   ★   –

---

初始化

首先初始化，定义setup()：

void setup()
{  
  size(600, 600);
  colorMode(HSB, 360, 100, 100);
}

这里，colorMode()定义HSB作为整个应用的颜色空间定义，方便控制颜色变化。

绘画

绘制一个圆，用ellipse()函数，即：

ellipse(x, y, r, r);

在最开始，声明控制圆的位置变量x，y以及圆的大小r,如下：
 int x = 200;
 int y = 200;
 int r = 150;

而为了满足第二个互动要求，还需要一个变量来控制颜色属性：
 int c = 0;

接着定义绘画部分的逻辑：

  fill(c, 100, 100);//以色相值控制颜色
  ellipse(x, y, r, r);

定义逻辑

圆碰撞到画面边界，对应的相应逻辑如下流程图。

因此代码逻辑如下：
if (圆 坐标到了 画面以外)
{
1. 颜色要改变；
2. 大小要改变；
3. 移动方向要改变；
}
其中，大小的变化，我们可以借用之前笔者提到的状态量（state）控制法来控制其逻辑。移动方向，借用矢量的数学知识，一个正值一个负值控制运动方向性，speed变量控制其总的运动速度。见下代码：

  x=x+a*speed;//当a是正值时是向右移动，当a是负值时向左移动。
  y=y+b*speed;//当b是正值时是向下移动，当b是负值时向上移动。

对于颜色变化，色相从0到360改变，设定其范围，超出则复位。为了保证不出现圆偏离到画面之外，在每次触发后重新定位在其边界上或边界内。整个逻辑处理见下代码：

    if (x >= (600-r/2))
    {
      if (state == 0)
        r += 50;//变大，下同。
      else
        r -= 50;//变小，下同。
      a = -a;//改变移动方向，下同。
      c -= 50;//改变颜色，下同。
      if (c < 0)
        c += 360;
      x = 600-r/2;//保证不出画面，下同。
    }
    if (x <= (r/2))
    {
      if (state == 0)
        r += 50;
      else
        r -= 50;
      a = -a;
      c -= 50;
      if (c < 0)
        c += 360;
      x = (r/2);
    }
    
    if (y >= (600-r/2))
    {
      if (state == 0)
        r += 50;
      else
        r -= 50;
      b = -b;
      c -= 50;
      if (c < 0)
        c += 360;
      y = (600-r/2);
    }
    if (y <= (r/2))
    {
      if (state == 0)
        r += 50;
      else
        r -= 50;
      b = -b;
      c -= 50;
      if (c < 0)
        c += 360;
      y = (r/2);
    }
//切换变大变小的状态！
    if (r >= 250)
      state = 1;  
    if (r <= 50)
      state = 0;

运行效果如图：