Basic knowledge of

A simple mathematical system based on vector and matrix operation is set up to describe all geometric graph information

The coordinate system of HTML, Canvas and SVG is X-axis to the right and Y-axis to the bottom

WebGL is the center point as the origin and z-axis outward

HTML, SVG, and Canvas use transform for coordinate transformations

WebGL itself does not provide tranForm apis, but we can do matrix operations in shader to implement coordinate transformations

Points and line segments are represented by vectors

Vector V has two meanings:

  • First, it can represent a point at (x, y) in the coordinate system.
  • The other is a line segment that can represent a line from the origin (0,0) to the coordinates (x,y)

A vector contains length and direction information

v.length = function(){
  return Math.hypot(this.x, this.y)
};

v.dir = function() { 
  return Math.atan2(this.y, this.x);
}
Copy the code

Dot product, also called dot product. It turns out that the length of the projection of one vector in the direction of another vector, is a scalar. Cross product, also called cross product. So it’s going to be a vector that’s perpendicular to both of these vectors.

The dot product of vectors

Suppose we have two n-dimensional vectors A and b, a = [a1, a2…an], b = [b1, B2…bn], the dot product code of the vectors is as follows:

A •b = a1*b1 + a2*b2 +... + an*bnCopy the code

In N dimensional linear space, the dot product of a and b vectors is a vector times the projection component of b vector onto a vector

When a and b two vectors are parallel, they is 0 ° Angle, then a. b = | | | | * b

When a and B are perpendicular, the Angle between them is 90 degrees, so a dot b is equal to 0

The cross product of the vector

The result of a vector cross product is not a scalar, but a vector; Second, the cross product of the two vectors is perpendicular to the coordinate plane of the two vectors

You can tell by the right hand rule

The geometric meaning of the two-dimensional cross product is the area of the parallelogram formed by vectors A and B

I, j, and k are unit vectors of the x, y, and z axes respectively

a X b = [y1 * z2 - y2 * z1, - (x1 * z2 - x2 * z1), x1 * y2 - x2 * y1]
Copy the code

The normalized

So that’s just a unit vector

Normalization is taking the vector v0 and dividing it by its length or magnitude. The normalized vector has the same direction and length 1.

In vector multiplication, if a and b are normalized vector of length 1, is the result of the X | a | b a, b Angle sines, | | a, b is the result of the cosine value of the Angle between a and b.

exercises

Given a line segment [(x0, y0), (x1, y1)], and a point (x2, y2), how can we find the distance between the point and the line segment? A scanner is placed on a plane with an Angle of view of 60 degrees along the Y-axis (the coordinate system is y-up). Given that it can scan to infinity, how can we tell if any given point (x,y) on the plane is in the range of the scan?

In simple terms, we can take the cross product of the current target vector normalized with a unit vector of the Y-axis, and get the corresponding sine function to determine whether the Angle is in the scanning range

We cross the normalized vector a with v(0,1) on the scanner’s midline. Since the scanner is symmetric about the Y-axis, the Angle between the scanner’s edge and the Y-axis is plus or minus 30 degrees. So when you take the cross product with the unit vector, two things happen:

1. Points within the scope of scanning, such as vector a, must meet: | a | X v < = | | a | | v | sin (30 °) | = | sin (30 °) | = 0.5;

2. The point is beyond the scope of scanning, such as vector, b must satisfy: | | X b v > | | b | | v | sin (30 °) | | = sin (30 °) | = 0.5.

Therefore, as long as the absolute value of the cross product of the vector at any point with the unit vector is not greater than 0.5 (i.e., sin30°), the point is in the scanning range. So we can use the following code to determine:

const isInRange = Math.abs(new Vec2(0.1).cross(v0.normalize())) <= 0.5;
// v0.normalize() normalizes v0
Copy the code

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event