If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

# 4. Commutativity

We need to be careful with the order of scaling and translation. But why? First, we move an object 5 steps to the right and 3 steps up. Then, we make the object twice as big. But, if we first make the object big and then move it, we end up in a different place! This means the order of doing things matters. When the order doesn't matter, we call it "commutative". When the order does matter, we call it "non-commutative"..

## Want to join the conversation?

• According to Fran, the correct order in which you are supposed to transform without muddling things up is: Scale, Rotate, Translate. Correct? But in computer programming it works better in this order: Translate, Rotate, Scale. Why is this? Does it have to do with the fact that in computer programming, the translate function actually translates the Origin? Or am I misunderstanding something?
• Yes, it is horribly confusing, especially if you want to write a program in processing.js to explain the process in the video. You're right about the reason for the difference. In the CS environment, transformations work on the entire canvas, changing the coordinate system, whereas in the video and programs here, transformations work on individual elements (which I think is more intuitive).
• Modeling scaling is a vector/matrix operation here, then? That would explain the non-commutative behavior. Also, the objects are anchored at a corner instead of on center? That would also make the operations non-commutative, I think.
• Scaling can be done by multiplying by the matrix:
``sx   00   sy``

Or more often, if you want to translate, and so have a 3x3 matrix:
``sx   0   00   sy   00    0   1``

Scaling will always be non-commutative with translation. Imagine a point at (0, 0). Scaling by whatever value you like and it will stay and (0, 0). Then translate it by (x, y) and it will be at (x, y). If you translate it by (x, y), then scale it by (s, s), it will be at (sx, sy). (You can also compare multiplying the scaling matrix with the translate matrix in a different order).

If you go to one of the interactives in this tutorial, you can turn on the initial image to keep it a version anchored at (0, 0). Then you can click on that to select a point on it and follow how that point is transformed in the equations.
• i dont understand
• So than i said, "That's not a camel, that's my wife!"
• again, this is easier to deal with in blender and unreal
• so if i put them in a different order does that matter
• It explains in the video that scaling can go with scaling but not with translation.
Like with positive and negative!
(1 vote)
• The video is confusing, because at 27 seconds, when we "scale by a factor of 2", the bottom LHS of the square containing the ball suddenly moves from (5,3) to (10, 6). Not only is the ball scaled, but the translating vector is scaled as well. This is not made clear in the video.