How do I texture map something other than an image ?

GreenTea

I have this assignment due tomorrow and I'm the only one using processing. basically we created this star shape, and the instructor wants us to texture map it with a chessboard that we draw. I only figured out how to texture using an image. I have the chessboard, I just need to be able to texture the chessboard I drew into the star. (ignore the translation, we weren't allowed to use translate functions so I did this). TL;DR right now the texture is of an image I have. but how do I make the function chessboard be somehow the texture of the shape I created ?

int tY = 100;
int tX = 100;
int WIDTH = 500;
int HEIGHT = 500;
int BLOCKX = WIDTH / 8;
final int BLOCKY = HEIGHT / 8;

void setup(){
  size(500,500,P2D);
 }

void draw(){
  background(150);
  PImage img = loadImage("chess.png");
  beginShape();
  texture(img);

  vertex(tX+150,tY    , 250, 100); //1
  vertex(tX+100,tY+100, 200, 200); //2
  vertex(tX    ,tY+100, 100, 200); //3
  vertex(tX+75 ,tY+175, 175, 275); //4
  vertex(tX+50 ,tY+275, 150, 375); //5
  vertex(tX+150,tY+200, 250, 300); //6
  vertex(tX+250,tY+275, 350, 375); //7
  vertex(tX+225,tY+175, 325, 275); //8
  vertex(tX+300,tY+100, 400, 200); //9
  vertex(tX+200,tY+100, 300, 200); //10
  vertex(tX+150,tY    , 250, 100); //11
  endShape();
}

void keyPressed(){
   if (keyCode == RIGHT)
  tX+= 10;
  if (keyCode == LEFT)
  tX+= -10;
  if (keyCode == UP)
  tY+= -10;
  if (keyCode == DOWN)
  tY+= 10;

}

void chessboard(){
    for (int i = 0; i < 8; i ++) {
    for (int j = 0; j < 8; j ++) {
       if ((i + j + 1) % 2 == 0) {
        fill(255, 255, 255); 
      } else {
        fill(0, 0, 0); 
      }
      rect(i * BLOCKX, j * BLOCKY, (i + 1) * BLOCKX, (j + 1) * BLOCKY);     
    } 
  }

}

jeremydouglass

@GreenTea --

1. Create an image buffer PGraphics chessimage https://processing.org/reference/PGraphics.html
2. Currently your chessboard() function draws to the screen with rect(). Instead, draw into the buffer with chessimage.rect(). You could hardcode this or pass your PGraphics as an argument to your chessboard function: void chessboard(PGraphics pg){ ... pg.rect()
3. Now you have an image of your chessboard. Use it in your shape with beginShape(); texture(chessimage); https://processing.org/reference/texture_.html

An alternate approach that does not use texture is to draw your shape into an image and then use image masking. For an example of masking, see:

• https://forum.processing.org/two/discussion/18819/how-to-copy-a-triangle-out-of-an-image

GreenTea

@Jeremydouglass Yaaaay it worked. and I learned about PGraphics. thank you, Jeremy !

jeremydouglass

Glad to hear it was helpful, @GreenTea. Good luck with your assignment.