processing - 如何在保持形状静态而不重新渲染静态形状的情况下使形状移动？

Question

在处理中，我正在尝试为旋转的多边形设置动画。在背景中，我有一系列 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);
      }
    }
  }
}

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

标签： processing

Answer 1

如何确保多边形保持旋转，但三角形留在背景中而不必重新渲染 50 个三角形？

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

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()中，而不是通过 填充背景background()：

void draw() {

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

    stroke(0);
    // Creates spinning nonagons

    // ...

}

---

也许有一种更简洁的方法来创建这个三角形渐变？

如果您想获得平滑的渐变背景并消除线条，请使用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);
}