# Custom class that extends PGraphics class not working

**URL:** <https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199>\
**Category:** Coding Questions\
**Created:** [April 27, 2020, 10:31am UTC](https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199 "2020-04-27T10:31:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ayfri](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ayfri/32/8797_2.png) [@Ayfri](https://discourse.processing.org/u/Ayfri)\
**Post date:** [April 27, 2020, 10:31am UTC](https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199/1 "2020-04-27T10:31:41Z")

</div>

I have this custom `Button` class that extends `PGraphics` but I can’t figure it out how to make it working, the `draw` function just do nothing, I inspected the pixels and before `sketch(this, x, y);`, all pixels are equals to `0` 🤔

```auto
package fr.ayfri.minecraft_art;

import processing.core.PApplet;
import processing.core.PGraphics;
import processing.core.PImage;
import processing.event.MouseEvent;

import java.util.Arrays;

public abstract class Button extends PGraphics {
	private final int color;
	private final int clickedColor;
	private final int x;
	private final int width;
	private final int height;
	private final int y;
	private String text = "";
	private boolean clicked = false;
	protected final Main sketch;
	
	public Button(Main sketch, final int x, final int y, final int width, final int height) {
		this.sketch = sketch;
		this.x = x;
		this.width = width;
		this.height = height;
		this.y = y;
		color = this.color(200f);
		clickedColor = this.color(100f);
		setSize(getWidth(), getHeight());
		setParent(sketch);
	}
	
	public int getWidth() {
		return width;
	}
	
	public int getHeight() {
		return height;
	}
	
	public abstract void onClick();
	
	public void draw() {
		beginDraw();
		if (clicked) {
			background(clickedColor);
		} else {
			background(color);
		}
		stroke(color(0f));
		strokeWeight(4f);
		text(text,
		          (x + width) / 2f - text.length() * textSize,
		          (y + height) / 2f - text.length() * textSize);
		endDraw();
		loadPixels();
		// Here, all the pixels are equals to '0' :/

		sketch.image(this, x, y); 
	}
	
	public void mouseEvent(MouseEvent event) {
		switch (event.getAction()) {
			case MouseEvent.PRESS:
				clicked = true;
				break;
			
			case MouseEvent.RELEASE:
				clicked = false;
				break;
			default:
				throw new IllegalStateException("Unexpected value: " + event.getAction());
		}
	}
	
	public String getText() {
		return text;
	}
	
	public void setText(String text) {
		this.text = text;
	}
	
	public int getX() {
		return x;
	}
	
	public int getY() {
		return y;
	}
	
	public boolean isClicked() {
		return clicked;
	}
	
	public void setClicked(final boolean clicked) {
		this.clicked = clicked;
	}
}

```

So how to make it working ?

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 27, 2020, 10:23pm UTC](https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199/2 "2020-04-27T22:23:01Z")

</div>

If the class you’re extending has parameters, you’re gonna need to call `super()` inside the child’s constructor. Checkout [this related question](https://stackoverflow.com/questions/10508107/why-call-super-in-a-constructor).

---

<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:** [April 30, 2020, 4:15pm UTC](https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199/3 "2020-04-30T16:15:50Z")

</div>

I think calling `super()` is not necessary in this case, see [Self contained layers by extending PGraphics](https://discourse.processing.org/t/self-contained-layers-by-extending-pgraphics/15307)

But I did need to call `setParent()`, `setPrimary()` and `setSize()`.

Ah looking at the code, I’m not sure the PGraphics can draw itself onto the main canvas. Can’t you call `image(theButton, 20.0, 20.0)` from whoever owns this Button?

---

<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:** [April 30, 2020, 4:28pm UTC](https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199/4 "2020-04-30T16:28:16Z")

</div>

One more thing, if you are using Idea / Eclipse or similar, you could use callbacks as I show in ["Variable in variable"/putting a variable in the name behind void / calling methods by name](https://discourse.processing.org/t/variable-in-variable-putting-a-variable-in-the-name-behind-void-calling-methods-by-name/16935/8)

That way you don’t need to use abstract in your class, you can just tell the button which function to call when it’s pressed. (this would not work in the Processing IDE)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 30, 2020, 6:51pm UTC](https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199/5 "2020-04-30T18:51:34Z")

</div>

> [@Ayfri](#):
>
> package fr.ayfri.minecraft\_art; import processing.core.PApplet; import processing.core.PGraphics; import processing.core.PImage; import processing.event.MouseEvent; import java.util.Arrays; public abstract class Button extends PGraphics { private final int color; private final int clickedColor; private final int x; private final int width; private final int height; private final int y; private String text = “”; private boolean clicked = false; protected final Main sketch; public Button(Main sketch, final int x, final int y, final int width, final int height) { this.sketch = sketch; this.x = x; this.width = width; this.height = height; this.y = y; color = this.color(200f); clickedColor = this.color(100f); setSize(getWidth(), getHeight()); setParent(sketch); } public int getWidth() { return width; } public int getHeight() { return height; } public abstract void onClick(); public void draw() { beginDraw(); if (clicked) { background(clickedColor); } else { background(color); } stroke(color(0f)); strokeWeight(4f); text(text, (x + width) / 2f - text.length() \* textSize, (y + height) / 2f - text.length() \* textSize); endDraw(); loadPixels(); // Here, all the pixels are equals to ‘0’ 😕 sketch.image(this, x, y); } public void mouseEvent(MouseEvent event) { switch (event.getAction()) { case MouseEvent.PRESS: clicked = true; break; case MouseEvent.RELEASE: clicked = false; break; default: throw new IllegalStateException("Unexpected value: " + event.getAction()); } } public String getText() { return text; } public void setText(String text) { this.text = text; } public int getX() { return x; } public int getY() { return y; } public boolean isClicked() { return clicked; } public void setClicked(final boolean clicked) { this.clicked = clicked; } }

not sure what you are trying to achieve as I get a lot of bugs trying to run the code. However if you want to instance a PGraphics layer for the canvas, here is a template I wrote. Change variables name appropriately.

```auto
int w = 1200,h = 600;
PGraphics a,b,c;
someClass s;
void settings(){
  size(w,h,FX2D);
};

void setup(){
  s = new someClass();
};

void draw(){
  s.draw();
};

class someClass{
  PGraphics a,b;
  someClass(){
    setup();
    a = createGraphics(w,h);
    b = createGraphics(w,h);
  };
  
  void setup(){
    
  };
  
  void draw(){
    a.beginDraw();
    a.fill(255);
    a.rect(0,0,w,h/2);
    a.endDraw();
    image(a,0,0);
  };
  
  
};

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 30, 2020, 7:06pm UTC](https://discourse.processing.org/t/custom-class-that-extends-pgraphics-class-not-working/20199/6 "2020-04-30T19:06:09Z")

</div>

note that whilst

```auto
setup(){
size(a,b,FX2D);
};

settings(){

};

```

whilst settings and setup can accept FX2D as the renderer, `createGraphics();` cant and therefore can only be called with no renderer which defaults to P2D (I think), P2D, or JAVAFX2D. Whilst not necessarily a problem, different renderers have different methods of rendering text and or shapes, which may leave you with a non ideal gui experience.