 |
Author |
Topic: translate? (Read 494 times) |
|
hawk
|
translate?
« on: Oct 4th, 2003, 1:15am » |
|
At the risk of sounding completely retarded, I can't work out from the tutorials how and exactly what translate does. Also, I guess scale and rotate are related. How exactly do they work, what do they do, and are the changes made to the coordination system "permanent", so all later drawings will use these settings?
Keep in mind that I haven't done any matrix math or anything like that.
Thanks!
|
|
|
|
|
hawk
|
Re: translate?
« Reply #3 on: Oct 4th, 2003, 3:40pm » |
|
From what I gather, translate() is equal to moving the camera, or changing the center of our coordination system. I think it would be great if this would be more clear in the reference...just a tip.
|
|
|
|
|
fry
|
Re: translate?
« Reply #4 on: Oct 4th, 2003, 10:40pm » |
|
yeah, translate affects how objects are laid out.. it's a bit like moving the camera (the effect is almost the same) but not quite.
for instance:
translate(50, 50);
has the effect of moving the coordinate system, so that 0, 0 is now at 50, 50.
an example is for drawing a box:
box(20);
this is a bit unexciting, since the box itself is centered around 0, 0, so only the lower righthand corner of the box can be seen.
so to move the box to the center of the screen:
translate(50, 50);
box(20);
this draws a box in the center.
similarly, you could have the box follow the mouse:
void loop() {
background(255);
translate(mouseX, mouseY);
box(20);
}
(err, don't mind the artifacts on the single pixel lines, thems is just temporary bugs in the gfx engine)
in addition, you might want to rotate the box. rotateY will rotate around the y axis. think of a graph from math class, y is pointing up, x points to the right. which means the box will be rotated around the line that goes up:
void loop() {
background(255);
translate(mouseX, mouseY);
rotateY(TWO_PI * mouseX / float(width));
box(20);
}
here mouseX is divided by the width, which will be a number between 0
and 1, and then that's multiplied by TWO_PI, since rotating by TWO_PI
means all the way around. similar to how translate works, this has
rotated the y axis so that the 'zero' point gets twisted around.
to add another box that orbits around the first, this would do the
trick, by using another translate:
void loop() {
background(255);
translate(mouseX, mouseY);
rotateY(TWO_PI * mouseX / float(width));
box(20);
translate(35, 0);
box(15);
}
all the transformations like translate/rotate/etc build on one
another, so if you didn't want the second box to orbit the first
(meaning that it shouldn't be affected by the first translate and
rotate) then you use push() and pop().
void loop() {
background(255);
push(); // save coordinate system
translate(mouseX, mouseY);
rotateY(TWO_PI * mouseX / float(width));
box(20);
pop(); // restore the old coordinate system
translate(35, 0);
box(15);
}
push saves the current way things are transformed. pop restores the way things were before the push.
push and pop us a 'stack' which just means that several can be saved and restored so that you can build hierarchic things. for instance, think of drawing an arm--you'd start with the shoulder, then do a push and a translate and rotate to draw parts of the arm, then a push and translate and rotate for the elbow, then a push and translate for the lower arm, etc.
the reason you'd do this is so that if you changed the rotate at the
shoulder, everything that follows it would be updated too--so the
whole arm would be moved along with it.
under such a scenario, push and pop would be embedded inside one
another.
draw_shoulder()
rotate() // amount of rotation for shoulder (how the arm is raised)
push()
translate()
draw_arm()
translate()
push()
draw_elbow()
rotate(); // amount of rotation for elbow
push();
.. etc
pop(); // undo the changes
pop();
pop();
it can be confusing stuff, and you'll prolly need to play with it a while before it starts making sense. the syntax is taken from OpenGL, a commonly used 3D rendering library.
another method is to use amit's BSpace object, which allows you to transform objects themselves which can often be more intuitive. a search on the board will give you a link for that one.
|
|
|
|
|
|
