# Efficiently animated PShape groups

**URL:** <https://discourse.processing.org/t/efficiently-animated-pshape-groups/33068>\
**Category:** Gallery\
**Created:** [October 26, 2021, 12:31am UTC](https://discourse.processing.org/t/efficiently-animated-pshape-groups/33068 "2021-10-26T00:31:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![BennyHacker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bennyhacker/32/2969_2.png) [@BennyHacker](https://discourse.processing.org/u/BennyHacker)\
**Post date:** [October 26, 2021, 12:31am UTC](https://discourse.processing.org/t/efficiently-animated-pshape-groups/33068/1 "2021-10-26T00:31:05Z")

</div>

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 🙂

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

```