Processing

Processing 状态量控制动画技巧

Posted by Shen Yifan on 2018-01-03

CSDN博客站点·同文地址: http://blog.csdn.net/fddxsyf123/article/details/62848357

本章介绍Processing 状态量控制动画技巧。分三个小例子供大家参考。

一、状态量state控制圆缩放动画

使用if语句搭配state控制量可以控制动画，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
int ellipse_r = 100;//定义并初始化圆的大小（直径）
int state = 0;      //定义状态量state，缺省值0；

void setup()
{
  size(500, 500);
}

void draw()
{
  background(0);

  if (state == 0)
  {
    ellipse_r ++;
  }
  if (state == 1)
  {
    ellipse_r --;
  }
  if (ellipse_r >= 250)
  {
    state = 1;
  }
  if (ellipse_r <= 50)
  {
    state = 0;
  }
  ellipse(width/2, height/2, ellipse_r, ellipse_r);
}

如图所示：
这里写图片描述

二、状态量控制红绿灯

state状态量控制红绿灯，循环切换状态，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
int ellipse_r = 100;//定义并初始化圆的大小（直径）
int state = 0;      //定义状态量state，缺省值0；
boolean FLASH = false;//闪烁开关
int timecount;      //计时器
float oldtime;      //过去的时刻
void setup()
{
  size(500, 500);

  oldtime = millis();
}

void draw()
{
  UpdateState();

  Display();
}

void UpdateState()
{

  if (millis() - oldtime >=1000)
  {
    timecount ++;
    oldtime = millis();
  }
  println(timecount);
  if (timecount <= 2)
    state = 0;
  else if (timecount > 2 && timecount <=5)
    state = 1;
  else if (timecount > 5 && timecount <=6)
    state = 2;
  else if (timecount > 6 && timecount <=8)
    state = 3;
  else if (timecount > 8)
    timecount = 0;

  if (state == 1)
  {
    if (second() %2 == 0)
      FLASH = true;
    else
      FLASH = false;
  }
}

void Display()
{
  background(0);
  
  switch(state)
  {
  case 0:        //绿灯亮
    noStroke();
    fill(0, 250, 0);
    ellipse(width/2-200, height/2, 100, 100);
    break;
  case 1:        //绿灯闪烁
    noStroke();
    fill(0, 250, 0);
    if (FLASH)
      ellipse(width/2-200, height/2, 100, 100);
    break;
  case 2:        //黄灯亮
    noStroke();
    fill(255, 210, 0);
    ellipse(width/2, height/2, 100, 100);
    break;
  case 3:        //红灯亮
    noStroke();
    fill(250, 0, 0);
    ellipse(width/2+200, height/2, 100, 100);
    break;
  }
}

如图：
这里写图片描述

三、状态量控制矩阵

使用状态量控制LED灯阵；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
ArrayList<LED> ledlist;      //定义动态列表（也可用普通列表）
int ledwidth = 75;          
boolean ispressed = false;

void setup()
{
  size(500, 500);

  ledlist = new ArrayList<LED>();

  LED led1 = new LED(width/2-ledwidth-100, height/2-ledwidth-100, ledwidth);
  LED led2 = new LED(width/2-ledwidth-100, height/2, ledwidth);
  LED led3 = new LED(width/2-ledwidth-100, height/2+ledwidth+100, ledwidth);
  LED led4 = new LED(width/2, height/2-ledwidth-100, ledwidth);
  LED led5 = new LED(width/2, height/2, ledwidth);
  LED led6 = new LED(width/2, height/2+ledwidth+100, ledwidth);
  LED led7 = new LED(width/2+ledwidth+100, height/2-ledwidth-100, ledwidth);
  LED led8 = new LED(width/2+ledwidth+100, height/2, ledwidth);
  LED led9 = new LED(width/2+ledwidth+100, height/2+ledwidth+100, ledwidth);

  ledlist.add(led1);
  ledlist.add(led2);
  ledlist.add(led3);
  ledlist.add(led4);
  ledlist.add(led5);
  ledlist.add(led6);
  ledlist.add(led7);
  ledlist.add(led8);
  ledlist.add(led9);
}

void draw()
{
  background(0);
  
  for(int i=0;i < ledlist.size(); i++)        //遍历绘画函数
  {
    LED led = ledlist.get(i);
    led.draw();
  }
}

void mousePressed()
{
    for(int i=0;i < ledlist.size(); i++)
  {
    LED led = ledlist.get(i);
    led.update();                              //当鼠标点击时更新状态
  }
}

LED类定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
class LED {
  int x;//X轴向位置
  int y;//Y轴线位置
  int state;//状态量
  int k;//开关变量（参考本节第一个小例子）
  int w;//大小
  int degs;//角度
  int c;//颜色（色相值）
  LED(int x_, int y_, int w_) {    //构造函数初始化变量
    x = x_;
    y = y_;
    w = w_;
    c = (int)random(0,360);        //初始化随机赋颜色
    state = 0;
    k = 0;
    degs = 0;
  }
  void update()                    //检测鼠标是否悬停在方框内
  {
    if (overRect(x-w/2, y-w/2, w, w))
    {
      state ++;                    //鼠标点击，三种状态循环切换
      if (state >= 3)
      {
        state = 0;
      }
    } 
  }
  void draw()
  {
    colorMode(HSB,360,100,100);    //使用HSB颜色模型
    if (state == 0)                //第一种情况，呈现原有状态
    {
      pushMatrix();
      translate(x, y);
      rotate(radians(degs));
      fill(c,100,100);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, w, w);
      popMatrix();
    } else if (state == 1)          //第二种情况，旋转方框
    {
      pushMatrix();
      translate(x, y);
      rotate(radians(++degs));
      fill(c,100,100);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, w, w);
      popMatrix();
    } else if (state == 2)            //第三种情况，改变颜色
    {
      pushMatrix();
      translate(x, y);
      rotate(radians(degs));
      if (k == 0)
        c ++;
      if (k == 1)
        c --;
      if (c <=0)
      {
        c = 0;
        k = 0;
      }
      if (c >= 360)
      {
        c = 360;
        k = 1;
      }
      fill(c,100,100);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, w, w);
      popMatrix();
    }
  }
  boolean overRect(int x, int y, int width, int height) {
    if (mouseX >= x && mouseX <= x+width && 
      mouseY >= y && mouseY <= y+height) {
      return true;
    } else {
      return false;
    }
  }
}

如图：

这里写图片描述

这里写图片描述

总结：
把更新数据和绘画渲染的工作分开来处理，在更新数据的模块里相应的设置state状态所控制的内容，然后在绘*画渲染的模块里检索state的值，相应的更改绘画的模式或者属性。

FEATURED TAGS
Processing
FRIENDS
本站总访问量 次    本站访客数人次 本文总阅读量次