Strange behavior of Texture when transforming shape

lubimaer

Hi,

(I'm pretty new to this "Fantastic" tool so please forgive if I'm just doing something obviously wrong)

I'm trying to transform a picture interactively using mouse control.

I've created some code (pasted at the end here) and all seems working fine other than the expected behavior of applied texture to shape.

If you try extending a corner of the shape (dragging any corner) the texture is transformed only in the triangle formed by the dragged corner and the two adjacent corners.

I'm attaching here 2 pictures showing the behavior for clarity

Here's my code

class Quadro {
  float [][] vertices;
  int i;
  int indexActive = -1;
  PImage img;

  Quadro () {
    vertices = new float[2][4];
  }

  void setSize() {
    vertices[0][0] = width * 3 / 12;
    vertices[1][0] = height * 3 / 12;

    vertices[0][1] = width * 9 / 12;
    vertices[1][1] = height * 3 / 12;

    vertices[0][2] = width * 9 / 12;
    vertices[1][2] = height * 9 / 12;

    vertices[0][3] = width * 3 / 12;
    vertices[1][3] = height * 9 / 12;
  }

  void checkActiveVetices() {
    float oldDistance = 100000000;
    float distance;

    for (i = 0; i < 4; i++) {
      distance = dist(mouseX, mouseY, vertices[0][i], vertices[1][i]); 
      if (distance < oldDistance) {
        indexActive = i;
        oldDistance = distance;
      }
    }
  }

  void setActiveVertice() {
    vertices[0][indexActive] = mouseX;
    vertices[1][indexActive] = mouseY;
  }

  void setTexture(PImage i) {
    img = i;
  }

  void paint() {
    background(128, 255, 0);
    fill(255);
    noStroke();
    beginShape();
    textureMode(NORMAL);
    texture(img);
    vertex(vertices[0][0], vertices[1][0], 0, 0);
    vertex(vertices[0][1], vertices[1][1], 1, 0);
    vertex(vertices[0][2], vertices[1][2], 1, 1);
    vertex(vertices[0][3], vertices[1][3], 0, 1);
    endShape();

    if ( indexActive >= 0) {
      ellipse(vertices[0][indexActive], vertices[1][indexActive], 10, 10);
    }
    fill(255);
  }
}


// define global variables
Quadro q = new Quadro();
PImage img;

void setup() {
  size(900, 500, P3D);
  q.setTexture(loadImage("PleaseAddYourImageHere.JPG")); 
  q.setSize();
  q.paint();
}

void draw() {
  q.checkActiveVetices();
  if (mousePressed && (mouseButton == LEFT)) {
    q.setActiveVertice();
  }

  q.paint();
}

How can I transform the picture in a more expected proportional mode?

Thanks, Marco

koogs

Know problem. Search for affine texturing.

Breaking the shape up into more pieces is the usual solution.

lubimaer

Hi koogs,

I see

Thanks, Marco