Why doesn't the shape rotate 45 degrees?

applepie

Why doesn't the wood paneled square rotate by 45 degrees instead of nothing showing up when the sketch is run? I understand that objects need to be translated to the origin in order to be rotated about their centers. Is that correct?

void setup()
{
  size(400,400,P2D);
  stroke(0);
  line(width/2,0,width/2,height);
  line(0,height/2,width,height/2);

  noStroke();
  drawSquare(width/2,height/2,100,"wood1.jpg",1000);
}

void drawSquare(float centerX, 
                float centerY,  
                float squareSize, 
                String textureName, 
                float textureSize) {
  PImage img = loadImage(textureName);
  PShape s = createShape();
  s.beginShape();
  s.texture(img);

  s.vertex(centerX-squareSize/2, centerY-squareSize/2, 0, 0);
  s.vertex(centerX+squareSize/2, centerY-squareSize/2, textureSize, 0);
  s.vertex(centerX+squareSize/2, centerY+squareSize/2, textureSize, textureSize);
  s.vertex(centerX-squareSize/2, centerY+squareSize/2, 0, textureSize);
  s.endShape();
  s.translate(-centerX,-centerY);
  s.rotate(radians(45));
  s.translate(centerX,centerY);
  shape(s);
}

GoToLoop

http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

PhiLho

I admit I am often confused by the transformations to apply.
One rule I follow: draw the object at the origin, don't use coordinates with translate(), as they add up in unexpected ways...
It is also simpler to use the global transformations instead of applying them to the shape. Not sure if that's what you want.

Anyway, this works:

  s.beginShape();
  s.texture(img);

  s.vertex(-squareSize/2, -squareSize/2, 0, 0);
  s.vertex(+squareSize/2, -squareSize/2, textureSize, 0);
  s.vertex(+squareSize/2, +squareSize/2, textureSize, textureSize);
  s.vertex(-squareSize/2, +squareSize/2, 0, textureSize);
  s.endShape();
  translate(squareSize/2,squareSize/2);
  rotate(radians(45));
  translate(centerX,0);
  shape(s);

But I don't know why I have to nullify centerY in the second translate call!

PhiLho

Actually, the translate calls must be inverted. This is better (perhaps):

  s.vertex(0, 0, 0, 0);
  s.vertex(squareSize, 0, textureSize, 0);
  s.vertex(squareSize, squareSize, textureSize, textureSize);
  s.vertex(0, squareSize, 0, textureSize);
  s.endShape();
  translate(centerX, centerY);
  rotate(radians(45));
  translate(-squareSize/2, -squareSize/2);
  shape(s);

And now, you can restore the s. prefix:

  s.translate(centerX, centerY);
  s.rotate(radians(45));
  s.translate(-squareSize/2, -squareSize/2);

So you don't need to do the transformation on each shape() call.

PhiLho

I finally got it right:

PShape s;

void setup()
{
  size(400,400,P2D);
  createSquare(width/2,height/2,100,"SomeImage.png",1000);
}

void createSquare(float centerX, 
                float centerY,  
                float squareSize, 
                String textureName, 
                float textureSize) {
  PImage img = loadImage(textureName);
  s = createShape();
  s.beginShape();
  s.texture(img);

  s.rotate(radians(45));
  s.translate(-squareSize/2, -squareSize/2);

  s.vertex(0, 0, 0, 0);
  s.vertex(squareSize, 0, textureSize, 0);
  s.vertex(squareSize, squareSize, textureSize, textureSize);
  s.vertex(0, squareSize, 0, textureSize);

  s.endShape();
}

void draw()
{
  background(255);
  stroke(0);
  line(width/2,0,width/2,height);
  line(0,height/2,width,height/2);
  noStroke();

//  translate(centerX, centerY);
  translate(mouseX, mouseY);
  shape(s);
}

This is logical, finally... But it is always a bit tricky to get right.