Dot & Cross Product 2D Visualization

This tiny application demonstrates visually the results of the two-dimensional dot product and cross product.

The products are calculated by two vectors that are given by the three red points. Vector v_{1} is defined as the vector that starts from point 1 and ends at point 2. Vector v_{2} is defined as the vector that starts from point 1 and ends at point 3.

Note that the red points can be moved by clicking and dragging them - the results of the products are instantly updated.

The dot product of vectors v_{1} and v_{2} is defined as v_{1}.x * v_{2}.x + v_{1}.y * v_{2}.y .

- If the two vectors are orthogonal, then the dot product is zero.
- If two vectors face the same direction, the dot product is the product of the length of the vectors.
- The dot product can also be defined as v
_{1}.x * v_{2}.x + v_{1}.y * v_{2}.y = len(v_{1}) * len(v_{2}) * cos α where α is the angle between the two vectors.

For further information of the dot product, see also my article Derivation of the two-dimensional dot product.

The cross product of vectors v_{1} and v_{2} is defined as v_{1}.x * v_{2}.y - v_{1}.y * v_{2}.x .

- If the two vectors are orthogonal, then the dot product is equal to the area of the rectangle that both vectors form.
- If two vectors face the same direction, the cross product is zero.
- In general, the cross product is equal to the area of the parallelogram that both vectors form.
- The cross product can also be defined as v
_{1}.x * v_{2}.y - v_{1}.y * v_{2}.x = len(v_{1}) * len(v_{2}) * sin α where α is the angle between the two vectors.

Hope you liked it!

Sunshine2k, August 2k17

2017/08/25: Initial release.