› › ›

JPG for a Texture Produces Just a White Box

terrydolleterrydolle
edited October 2014 in How To...

I've been thru all the Examples of using an image to apply a texture to a shape. They all work fine.

Note: I'm having trouble understanding the parameters of the vertex() when textures are to be applied.

I feel I am doing everything correctly but when I run the program my shape is filled with white, not the jpg. If someone sees something I'm doing wrong I would be most grateful.

PShape bw; 
PImage text4; // 

void setup () {
  size (1200, 1200, P2D);
  text4=loadImage("800x800bgd.jpg");
}

void draw() {
  background (0); 
  translate (width/2, height/2);
  makeText();
  shape(bw);
}

void makeText() {
  bw = createShape();
  bw.beginShape();
  textureMode(IMAGE);
  texture(text4);
  bw.vertex(-400, -400, 0, -400, -400); // last 2 parameters are used for coords for texture mapping
  bw.vertex(400, -400, 0, 400, -400);
  bw.vertex(400, 400, 0, 400, 400);
  bw.vertex(-400, 400, 0, 400, 400);

  bw.endShape();
}
Tagged:

Best Answers

Answers

  • amnonamnon
    Answer ✓

    First, when posting code on the forum please a) in Processing use CTRL + T to autoformat it and b) on the forum paste it, select it and press CTRL + K to format it as code. I have fixed this for you this time.

    Second, there are many things wrong with your code. To name a few:

    • You call texture() without using the PShape's dot syntax: bw.texture(text4);
    • You use incorrect texture coordinates. When using textureMode(IMAGE), you can use the pixel coordinates of the image, which can't be negative. Just look at the reference: http://www.processing.org/reference/textureMode_.html
    • You create the PShape on every draw(), 60 times per second, where you should instead do it only ONCE inside setup().
    • Setting the z parameter is unneeded, since this is 2D.

    If you fix these things you will have better results. Again as a general remark, it is often wise to look at the reference to see how to use methods: http://www.processing.org/reference/

    Good luck! :-)

  • terrydolleterrydolle

    amnon, thanks so much for your help! I will always use Ctrl+T and CTRL+K in the future.

    In this small example I made a typo in the size statement, I do indeed need 3D and I should have used P3D instead of P2D.

    This code represents part of a large project I am starting.

    I will need to include this code in draw() because I will have animations going on in front of the shape so the shape will have to be redrawn with each frame.

    I have experimented with different parameters for the texture coordinates. I have it working but it is still not crystal clear how the mapping works.

    Here is my real problem and perhaps you can point me in the right direction in order to produce the correct texture coords:

    For my main project I'll be producing a 'background' for my sketch which will appear as if someone is looking straight into a room.

    To create this 'background' I have to create 5 shapes: a rectangle in the center of the screen representing the back wall (hence the Z coord).

    The other 4 shapes will be polygons, again in 3D, representing the 2 side walls, the ceiling and the floor.

    Creating these shapes is straight forward.

    But: I want to use one jpg as a texture to be mapped all across my 'background.'

    I hope this makes sense and that you have ideas as to how I calculate the texture coords for each individual shape and how I can apply the texture across all 5 shapes.

    As an aside, how on earth do I calculate texture coords if I have a 7-sided shape? I've been through all the docs and examples and unfortunately this is still not clear to me.

    Thanks again for your help amnon, I sure appreciate it!

  • amnonamnon

    I will need to include this code in draw() because I will have animations going on in front of the shape so the shape will have to be redrawn with each frame.

    No. Apparantly many beginners miss the whole point of retained mode. There is a difference between creating the shape and displaying it. You create it ONCE, then you can display it as much as you need to, from every angle you want. So you don't repeat the creation over and over. But indeed you do display it on every draw. In short, makeText() should be moved to setup() and shape(bw); can remain in draw().

    With regard to your 'real problem' I think you have two viable options:

    1. Let each polygon have it's own texture. Optionally you can put all of these inside a single texture, but there is not much benefit.
    2. Really make this 3D and use an all around solution such as a cubemap.

    Regardless of this, you should understand uv-coordinates. It's pretty simple, either normalized (0 to 1) or in actual pixel coordinates (0 to the image's width or height).

  • terrydolleterrydolle
    edited October 2014

    Thanks again Amnon!

    For the past hour or so I have been researching your work. Thanks for the 25 Life-Saving Tips you published, most helpful. I hope to get involved with slit processing (I have been doing photography for about 6 years now). GLSL is high on my list to learn, but that's in the future (it will have to be shape dependent).

    My drawings will end up being complex...should I switch to rendering with OPENGL instead of P3D? I see mixed suggestions on this topic.

    OK, so back to my problem. It makes perfect sense to create my shapes in setup() and then create them in draw(). Good.

    For the u-v coords it appears that the simplest approach is to use NORMALIZED, then I just use 0's and 1's.

    For the actual textures I'm not sure if using a separate texture for each polygon will work...my jpg has to map/flow across all the shapes.

    I'll investigate cubemap. It looks pretty involved...

    I really appreciate your help!

  • amnonamnon
    Answer ✓

    In Processing 2.0+ both P2D and P3D are OPENGL renderers.

    Good luck.

  • GoToLoopGoToLoop
    Answer ✓

    Use println(isGL()); in order to make sure whether current renderer is indeed OpenGL based! *-:)

Sign In or Register to comment.