使用处理的垂直条动画

Question

我主要是尝试在屏幕上制作垂直条的动画，这些垂直条应该等距并继续，直到按下某个键等。在 processing.org 动画工具中。我能够得到一种动画，但是具有硬编码值并且不得不一次又一次地编写相同的代码来为整个 frame/screen 生成条形动画。我需要让它通用，这样改变屏幕宽度或条形的大小不会让我改变整个代码，而只是改变控制参数的变量。下面是我的代码。我已经为三个垂直条编写了代码，但需要为整个屏幕完成..

int a;
int i;
int j;

void setup() {
  size(640, 360);
  a = width/2;
  i = 0;

}

void draw() {
  background(51);

  //need to avoid these repetitions each time for each bar

  rect(a , 0, 25, width);  
  a = a - 1;
  if (a < 0) { 
   a = width; 
  }

  rect(i= a+50, 0, 25, width);  
  i = i - 1;
  if (i < 0) { 
   i = width + a; 
  }


  rect(j = i + 50, 0, 25, width);  
  j = j - 1;
  if (a < 0) { 
   j = width + i; 
  }

}

Answer 1

听起来您正在寻找一个数组。

数组就像一个变量，只是它可以在其索引中保存多个值。然后，您可以使用 for 循环 遍历数组并根据数组中的值执行操作。

下面是一个使用数组来跟踪行位置的示例：

float[] linePositions = new float[10];
float lineWidth = 25;
float lineSpacing = 25;
float lineSpeed = 1;

void setup() {
  size(640, 360);

  for (int i = 0; i < linePositions.length; i++) {
    linePositions[i] = width/2 + (lineWidth+lineSpacing)*i;
  }
}

void draw() {
  background(51);

  //loop through the lines
  for (int i = 0; i < linePositions.length; i++) {

    //draw the line
    rect(linePositions[i], 0, lineWidth, width); 

    //move the line
    linePositions[i] -= lineSpeed;

    //wrap the line
    if ( linePositions[i] < 0) { 
      linePositions[i] = width;
    }
  }
}

有关数组的更多信息，请参阅 the Processing reference。

使用处理的垂直条动画

animation of vertical bars using processing

processing

animation

automation