A vector represents a displacement, when adding two vectors, the result is the combination of each of those displacemnts. Vector addition is a component wise operation which yields a new vector. To add two vectors, add like components and store the result in the appropriate component of the resulting vector.

$$\vec{A} + \vec{B} = (A_0 + B_0, A_1 + B_1 ... A_n + B_n)$$

Visually, to add vector $$\vec{A}$$ to $$\vec{B}$$, place $$\vec{B}$$ at the tip of $$\vec{A}$$ and follow the displacement of both vectors. In the below example there are two vectors, the blue vector $$\vec{A}$$ and the green vector $$\vec{B}$$. The result $$\vec{A} + \vec{B}$$ is the orange vector.

Canvas support required

The end of the orange vector can be reached by following the displacement of the green vector from the blue vector OR by following the displacement of the blue vector from the green vector. Implementing vector addition in code is trivial:

vec2 Add(vec2 a, vec2 b) {
return vec2(a.x + b.x, a.y + b.y);
}

vec3 Add(vec3 a, vec3 b) {
return vec3(a.x + b.x, a.y + b.y, a.z + b.z);
}

vec4 Add(vec4 a, vec4 b) {
return vec4(a.x + b.x, a.y + b.y, a.z + b.z, a.w + b.w);
}