Vertex grid with image texture

thunderball

Hi all, I'm trying to make a grid of vertices with one image texture. Once I have the image mapped correctly, I am planning on manipulating the individual vertices to create cool effects.

I am having trouble mapping the image, see my code below:

image used http://i.imgur.com/XGx2X7e.jpg

int detail = 50;
PImage img;
int gridx;
int gridy;

void setup() {
  size(720, 427, P3D);
  img = loadImage("car.jpg");
  //textureMode(NORMAL);
  stroke(0);
  gridx = (width/detail);
  gridy = (height/detail);
}

void draw() {

  for (int j = 0; j < gridy; j ++) {
    beginShape(QUAD_STRIP);
    texture(img);
    for (int i = 0; i < gridx; i++) {
      float u = width/gridx*i; // not sure what to do here
      println(u);
      vertex( i * detail, j * detail, u, 0 );
      vertex( i * detail, (j+1) * detail, u, img.height );
    }
    endShape();
  }
}

Chrisir

I don't understand

shall the image cover the entire grid or one image per cell?

what happens now with the sketch and what do you want it to happen?

Chrisir

// image used i.imgur.com/XGx2X7e.jpg

int detail = 50;
PImage img;
int gridx;
int gridy;

void setup() {
  size(720, 427, P3D);
  img = loadImage("http://" + "i.imgur.com/XGx2X7e.jpg"); // "car.jpg");
  img.resize(detail, detail); 
  //textureMode(NORMAL);
  stroke(0);
  gridx = (width/detail);
  gridy = (height/detail);
}

void draw() {

  background(0); 

  if (keyPressed) 
    image(img, 0, 0); 
  else
  {


    for (int j = 0; j < gridy; j ++) {

      for (int i = 0; i < gridx; i++) {

        beginShape();//
        texture(img);

        // left upper corner 
        vertex( i * detail, j * detail, 0, 0 );

        // right upper coner 
        vertex( (i+1) * detail, j * detail, 50, 0 );

        // right lower corner 
        vertex( (i+1) * detail, (j+1)  * detail, 50, 50 );

        // left lower corner
        vertex( i * detail, (j+1) * detail, 0, 50 );

        endShape(CLOSE);
      }
    }
  }//else
}

Chrisir

look here:

https://www.processing.org/reference/vertex_.html

koogs

your u calculation was right, but you were using the full height of the texture for each row, hence the repetition.

a QUAD_STRIP expects vertices in this order

STRIP 1
00--10--20--30--40
|   |   |   |   |
01--11--21--31--41

STRIP2
01--11--21--31--41
|   |   |   |   |
02--12--22--32--42
etc

so the code needs to be something like this:

void draw() {
  for (int j = 0; j < gridy; j ++) {
    float v0 = height / gridy * j;
    float v1 = height / gridy * (j + 1);
    beginShape(QUAD_STRIP);
    texture(img);
    for (int i = 0; i < gridx; i++) {
      float u = width / gridx * i;
      vertex(i * detail, j * detail, u, v0);
      vertex(i * detail, (j + 1) * detail, u, v1);
    }
    endShape();
  }
}

thunderball

Thanks Chrisir and koogs. Chrisir: I was looking to map one image to the whole grid -- the way koogs' has it. That diagram is also helpful.

A follow up question: I'm trying to figure out how to make this like a terrain style grid. I have implemented some random numbers to transform the vertex positions, but they don't seem to line up properly.

It's much easier to see when you do noLoop()

float rand;
void draw() {
  background(255);
  for (int j = 0; j < gridy; j ++) {
    float v0 = height / gridy * j;
    float v1 = height / gridy * (j + 1);
    beginShape(QUAD_STRIP);
    texture(img);
    for (int i = 0; i < gridx; i++) {
      rand = random(-10, 10);
      float u = width / gridx * i;
      vertex(i * detail + rand, j * detail + rand, u, v0);
      vertex(i * detail + rand, (j + 1) * detail + rand, u, v1);
    }
    endShape();
  }
}

koogs

That's because the random value for the bottom of one strip needs to be the same as the top of the next, but you're adding random numbers to them.

Try using noise () instead. Or generate ask the numbers first, store them in an array, creat your grid from these.

thunderball

Good call - thanks