Using texture in PGraphic

Processing Coding Questions
1

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
Gold1300×866 321 KB 

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);
*/      
}
2

simple texture sketch just add your own shader file.

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);
};
3

Hello,

Welcome.

Please format your code:
FAQ - Processing Foundation - Format your Code

:)

4

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?

5

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

6

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.

7

Woops didn’t see your triangle was a PGraphics

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);
};
8

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