我可以使用处理3 For循环使用If语句进行动画帧吗?

时间:2015-11-26 07:34:28

标签: animation if-statement for-loop processing lerp

脚本在Processing 3.0.1编辑器中运行。我想实现:

  • 连续循环
  • 维持循环的值为10(其中for循环中的每个新三角形集替换每个最旧的集合,使动画显示为 火红的流星)

我可以使用简单的if语句完成此操作,还是需要创建数组,还是......?接受建议。

void setup() {
  size(504, 282);
  background(0);
}

void draw() {
  color from = color(255, 0, 0, 50);
  color to   = color(255, 255, 0, 300);
  color a = lerpColor(from, to, .33);
  color b = lerpColor(from, to, .66);
  for (int i=0; i<20; i++) {
    // 1st Stage
    float a1=random(0, 84);
    float b1=random(0, 47);
    float c1=random(84, 168);
    float d1=random(47, 94);
    float e1=random(168, 252);
    float f1=random(94, 141);
    fill(from);
    triangle(a1, b1, c1, d1, e1, f1);
    // 2nd Stage
    float a2=random(84, 168);
    float b2=random(47, 94);
    float c2=random(168, 252);
    float d2=random(94, 141);
    float e2=random(252, 336);
    float f2=random(141, 188);
    fill(a);
    triangle(a2, b2, c2, d2, e2, f2);
    // 3rd Stage
    float a3=random(168, 252);
    float b3=random(94, 141);
    float c3=random(252, 336);
    float d3=random(141, 188);
    float e3=random(336, 420);
    float f3=random(188, 235);
    fill(b);
    triangle(a3, b3, c3, d3, e3, f3);
    // 4th Stage
    float a4=random(252, 336);
    float b4=random(141, 188);
    float c4=random(336, 420);
    float d4=random(188, 235);
    float e4=random(420, 504);
    float f4=random(235, 282);
    fill(to);
    triangle(a4, b4, c4, d4, e4, f4);
    noStroke();
  }
  //saveFrame("####.png");
}

2 个答案:

答案 0 :(得分:0)

第1步:创建一个,它封装了绘制单个“舞台”所需的一切。对你而言,这可能是你三角形上的点。

第2步:创建一个保存该类实例的ArrayList

第3步:在draw()函数中,创建该类的实例并将其添加到ArrayList。您可以将frameCount变量与mod运算符一起使用来控制动画的“速度”。

第4步:当ArrayList包含10个以上的对象时,删除第一个对象以删除最旧的对象。

第5步:遍历您的对象并绘制它们。

总而言之,它可能看起来像这样(用你的形状而不是矩形:

ArrayList<MyShape> shapes = new ArrayList<MyShape>();

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

void draw() {
  background(0);
  for (MyShape shape : shapes) {
    shape.draw();
  }

  if (frameCount % 10 == 0) {
    shapes.add(new MyShape());

    if (shapes.size() >= 10) {
      shapes.remove(0);
    }
  }
}

class MyShape {

  float x;
  float y;
  float r;

  public MyShape() {
    x = mouseX;
    y = mouseY;
    r = random(10, 20);
  }

  public void draw() {
    rect(x, y, r, r);
  }
}

答案 1 :(得分:0)

background()函数在放入draw()函数时清除每个新帧的缓冲区。

void setup() {
  size(504, 282);
}

void draw() {
  background(0);
  color from = color(255, 0, 0, 50);
  color to   = color(255, 255, 0, 300);
  color a = lerpColor(from, to, .33);
  color b = lerpColor(from, to, .66);
  for (int i=0; i<20; i++) {
    float a1=random(0, 84);
    float b1=random(0, 47);
    float c1=random(84, 168);
    float d1=random(47, 94);
    float e1=random(168, 252);
    float f1=random(94, 141);
    fill(from);
    triangle(a1, b1, c1, d1, e1, f1);
    float a2=random(84, 168);
    float b2=random(47, 94);
    float c2=random(168, 252);
    float d2=random(94, 141);
    float e2=random(252, 336);
    float f2=random(141, 188);
    fill(a);
    triangle(a2, b2, c2, d2, e2, f2);
    float a3=random(168, 252);
    float b3=random(94, 141);
    float c3=random(252, 336);
    float d3=random(141, 188);
    float e3=random(336, 420);
    float f3=random(188, 235);
    fill(b);
    triangle(a3, b3, c3, d3, e3, f3);
    float a4=random(252, 336);
    float b4=random(141, 188);
    float c4=random(336, 420);
    float d4=random(188, 235);
    float e4=random(420, 504);
    float f4=random(235, 282);
    fill(to);
    triangle(a4, b4, c4, d4, e4, f4);
    noStroke();
  }
}