Efficiently animated PShape groups

Gallery
1

Hello Forum. I’ve been working a lot with PShapes and PShape groups as they tend to be efficient when rendering lots of geometry.
The main problem I had with this method was that textured PShapes were initiated and then never edited, meaning that they were always ‘static’ in appearance

Recently I realized that I could use PGraphics instead of a PImage, and this would allow me to animate the texture on a PShape without ever actually having to update the shape itself

I’m sure some of you were already aware of this technique but I thought I would share anyway, because I thought it was neat :slight_smile:

PShape group;
PGraphics graphics;
void setup() {
  fullScreen(OPENGL);
  //initiate our group and pgraphics
  group = createShape(GROUP);
  graphics = createGraphics(64, 64, OPENGL);
  float[][] h_ = new float[11][11];
  //create random y values of  mesh
  for (int i = 0; i < 11; i++) {
    for (int j = 0; j < 11; j++) {
      h_[i][j] = noise(i*.5, j*.5);
    }
  }
  noStroke();
  //simple mesh
  for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 10; j++) {
      PShape p = createShape();
      p.beginShape();
      p.noStroke();
      p.texture(graphics);
      p.vertex(i*100-500, h_[i][j]*240, j*100-500, 0, 0);
      p.vertex(i*100+100-500, h_[i+1][j]*240, j*100-500, 64, 0);
      p.vertex(i*100+100-500, h_[i+1][j+1]*240, j*100+100-500, 64, 64);
      p.vertex(i*100-500, h_[i][j+1]*240, j*100+100-500, 0, 64);
      p.endShape(CLOSE);
      group.addChild(p);
    }
  }
}
void draw() {
  //edit our pgraphics in real time
  float x_ = noise(frameCount*.01,0);
  float y_ = noise(0,frameCount*.01);
  graphics.beginDraw();
  graphics.colorMode(HSB,100);
  graphics.background(frameCount*.1, 100, 100);
  graphics.fill(0,0,100);
  graphics.ellipse(x_*64,y_*64,8,8);
  graphics.endDraw();
  //display shape
  lights();
  background(0);
  translate(width/2, height/2+100, 0);
  shape(group);
}
5 Likes