Using Vectors

This article is about the vector used in algebra. For the type of graphics, see Vector Graphics.

For more information, see Euclidean vector on Wikipedia.

A 2D vector depicted as a black arrow, going from point A to point B.

Vectors are geometric objects with a direction and a magnitude. They are often used to represent physical quantities such as displacement, velocity, force, etc. This article will explain how to use vectors within Scratch.

Definition

A vector is essentially a list of numbers. Each "list item" is called a component. Vectors can have any number of components but 2 is common. A vector that has 2 components could be described as 2-dimensional (2D). This article mostly focuses on 2D vectors for their simplicity and relevance to Scratch (which has a 2D screen).

Vectors can also be represented by the movement from one point to another. They can be displayed as such with an arrow from one point to another.

Notation

The following notation will be used in this article:

• $\mathbf{𝐚}$ is a vector, with vectors being denoted in bold.
• $⟨x,y⟩$ is the vector with components $x$ and $y$.
• ${\mathbf{𝐚}}_1$ and ${\mathbf{𝐚}}_2$ are the first and second components of $\mathbf{𝐚}$ respectively.
• $\mathbf{𝐚}\cdot \mathbf{𝐛}$ is a dot product.
• $\mathbf{𝐚}\times \mathbf{𝐛}$ is a cross product.
• $\hat{\mathbf{a}}$ is the unit vector $\mathbf{𝐚}$.
• $\Vert \mathbf{𝐚}\Vert$ is the length of $\mathbf{𝐚}$.

Scratch Representation

In Scratch, vectors are often represented with variables. For example, a 2D position of $⟨3,4⟩$ could be created like this:

set [position.x v] to [3]
set [position.y v] to [4]

Alternatively a list could be used:

delete all of [position v]
add [3] to [position v]
add [4] to [position v]

Variables have advantages of readability and performance.

The are many vector naming conventions in use in Scratch. This article uses the form shown above. Other forms (using the "x" component of "velocity" as an example) include but are not limited to:

• VelocityX
• x velocity
• x vel
• v.x
• vx
• xv

Vector Operations

A lot of the standard operations of natural numbers can be performed on vectors.

Addition

A geometric representation of vector addition.

Vector addition consists of simply adding the respective components of two vectors: $⟨1,2⟩+⟨3,4⟩=⟨4,6⟩$. This can be represented geometrically by placing a vector at the tip of the other's.

set [a.x v] to [1]
set [a.y v] to [2]
set [b.x v] to [3]
set [b.y v] to [4]
set [result.x v] to ((a.x) + (b.x)) // = 4
set [result.y v] to ((a.y) + (b.y)) // = 6

Subtraction

Subtraction is like addition, and only requires subtracting the vectors' respective components: $⟨5,4⟩-⟨3,2⟩=⟨2,2⟩$

set [result.x v] to ((a.x) - (b.x))
set [result.y v] to ((a.y) - (b.y))

Multiplication

There are a few operations that could be called multiplication. The simplest is scalar multiplication which is defined between a scalar (a real number) and a vector. Each of the components are multiplied by the scalar: $5⟨2,3⟩=⟨10,15⟩$

set [result.x v] to ((a.x) * (scale factor))
set [result.y v] to ((a.y) * (scale factor))

The dot product and cross product are similar operations that operate on two vectors.

Division

Similar to multiplication, a vector can be divided by a scalar (scalar division):

• $\frac{⟨15,25⟩}{5}=⟨3,5⟩$
• $\frac{4}{⟨16,24⟩}=\mathrm{u}\mathrm{n}\mathrm{d}\mathrm{e}\mathrm{f}\mathrm{i}\mathrm{n}\mathrm{e}\mathrm{d}$

set [result.x v] to ((a.x) / (value))
set [result.y v] to ((a.y) / (value))

Magnitude

The magnitude of a vector is its length, and can be calculated using the Pythagorean theorem: $\Vert \mathbf{𝐚}\Vert =\sqrt{({\mathbf{𝐚}}_1{)}^2+({\mathbf{𝐚}}_2{)}^2}$

set [magnitude v] to ([sqrt v] of (((a.x) * (a.x)) + ((a.y) * (a.y))))

Direction

The direction of an n-dimensional vector is defined by (n-1) angles; for a 2D vector, only one angle is necessary to calculate its direction, which can be calculated using right-angle trigonometry: $\theta ={\tan }^{-1}(\frac{y}{x})$ (where $\theta$ is the angle).

In Scratch, a 2D vector can be composed from an angle and magnitude like this:

set [a.x v] to (([cos v] of (angle)) * (magnitude))
set [a.y v] to (([sin v] of (angle)) * (magnitude))

To go the opposite direction and find the angle of a 2D vector, many programming languages implement a function called atan2 (2-argument arctangent). In Scratch, it can be implemented like this:

set [angle v] to (([atan v] of ((a.y) / ((a.x) + (0)))) + ((180) * <(a.x) < [0]>))

Reference project

Normalization

A unit vector is a vector of length 1 (a unit length). A vector of any length can be normalized into a unit vector by dividing the vector by its length: $\hat{\mathbf{a}}=\frac{\mathbf{𝐚}}{\Vert \mathbf{𝐚}\Vert }$.

set [magnitude v] to ([sqrt v] of (((a.x) * (a.x)) + ((a.y) * (a.y))))
set [a.x v] to ((a.x) / (magnitude))
set [a.y v] to ((a.y) / (magnitude))

Dot Product

The dot product of two vectors produces a scalar number, which can be calculated with two different equations:

• $\mathbf{𝐚}\cdot \mathbf{𝐛}={\mathbf{𝐚}}_1{\mathbf{𝐛}}_1+{\mathbf{𝐚}}_2{\mathbf{𝐛}}_2$.

set [result v] to (((a.x) * (b.x)) + ((a.y) * (b.y)))

• $\mathbf{𝐚}\cdot \mathbf{𝐛}=\Vert \mathbf{𝐚}\Vert \Vert \mathbf{𝐛}\Vert \cos \theta$, with $\theta$ being the angle between the two vectors.

The result is 0 when the vectors are perpendicular, and increasingly positive or negative as they become parallel, being positive when they are in the same direction and negative when in opposite directions.

The dot product can be used on vectors of any dimension but most often 3.

Cross Product

• The cross product: $\mathbf{𝐚}\times \mathbf{𝐛}$ of two vectors is only defined in 3-dimensional space and produces a vector. The cross product is non-commutative, meaning that $\mathbf{𝐚}\times \mathbf{𝐛}\ne \mathbf{𝐛}\times \mathbf{𝐚}$.

Let a × b = c.

• The Three-Dimensional cross-product is defined by these two equations:
  • $\mathbf{𝐚}\times \mathbf{𝐛}=\Vert \mathbf{𝐚}\Vert \Vert \mathbf{𝐛}\Vert \sin (\theta )\mathbf{𝐧}$, where $\theta$ is the angle between the two vectors and $\mathbf{𝐧}$ is the unit vector perpendicular two the vectors $\mathbf{𝐚}$ and $\mathbf{𝐛}$.
  • The individual components of $\mathbf{𝐜}$ are defined by these equations:
    • ${\mathbf{𝐜}}_1={\mathbf{𝐚}}_2{\mathbf{𝐛}}_3-{\mathbf{𝐚}}_3{\mathbf{𝐛}}_2$
    • ${\mathbf{𝐜}}_2={\mathbf{𝐚}}_3{\mathbf{𝐛}}_1-{\mathbf{𝐚}}_1{\mathbf{𝐛}}_3$
    • ${\mathbf{𝐜}}_3={\mathbf{𝐚}}_1{\mathbf{𝐛}}_2-{\mathbf{𝐚}}_2{\mathbf{𝐛}}_1$

set [result.x v] to (((a.y) * (b.z)) - ((a.z) * (b.y)))
set [result.y v] to (((a.z) * (b.x)) - ((a.x) * (b.z)))
set [result.z v] to (((a.x) * (b.y)) - ((a.y) * (b.x)))

Note:

Rotation

A vector can be rotated around an axis. In 2D it looks like this:

set [result.x v] to (((a.x) * ([cos v] of (angle))) - ((a.y) * ([sin v] of (angle))))
set [result.y v] to (((a.x) * ([sin v] of (angle))) + ((a.y) * ([cos v] of (angle))))

Caution:

The second "set variable" relies on the old values of both x and y. It is very easy to mistakenly use the new x value that was set in the block above it.

3D rendering projects in Scratch often chain together multiple rotations around different axes.

A vector rotation in 3D around any vector axis can be efficiently implemented with Rodrigues' rotation formula.

Projection

A vector can be projected onto another. There are a few ways this can be found. One of which (projecting a onto b) is: ${\mathrm{proj}}_{\mathbf{𝐛}}\mathbf{𝐚}=\frac{\mathbf{𝐚}\cdot \mathbf{𝐛}}{\mathbf{𝐛}\cdot \mathbf{𝐛}}\mathbf{𝐛}$

set [scale factor v] to ((((a.x) * (b.x)) + ((a.y) * (b.y))) / (((b.x) * (b.x)) + ((b.y) * (b.y))))
set [result.x v] to ((b.x) * (scale factor))
set [result.y v] to ((b.y) * (scale factor))

This can be simplified if vector b is a unit vector.

Reflection

Main article: Reflection

Useful in simulations such as light reflecting off a mirror or particles bouncing off an object, a vector can be reflected in the direction of a normal vector. The normal must be a unit vector.

set [scale factor v] to ((((incident.x) * (normal.x)) + ((incident.y) * (normal.y))) * (-2))
set [reflected.x v] to ((incident.x) + ((normal.x) * (scale factor)))
set [reflected.y v] to ((incident.y) + ((normal.y) * (scale factor)))

Interpolation

Two vector can be interpolated to make a mix of the two. The proportion is controlled by a "parameter" usually named "t" and in the range 0.0 to 1.0. Interpolation is calculated separately per component:

set [result.x v] to ((a.x) + (((b.x) - (a.x)) * (t)))
set [result.y v] to ((a.y) + (((b.y) - (a.y)) * (t)))

Gravity Example

Create a pair of variables position.x and position.y, and write a script to make a sprite continually go to the coordinates given by the position vector. Now, if you set those variable watchers to sliders, you can change the position with sliders.

when gf clicked
forever
 set x to (position.x)
 set y to (position.y)

For something more interesting, create another variable pair called "velocity" (i.e. create velocity.x and velocity.y). Add a new script which changes the respective components of the position vector by the components of the velocity vector. Now, by changing the value of velocity, you should have a much smoother motion.

when gf clicked
forever
 change [position.x v] by (velocity.x)
 change [position.y v] by (velocity.y)
 set x to (position.x)
 set y to (position.y)

Finally, we can create an effect of gravity by also changing the velocity by some vector:

when gf clicked
set [position.x v] to (0)
set [position.y v] to (0)
set [velocity.x v] to (10)
set [velocity.y v] to (10)
forever
 change [velocity.y v] by (-1)
 change [position.x v] by (velocity.x)
 change [position.y v] by (velocity.y)
 set x to (position.x)
 set y to (position.y)