2D Vector
Dot Product
Site Map Feedback

Dot Product:

Red Length relative to green =

Blue Dot Green
(Length of Green) squared
= 0
Up gCoord Points Vectors PV Planes

This is an introduction to the 2D Vector Dot Product using javascript and an HTML5 canvas element, so you can view the source for this page and see how everything is done.
This browser doesn't support the canvas element :-(  

Drag the blue hand around the clock and see how the Dot Product changes.
The Dot Product scalar value is related to the length of the Red Line.
When the hands are pointing in the same direction, the Dot Product is one.
When the hands are pointing in opposite directions, the Dot Product is minus one.
When the hands are at 90° the Dot Product is zero.

The purple line is the projection of the end of the blue line onto the green line (calculated using the Dot Product).
Drag the blue line around and watch the red line:
When the dot product is zero, the red line's length is zero and the blue and green lines are perpendicular.
When the dot product is one, the red line's length is one times the length of the green line, in the same direction as the green vector.
When the dot product is minus one, the red line's length is one times the length of the green line, in the opposite direction to the green vector.

Drag the green hand around and you'll see the background follow it.
The background is shaded to indicate the value of the dot product of the Unit Vectors, varying from white at the top, through gold to black at the bottom. The white at the top represents +1 and the black at the bottom represents -1.
If your browser is running slowly, you can turn off the background here:

When you first open this page, the clock hands are both the same length (one) to show the simplest Dot Product using Unit Vectors.
Un-check this check-box be able to drag different length vectors:

Now the red line can get longer than the green line giving Dot Product values greater than one or less than minus one.

You'll notice that the mouse controls the hand that is closest to it when you put the mouse-button down. The code finds the closest hand using the Dot Product to measure how far away the closest point on each line is.

If you have to manipulate lines in any way, the Dot Product is the first thing to try using because it is very easy to calculate. Computers are relatively slow at calculating trigonometric functions. Calculating line length requires a square-root call which is also slow. This can sometimes be avoided if the calculations are ordered carefully.

The dot product is the sum of products of the vector elements, so for two 2D vectors v1=(dx1,dy1) and v2=(dx2,dy2) the Dot Product is:
Dot(v1,v2)=(dx1*dx2)+(dy1*dy2)

If the two vectors are both Unit Vectors (length=1) then the Dot Product will vary from -1 to +1 inclusive (written [-1,1]).

If you're more used to Trigonometry, the Dot Product is the lengths of the two vectors multiplied together and to the cosine of the angle between the vectors:
A•B = |A||B|cos(θ)
So dividing the Dot Product by the length of one vector gives the projection onto the other vector as shown:
The line colours here are equivalent to those in the interactive diagram.
|A|cos(θ) A B θ (A•B) = |A|cos(θ)
   |B|

Note that the value calculated in the interactive diagram is the relative length of the red line to the green line which avoids the need for a square-root in the length calculation.

Red Length relative to A =(Blue Dot Green) ÷ ((Length of Green) squared)

=(A•B) ÷ (A.dx*A.dx + A.dy*A.dy)

=(A.dx*B.dx + A.dy*B.dy)
  (A.dx*A.dx + A.dy*A.dy)

This value will vary in the range [0,1] as long as the red line is within the green line.
If this value was multiplied by the length of the green line, that [0,1] range would become [0,length of green].
So dividing by the length squared avoided a square root and gave a unit interval that can be mapped (simply by multiplying) for other uses.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.