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);
      }
    }
  }
}

这段代码创建了我想要的东西，但是由于必须重新渲染三角形，所以运行得很混乱

Answer 1

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

在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()将背景图像绘制到场景，而不是通过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);
}

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

1 个答案: