WebGL Lesson 17: Stretching in Cartesian Coordinates | August challengesCopy the code

primers

When we do graphics, we often have this need to stretch an object, and this can be divided into three directions. The x, y and Z directions can be drawn independently.

That’s no problem. So the question is, how do we stretch? What exactly is the nature of stretching?

Stretching is a bad word

The reason why stretching is a bad term is because it’s too businesslike. So what are we doing? Let’s take an example of stretching in the x direction:

Let’s just think about the two dimensional case, where we only have the x and y axes.

We’re going to draw a hundred points, in other words, we’ve prepared the coordinates of a hundred points in advance, and we’re going to stretch in the x direction, and the stretch coefficient is two.

This means: all point coordinates, the inside of the x to double the original.

If you think about the effect, if you have a hundred points all around the origin, not too much of a bias, then you’re going to end up with the stretching effect that you would expect;

But if all of these 100 points are on one side of the origin, or if all of them are in one quadrant, then you might end up with, oddly enough, something that doesn’t stretch the way you would expect.

Look at this:

All the points of the square we pass into WebGL are in the first quadrant, and when we stretch in the x direction, in addition to a stretching effect, we have another illusion: the whole square is moving to the right, which is obviously not the stretching effect we thought it would be.

So when we talk about stretching, let’s think about the computational process:

That is, the coordinates of some axis, multiplied by a coefficient, that’s all.

I’m going to multiply it by vector numbersThe tensile

This, too, is simple:


( 1 2 ) ∗ 2 = ( 2 4 ) \left(\begin{array}{cc} 1\\ 2\end{array}\right) * 2 = \left(\begin{array}{cc} 2\\ 4\end{array}\right)

So this thing up here, this is saying, for a point (1, 2), the x-coordinate and the y-coordinate are both doubled, and you get the point (2, 4).

So here’s the question, if I just want to stretch in one direction, can I multiply it by vector numbers?

The answer is no.

A real stretch, you have to take a linear combination of vectors, so you multiply a matrix times a vector. If you don’t understand this, go back to the previous lecture and look at the relationship between linear combinations of vectors and matrices.

How to write the matrix, I’ll talk about it later in the course, but I won’t talk about it here.

A practical example

Xiao mingjia A(1,2) point school B(5,6) point xiaogang said, xiao Ming, my home is just on the line between your home and the school, the distance from my home to your home is just twice the distance from my home to the school.

Excuse me, can the coordinates of Xiaogang’s house be calculated?

Answer: (x)\left(\begin{array}{cc} x\\ y\end{array}\right)(x)\left(\begin{array}{cc} x\\ y\end{array}\right)(x)\left(\begin{array}{cc} x\\ y\end{array}\right)(x)\left(\begin{array}{cc} x\\ y\end{array}\right) (x – 1-2) y \ left (\ begin {array} {cc} \ \ y x – 1-2 {array} \ \ end right) y (x – 1-2) xiao gang to the displacement of the school work out: (5 – x6 – y) \ left (\ begin {array} {cc} \ \ 6-5 – x y {array} \ \ end right) (5 – x6 – y)

According to Xiao Gang:


( 5 – x 6 – y ) ∗ 2 = ( x – 1 y – 2 ) \left(\begin{array}{cc} 5-x\\ 6-y\end{array}\right) * 2 = \left(\begin{array}{cc} x-1\\ y-2\end{array}\right)

In elementary school, the solution of this system is: x = 113\frac{11}{3}311 y = 143\frac{14}{3}314

The diagram below:

At the end of the text, questions are answeredCopy the code
Why is it that in our game engine, stretching is what we think of stretching?

  • A: Because the coordinates of the points in the model given by the modeler are basically not too skewed, they are almost uniformly around the origin.