Introduction

Download Typescript (Visual Studio project) source code (50kb)

This page explains and visualizes how a vector is reflected at a surface. It is implemented in Typescript using HTML5 canvas.
Feel free to download the source code at the top of the page to check out how it works.
See below for the derivation of the required mathematics.

---

Usage

Above an interactive visuation of the vector reflection is shown: The green vector v is reflected at the plane p with normal n and the result is the blue reflected vector.
The black rectangles can be clicked and dragged to modify the plane orientation and the input vector v.

---

Mathematical explanation

Prerequisites

In the following, a vector v is denoted in bold as v. The length of v is written as |v|.
A vector that is parallel to v is written as v_∥, a vector that is perpendicular to v is written as v_⊥.
The unit vector of v is written as v_n. The dot product of v and w is written as v ∙ w.

DotProduct

The most essential mathematic tool that is going to be used is the dot product of two vectors, so at first a short recapitulation.
The dot product is two vectors a and b is calculated as a ∙ b = a₁ * b₁ + a₂ * b₂ ... + a_n * b_n.
Generally, the important property of the dot product is that is can be used to calculate the angle ɑ between two vectors (because a ∙ b = |a| * |b| * cos (ɑ)).

However, another geometric property is most often even more useful:

As shown in the figure above, the vector b is projected onto vector a, resulting in p_b. The dot product can be used to calculate the length of the projected vector p_b, i.e |p_b|.
The concrete relation is as follows: The dot product is equal to the signed length of the projection of b onto a multipled by the length of a. So |p_b| = (a ∙ b / |a|).
If a is a unit vector, then the dot product provides the desired result directly without division: |p_b| = a_n ∙ b.

This fact provides an even more practical tool which is shown in the following figure:

It can be used to split b into two vectors: One vector that is parallel to a which is denoted as b_∥, the other vector that is perpendicular to a which is denoted as b_⊥.

The length of b_∥ is: |b_∥| = a_n ∙ b.
So to get the actual vector b_∥, just multiply it with a_n: b_∥ = (a_n ∙ b) * a_n.

Finally, getting b_⊥ is straight-forward because b is the sum of b_∥ and b_⊥: b = b_⊥ + b_∥.
Thus b_⊥ = b - b_∥ = b - (a_n ∙ b) * a_n.

Reflection

So let's come to the actual part of reflection. The following figure shows an overview of the task: A vector v shall be reflected at a plane p with normal vector n (|n| = 1). The goal is to calculate the reflected vector w of vector v.

The solution is to decompose the vector v into its parallel component v_∥ and its perpendicular component v_⊥ and use them in a clever way to represent vector w.

The figure on the right side shows the reflection from above, but with the subtle difference that the v is negated and called v'.
This eases the understanding of the following derivation: If v' is followed and then v'_⊥ is followed in reverse direction twice times, the result is w, thus:
w = v' + (- v'_⊥) + (- v'_⊥) = v' - 2 * v'_⊥.

As v' = -v, let's express w in terms of v and do some replacements and simplifications:
w = -v - 2 * (-v_⊥)
    = -v - 2 * (-v - (-v ∙ n) * n)
    = -v + 2 * (v + (-v ∙ n) * n)
    = -v + 2 * v + 2 * (-v ∙ n) * n
    = v + 2 * (-v ∙ n) * n
    = v - 2 * (v ∙ n) * n
    = v - 2 * v_∥

The formula w = v - 2 * (v ∙ n) * n = v - 2 * v_∥ can also be understood from a geometrical point of view.

As shown in the figure right, the vector v is appended again at the point where it hits the plane (that's legitimate as a vector only describes a direction, not a point in space).
So if v is followed from this point and afterwards v_∥ is followed in reverse direction (-v_∥) for two times, the result is vector w. That's it! Hope you liked it and learned something new!

Sunshine, March 2021

History

• 2021/03/14: Initial version.