# Using texture in PGraphic

**URL:** <https://discourse.processing.org/t/using-texture-in-pgraphic/30967>\
**Category:** Coding Questions\
**Created:** [June 29, 2021, 5:37pm UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967 "2021-06-29T17:37:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![heXYdi](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@heXYdi](https://discourse.processing.org/u/heXYdi)\
**Post date:** [June 29, 2021, 5:37pm UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/1 "2021-06-29T17:37:08Z")

</div>

Dear people,

probably the question is pretty simple and maybe I am just blind. Unfortunately I don’t manage to apply an Image as texture for a PGraphic. In my original code the PGraphic is used in several functions, which works out. Then I tried to apply a texture, but didn’t manage. I never worked with textures before, so maybe my mistake is really basic. I now tried to rebuild the code step by step, implementing texture form the beginning. Already at the step shown below, I don’t get an image anymore. All that is shown is the black background. I’d be very grateful if someone could help me finding my mistake.

 ![Gold](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/87449f32da31431ed61a6879f7a1b58068b2d2cf.jpeg)

```auto
PImage Gold;

PGraphics triangle;

void setup(){
    size (1024, 800, P2D);
    frameRate(30);
    background(0);
    noCursor();

//PGraphics:
    triangle = createGraphics(width,height);

//PImage
    Gold = loadImage("Gold.jpg");
}

void draw(){
  
    translate(width/2, height/2);
   
   //unfortunately the texture doesn't apply to the PGraphic   
    triangle.beginDraw();
    triangle.background(0,0);
      triangle.beginShape();
        triangle.texture(Gold);
          triangle.vertex(0, 0, mouseX, mouseY);
          triangle.vertex(500, 0, 500, 0);
          triangle.vertex(0, 500, 0, 500);
      triangle.endShape(CLOSE);
      triangle.endDraw();
      
      image(triangle, 0, 0);
      
    
    /* PGraphic works like this
    triangle.beginDraw();
    triangle.background(0,0);
      triangle.beginShape();
      triangle.fill(255,0,0);
        //triangle.texture(Gold);
          triangle.vertex(0, 0);
          triangle.vertex(500, 0);
          triangle.vertex(0, 500);
      triangle.endShape(CLOSE);
      triangle.endDraw();
      
      image(triangle, 0, 0);
      */
      
/* the gold texture works in here 
      beginShape();
        texture(Gold);
          vertex(0, 0, mouseX, mouseY);
          vertex(500, 0, 500, 0);
          vertex(0, 500, 0, 500);
      endShape(CLOSE);
*/      
}

```

---

<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:** [June 29, 2021, 8:13pm UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/2 "2021-06-29T20:13:14Z")

</div>

simple texture sketch just add your own shader file.

```auto
PShader shader;
PGraphics canvas;
PImage img;
float []v = {0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0};
void setup() {
  size(640, 360, P3D);
  img = loadImage("b1.jpg");
  shader = loadShader("shader.glsl");
  shader.set("mult",2.1);
  shader.set("type",1.0);
  shader.set("v",v);
  noStroke();
};

void draw() {
  background(0);
  translate(width / 2, height / 2);
  rotateX(map(mouseY, 0, height, -PI, PI));
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateZ(PI/6);
  beginShape();
  texture(img);
  vertex(-100, -100, 0, 0, 0);
  vertex(100, -100, 0, img.width, 0);
  vertex(100, 100, 0, img.width, img.height);
  vertex(-100, 100, 0, 0, img.height);
  endShape();
  shader(shader);
};

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 29, 2021, 8:38pm UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/3 "2021-06-29T20:38:43Z")

</div>

Hello,

Welcome.

Please format your code:  
_[FAQ - Processing Foundation](https://discourse.processing.org/faq#format-your-code)_ - Format your Code

`:)`

---

<div class="post-metadata">

**Author:** ![heXYdi](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@heXYdi](https://discourse.processing.org/u/heXYdi)\
**Post date:** [June 30, 2021, 4:48am UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/4 "2021-06-30T04:48:33Z")

</div>

Hey paulgoux,

thank you for your answer!  
So far I didn’t work with shaders (other then the default shader). I guess it will take me some time to understand the whole shader tutorial, but at least now I have a good reason for it. Could you maybe explain, why I need an extra shader/ why the default shader doesn’t work?

---

<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:** [June 30, 2021, 7:46am UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/5 "2021-06-30T07:46:30Z")

</div>

You should be able to use this without a shader. However if you want to add one later now you also know how.

---

<div class="post-metadata">

**Author:** ![heXYdi](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@heXYdi](https://discourse.processing.org/u/heXYdi)\
**Post date:** [June 30, 2021, 10:16am UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/6 "2021-06-30T10:16:10Z")

</div>

Great, thank you! I just don’t get how the sketch you posted can help me with my problem then, sorry! I see you declared PGraphics canvas, but I can’t see where you use it. In the code I posted I already have a version that doesn’t use PGraphics and showing texture is no problem in this case. The problem only comes when I use PGraphics.

---

<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:** [June 30, 2021, 10:28am UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/7 "2021-06-30T10:28:16Z")

</div>

> [@paulgoux](#):
>
> ```auto
> PShader shader;
> PGraphics canvas;
> PImage img;
> float []v = {0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0};
> void setup() {
> size(640, 360, P3D);
> img = loadImage("b1.jpg");
> shader = loadShader("shader.glsl");
> shader.set("mult",2.1);
> shader.set("type",1.0);
> shader.set("v",v);
> noStroke();
> };
> 
> void draw() {
> background(0);
> translate(width / 2, height / 2);
> rotateX(map(mouseY, 0, height, -PI, PI));
> rotateY(map(mouseX, 0, width, -PI, PI));
> rotateZ(PI/6);
> beginShape();
> texture(img);
> vertex(-100, -100, 0, 0, 0);
> vertex(100, -100, 0, img.width, 0);
> vertex(100, 100, 0, img.width, img.height);
> vertex(-100, 100, 0, 0, img.height);
> endShape();
> shader(shader);
> };
> 
> ```

Woops didn’t see your triangle was a PGraphics

```auto
PShader shader;
PGraphics canvas;
PImage img;
float []v = {0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0};
void setup() {
  size(640, 360, P3D);
  img = loadImage("b1.jpg");
  shader = loadShader("shader.glsl");
  shader.set("mult",2.1);
  shader.set("type",1.0);
  shader.set("v",v);
  noStroke();
  canvas = createGraphics(width,height,P3D);
};

void draw() {
  background(0);
  canvas.beginDraw();
  canvas.background(0);
  canvas.translate(width / 2, height / 2);
  canvas.rotateX(map(mouseY, 0, height, -PI, PI));
  canvas.rotateY(map(mouseX, 0, width, -PI, PI));
  canvas.rotateZ(PI/6);
  canvas.beginShape();
  canvas.texture(img);
  canvas.vertex(-100, -100, 0, 0, 0);
  canvas.vertex(100, -100, 0, img.width, 0);
  canvas.vertex(100, 100, 0, img.width, img.height);
  canvas.vertex(-100, 100, 0, 0, img.height);
  canvas.endShape();
  canvas.shader(shader);
  canvas.endDraw();
  image(canvas,0,0);
};

```

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [June 30, 2021, 2:04pm UTC](https://discourse.processing.org/t/using-texture-in-pgraphic/30967/8 "2021-06-30T14:04:43Z")

</div>

> [@heXYdi](#):
>
> ```auto
> //PGraphics:
> triangle = createGraphics(width,height);
> 
> ```

Try with `createGraphics(width, height, P2D);` for a start. Default `PGraphics` is `Java2D` which IIRC doesn’t support `texture()`.