如何在不重新渲染静态形状的情况下保持形状静止的同时使形状移动？

Question

在 Processing 中，我正在尝试为旋转的多边形制作动画。在背景中，我有一系列 50 个三角形作为渐变。这些都是在我的 draw 函数中创建的。如何确保多边形保持旋转，但三角形保留在背景中，而不必不断重新渲染 50 个三角形？也许有更简洁的方法来创建这个三角形渐变？

int n = 9;
float ceiling = 350;
float floor = 250;
float diff = (ceiling - floor)/2;
float per = 0;
float dir = -1;
float rate = 0.01;
void setup() {
  size(800, 800);
  background(125,25,25);
  frameRate(30);
}
void draw() {
  background(125,25,25);
  // Creates the triangles in background
  for (float k=0; k<50; k++) {
    strokeWeight(1);
    stroke(#5E4622);
    fill(47,74,57,100*(k/50));
    triangle(100,height,width-100,height,width/2,height*k/50);
  }
  stroke(0);
  // Creates spinning nonagons
  pushMatrix();
  translate(width/2, height/2);
  rotate(2*PI*(dir*per));
  stroke(#F4EA4A);
  strokeWeight(6);
  noFill();
  polygon(0,0,floor+(diff*sin(2*PI*per))+10,n);
  stroke(0);
  strokeWeight(3);
  float[] vertices = polygon(0, 0, floor+(diff*sin(2*PI*per)), n);
  connect(vertices);
  per += rate;
  popMatrix();
}

// Takes a center (x,y) and draws an n-gon of radius r around it
// Returns an array of floats representing the points of the polygon
// Like: {x1,y1,x2,y2,...,xn,yn}
float[] polygon(float x, float y, float r, int n) {
  float angle = 2*PI/n;
  float[] vertices = new float[2*n];
  beginShape();
  for (int i=0; i<n; i++) {
    float vX = r*cos(i*angle) + x;
    float vY = r*sin(i*angle) + y;
    vertex(vX, vY);
    vertices[2*i] = vX;
    vertices[2*i+1] = vY;
  }
  endShape(CLOSE);
  return vertices;
}

// Takes in an array of vertices of a polygon and connects them together.
// Ignores neighboring vertices when considering which vertices to connect 
// to a vertex.
void connect(float[] vertices) {
  int n = vertices.length / 2;
  for (int i=0; i<n; i++) {
    float x = vertices[2*i];
    float y = vertices[2*i+1];
    for (int j=0; j<n; j++) {
      if (j!=i || j!=(i-1)%n || j!=(i+1)%n) {
        float endX = vertices[2*j];
        float endY = vertices[2*j+1];
        line(x, y, endX, endY);
      }
    }
  }
}

此代码创建了我想要的内容，但由于必须重新渲染三角形，它运行起来非常不稳定

Answer 1

How do I ensure that the polygon keeps spinning, but the triangles stay in the background without having to keep re-rendering the 50 triangles?

在 setup 函数初始化时将静态背景渲染为 PGraphics：

PGraphics pg;
void setup() {
    size(800, 800);

    // Creates the triangles in background  
    pg = createGraphics(800, 800);
    pg.beginDraw();
    pg.background(125,25,25);
    for (float k=0; k<50; k++) {
        pg.strokeWeight(1);
        pg.stroke(#5E4622);
        pg.fill(47,74,57,100*(k/50));
        pg.triangle(100,height,width-100,height,width/2,height*k/50);
    }
    pg.endDraw();

    frameRate(30);
}

通过image(), in every frame, instead of filling the background by background()将背景图片绘制到场景中：

void draw() {

    // background image to screen
    image(pg, 0, 0);

    stroke(0);
    // Creates spinning nonagons

    // ...

}

Perhaps there's a cleaner way to create this triangular gradient?

如果您想获得平滑的渐变背景并摆脱线条，请使用 pg.noStroke() 而不是 pg.stroke(#5E4622);。此外，还可以改变 ist 底部三角形的大小：

for (float k=0; k<50; k++) {
    pg.noStroke();
    pg.fill(47,74,57,100*(k/50));
    pg.triangle(k/50*width/2,height,width-k/50*width/2,height,width/2,height*k/50);
}

如何在不重新渲染静态形状的情况下保持形状静止的同时使形状移动？

How to make a shape move while keeping a shape static without re-rendering the static shape?

processing