# PShader as background

**URL:** <https://discourse.processing.org/t/pshader-as-background/14495>\
**Category:** Coding Questions\
**Created:** [October 7, 2019, 3:49pm UTC](https://discourse.processing.org/t/pshader-as-background/14495 "2019-10-07T15:49:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rojele](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rojele/32/5898_2.png) [@rojele](https://discourse.processing.org/u/rojele)\
**Post date:** [October 7, 2019, 3:49pm UTC](https://discourse.processing.org/t/pshader-as-background/14495/1 "2019-10-07T15:49:44Z")

</div>

Hi, everyone, and thanks in advance for any help.  
In order to achieve this, I’m trying actually to apply the PShader to a PGraphics object, and then pass this PGraphics as an argument for the background.  
When I use the resultant PGraphics in an image() function, it works perfectly, but nothing is shown when I use it for the background().  
If I draw anything inside the PGraphics (for example a rect), then that is shown in the background, but not the PShader I need;

Has anyone faced this problem and got a solution? Thanks a lot.

I paste the Processing code below

```auto
PShader shader;
float wE, hE;
PGraphics backImgPG;

void setup() {
  size(1024, 768, P3D);
  background(0);
  shader=loadShader("../frag/72.frag");
  shader.set("u_resolution", float(width), float(height));
  backImgPG=createGraphics(width, height);
  rectMode(CENTER);
  noStroke();
}
void draw() {
  shader.set("u_time", millis() / 1000.0);
  shader(shader);

  //image(shaderPG(backImgPG), 0, 0);//works
  background(shaderPG(backImgPG));//doesn't work
}

PGraphics shaderPG(PGraphics _pg) {
  _pg.beginDraw();
  _pg.endDraw();
  return backImgPG;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 8, 2019, 12:53am UTC](https://discourse.processing.org/t/pshader-as-background/14495/2 "2019-10-08T00:53:01Z")

</div>

see

> **[background() / Reference](https://processing.org/reference/background_.html)**
>
> The background() function sets the color used for the background of the Processing window. The default background is light gray. This function is typically used within draw() to clear th…

```auto
 An image can also be used as the background for a sketch,
although the image's width and height must match that of the sketch window.
Images used with **background()** will ignore the current **tint()** setting. 
To resize an image to the size of the sketch window, use image.resize(width, height).

```

> so the size of the image needs to fit

---

<div class="post-metadata">

**Author:** ![rojele](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rojele/32/5898_2.png) [@rojele](https://discourse.processing.org/u/rojele)\
**Post date:** [October 8, 2019, 7:58am UTC](https://discourse.processing.org/t/pshader-as-background/14495/3 "2019-10-08T07:58:42Z")

</div>

Hi!  
I’ve tried with the PImage approach (thanks @kll). The only way I got it to work is applying PShader as filter and then using the get() method.  
It works, but the performance is pretty slow. It’s a good approach but not still what it should be.  
Finally I found this simple solution, that works perfectly even I don’t understand exactly why, because any background method is being called.

```auto

void setup() {
  size(1024, 768, P3D);
  shader=loadShader("data/frag/72.frag");
  shader.set("u_resolution", float(width), float(height));
}

void draw() {
  shader.set("u_time", millis() / 1000.0);
  filter(shader);
}

```