title: How to make a shape move while keeping a shape static without re-rendering the static shape?
body: <p>In Processing, I'm trying to animate a spinning polygon. In the background, I have a series of 50 triangles that act as a gradient. These are both created in my <code>draw</code> function. 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? Perhaps there's a cleaner way to create this triangular gradient?</p>
  
  <pre><code>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&lt;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&lt;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&lt;n; i++) {
      float x = vertices[2*i];
      float y = vertices[2*i+1];
      for (int j=0; j&lt;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);
        }
      }
    }
  }
  </code></pre>
  
  <p>This code creates what I want, but it runs pretty choppily due to having to re-render the triangles</p>