Is there any easy way to use text as a texture on a box?

DangerousNub

Can I use text as a texture on a box? I want it so, that the text can be updated every frame. Is it even possible?

koogs

write to a PGraphics off-screen buffer using text. use that as your texture.

DangerousNub

I'm a newbie here... How do I do that?

TfGuy44

First you will need a PGraphics object to work with.

PGraphics pg;

Then you will need to create it.

pg = creategraphics(300,300,P2D);

Now draw something on it. Don't forget to use beginDraw() and endDraw()!

pg.beginDraw();
pg.background(0);
pg.textAlign(CENTER);
pg.fill(255);
pg.text("A", 150,150);
pg.endDraw();

Now you just need to use what you just drew as a texture.

texture( pg.get() );

Then draw your 3D cube like normal, specifying the texture coordinated in your calls to vertex().

All of the above can be explained by looking things up in the reference.

TfGuy44

Working demo:

PGraphics pg;
PImage txt;

void setup(){
  size(400,400,P3D);
  pg = createGraphics(300,300,P2D);
}

void draw() {
  pg.beginDraw();
  pg.background(0);
  pg.textAlign(CENTER);
  pg.fill(255);
  pg.textSize(128);
  int f = millis() / 1000;
  pg.text("" + f, 150, 180);
  pg.endDraw();

  txt = pg.get();

  background(128);
  //image( txt, 0,0 );
  translate(200, 200);
  rotateY(map(mouseX, 0, width, -PI, PI));
  noFill();
  stroke(0,255,0);
  beginShape();
  texture( txt );
  vertex(-100, -100, 100, 0, 0);
  vertex(100, -100,  100, 300, 0);
  vertex(100, 100,  100, 300, 300);
  vertex(-100, 100,  100, 0, 300);
  vertex(-100, -100, 100, 0, 0);
  endShape();
}

Make sure you understand how this works before asking for additional features! Look up any keywords or functions you do not understand in the Reference!

DangerousNub

Woah! That's complicating! But thanks anyways!

jeremydouglass

Also see more on how vertex works here: https://processing.org/reference/vertex_.html

You can make the code in draw less complicated by putting the code (for making images and surfaces and assembling them into a cube) into their own functions. By moving the code from @TfGuy's example around, I'm able to extend it into a cube without repeating everything six times -- plus now it can be used to put different text on different cubes, or to put text on other shapes, etc.

PGraphics pg;
PImage txtImg;

void setup(){
  size(400,400,P3D);
  pg = createGraphics(300,300,P2D);
}

void draw() { 
  background(128);

  // center and rotate draw coordinates
  translate(200, 200);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateZ(map(mouseY, 0, height, 0, TWO_PI));

  // draw cube
  pushStyle();
    noFill();
    stroke(0,255,0);
    // make an image with clock text
    String s = "" + millis() / 1000;
    txtImg = textImager(s, pg);
    // draw the image on a cube
    textureCube(txtImg);
  popStyle();
}

// 
PImage textImager(String s, PGraphics pg) {
  pg.beginDraw();
  pg.background(0);
  pg.textAlign(CENTER);
  pg.fill(255);
  pg.textSize(128);
  pg.text(s, 150, 180);
  pg.endDraw();
  return pg.get();
}

void textureCube(PImage img) {
  // draw six faces
  textureFace(img, 0, 0, 0);
  textureFace(img, 0,-HALF_PI, 0);
  textureFace(img, 0, HALF_PI, 0);
  textureFace(img, 0, PI, 0);
  textureFace(img, -HALF_PI, 0, 0);
  textureFace(img,  HALF_PI, 0, 0);
}


void textureFace(PImage img, float rx, float ry, float rz){
  // rotate then draw a face
  pushMatrix();
    rotateX(rx);
    rotateY(ry);
    rotateZ(rz);
    beginShape();
      texture( img );
      vertex(-100, -100,  100, 0, 0);
      vertex( 100, -100,  100, 300, 0);
      vertex( 100,  100,  100, 300, 300);
      vertex(-100,  100,  100, 0, 300);
      vertex(-100, -100,  100, 0, 0);
    endShape();
  popMatrix();
}