Not getting RotateY

Programming Questions

graemehood

in Programming Questions • 8 months ago

Totally new to Procesing.

I am trying to get an image rotated on the y axis next to an image rotated with the same negative degrees. So the left hand image diminishes in perspective on its right hand edge and the right hand image diminishes on its left hand edge.

I have sort of managed it through trial and error but can't figure out the relationships between the canvas size, rotation, transform and image size. Here's what I have:

PImage img;
void setup () {
img = loadImage ("MyImage.jpg"); // 40x40
size (1000, 500, P3D);
}
void draw () {
// draw the left image rotated
pushMatrix();
rotateY(1);
image(img, 80, 50);
popMatrix();
// draw the same image rotated the other way
rotateY(radians(-26));
translate(150, 120);
image (img, 350, 80, 125, 100);
}

I'd be grateful if there's an easier way or if someone can explain all the moving parts for the right hand image.
Thanks

Replies(5)

asimes

Re: Not getting RotateY

8 months ago

Hopefully this helps make sense, I left comments. I don't have your image so I used rect():

float count = 0;
//PImage img;
void setup () {
size(300, 300, P3D); // This always goes first
//img = loadImage ("MyImage.jpg"); // 40x40
}
void draw () {
background(128);
pushMatrix();
translate(80, 50); // Move the coordinate system to the top left of the rect()
rotateY(count); // Rotate
rect(0, 0, 40, 40);
//image(img, 80, 50);
popMatrix(); // Reset the coordainte system
translate(150, 120);
rotateY(-count); // Rotate the other way
rect(0, 0, 40, 40);
//image (img, 350, 80, 125, 100);
count += TWO_PI/500;
}

graemehood

Re: Not getting RotateY

8 months ago

Thanks for the repoy. I don't need my images to rotate though, just to be the same size, to be on the same y-coordinate and to be angled in opposite directions. I've changed your code to try this, but still don't understand how to get the second shape positioned and sized correctly other than through trial and error:

float count = 0;
void setup () {
size(300, 300, P3D); // This always goes first
count += 50 * TWO_PI/500; // approximately the angle I need
}
void draw () {
background(128);
pushMatrix();
translate(80, 50); // Move the coordinate system to the top left of the rect()
rotateY(count); // Rotate
rect(0, 0, 40, 40);
popMatrix(); // Reset the coordainte system

translate(120, 50);
rotateY(-count); // Rotate the other way
rect(0, 0, 40, 40);
}

asimes

Re: Not getting RotateY

8 months ago

You should look at this tutorial on transformations in Processing: http://processing.org/learning/transform2d/

Also, I'm guessing from this line:

count += 50 * TWO_PI/500;

That you are not familiar with radians. Rotations are done in radians in Processing. This tutorial explains them if you want to learn it: http://processing.org/learning/trig/

Otherwise do your rotations in degrees then add this to convert it to radians: http://processing.org/reference/radians_.html

I think this is what you wanted:

float theta = 0;
void setup () {
size(300, 300, P3D);
theta = 50*TWO_PI/500;
}
void draw () {
background(128);
pushMatrix();
translate(80, 50); // Move Coordinate System from (0, 0) to (80, 50)
rotateY(theta); // Rotate the Coordinate System there
rect(0, 0, 40, 40);
popMatrix(); // Reset Coordinate System
/* Move Coordinate System from (0, 0) to the mirror of the last translate
This is most easily done relative to the width of the screen */
translate(width-80, 50);
/* Rotate in the opposite direction but also add PI
PI is the equivalent of 180 degrees if you are not familiar */
rotateY(-theta+PI);
rect(0, 0, 40, 40);
}

graemehood

Re: Not getting RotateY

8 months ago

That works. I guess it is my understanding of translate and radians. I'll swot up on them tonight! Thanks for the help.

graemehood

Re: Not getting RotateY

8 months ago

Oops, not as perfect as I thought now that I've tried it with an image. The above flips the image, so all text is a backwards. I want the image to stay the face up, but the left hand edge should be the shorter (furthest away).

I've got it looking fine but back to random numbers:

float theta = 0;
PImage img;
void setup () {
size(1000, 500, P3D);
theta = TWO_PI/10;
img = loadImage ("BobMarleyFront.jpg");
}
void draw () {
background(128);
pushMatrix();
translate(50, 50);
rotateY(theta+TWO_PI);
image(img, 50, 50);
popMatrix();
// got this through trial and error to make right image same size
// and roughly where I want it - pretty random though
translate(width-450, 50, -300);
rotateY(-theta);
image(img, 50, 50);
}

here is the effect I want:

here is the image: