# Self contained layers by extending PGraphics

**URL:** <https://discourse.processing.org/t/self-contained-layers-by-extending-pgraphics/15307>\
**Category:** Gallery\
**Created:** [November 7, 2019, 1:48pm UTC](https://discourse.processing.org/t/self-contained-layers-by-extending-pgraphics/15307 "2019-11-07T13:48:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 7, 2019, 1:48pm UTC](https://discourse.processing.org/t/self-contained-layers-by-extending-pgraphics/15307/1 "2019-11-07T13:48:21Z")

</div>

Inspired by code I showed in [Writing Processing in Kotlin](https://discourse.processing.org/t/writing-processing-in-kotlin/3957/24) I wrote two examples that might be interesting for someone. Maybe not 🙂

# 1

![fps](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b4882ac6e45166d8722901ed6f4f6042a46b0aec.png)

```auto
FPSLayer fpsLayer; // FPS

void settings() {
  size(640, 480, P2D);
}

void setup() {
  fpsLayer = new FPSLayer(this); // FPS
}

void draw() {
  stroke(random(255));
  line(random(width), random(height), random(width), random(height));
  image(fpsLayer.update(), 5, height - 25); // FPS
  
  // You could also separate the previous line in two:
  // fpsLayer.update(); 
  // image(fpsLayer, 5, height - 25);
}

public class FPSLayer extends PGraphics2D {
    private int frameCount;
    private long nextTime;
    FPSLayer(PApplet p5) {
        setParent(p5);
        setPrimary(false);
        setSize(30, 20);
        nextTime = System.currentTimeMillis() + 1000;
    }
    PGraphics2D update() {
        frameCount++;
        long now = System.currentTimeMillis();
        if(now >= nextTime) {
            beginDraw();
            background(0);
            fill(255);
            text(frameCount, 5, height - 5);
            endDraw();
            frameCount = 0;
            nextTime = now + 1000;
        }
        return this;
    }
}

```

The idea behind this is having a self contained reusable layer that extends PGraphics2D or PGraphics3D. You can use such component (in this example a FPS indicator) with just 3 lines in your main program: declaring an instance, initializing it, and drawing it.

It also shows a simplified way of drawing into a PGraphics because you don’t need to prepend each single call with `pg.` as you typically see (for example in [https://processing.org/reference/createGraphics\_.html](https://processing.org/reference/createGraphics_.html))

# 2

![3Dlayer](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c58c5e51271f4aa19bbddd50410580002d55c3b1.png)  
This example renders a rotating cube only once, then reuses that same rendering 7 times placing it rotated on the screen. Maybe useful if you wanted to reuse a complex rendered image many times.

```auto
CubeLayer layer;

void settings() {
  size(640, 480, P3D);
}

void setup() {
  layer = new CubeLayer(this);
}

void draw() {
  background(#0ABE00);
  translate(width/2, height/2);
  rotate(-frameCount * 0.003);
  layer.update();
  for (int i=0; i<7; i++) {    
    image(layer, 70, 0);
    rotate(TAU/7.0);
  }
}

public class CubeLayer extends PGraphics3D {
  CubeLayer(PApplet p5) {
    setParent(p5);
    setPrimary(false);
    setSize(200, 200);
  }
  void update() {
    beginDraw();
    clear();
    directionalLight(51, 102, 126, 1, 1, 1);
    directionalLight(255, 245, 235, -1, -1, -1);
    translate(width/2, height/2);
    rotateX(frameCount * 0.01);
    rotateY(1);
    box(100);
    endDraw();
  }
}

```