Home/Mathematics III Year/Team 3
Team 3

Vector Operations App

Build an app that performs vector operations in 2D and 3D — dot product, cross product, magnitude, unit vector, and angle between two vectors.

🎯 Learning Goals

  • ▹ Differentiate between scalar and vector quantities
  • ▹ Master Dot vs Cross product applications
  • ▹ Calculate geometric properties like angles and magnitudes
  • ▹ Implement 3D-coord geometry in mobile interface

🌎 Why This Matters

Vectors are the foundation of physics engine in videogames, GPS navigation, and aerospace engineering. Every time something moves in space, a vector is used to describe that motion.

📖Understanding Vectors

Theory Masterclass
"

A vector is a quantity that has both magnitude (size) and direction. Think of it as an arrow pointing from one point to another. In 2D, a vector has two components: V = (x, y) In 3D, a vector has three components: V = (x, y, z) Magnitude: The length of the vector. For V = (x, y, z): |V| = √(x² + y² + z²) Dot Product: A · B = a₁b₁ + a₂b₂ + a₃b₃ (gives a single number) - If the dot product is 0, the vectors are perpendicular (90°)! Cross Product (3D only): A × B = (a₂b₃ - a₃b₂, a₃b₁ - a₁b₃, a₁b₂ - a₂b₁) - The result is a new vector perpendicular to both A and B. Unit Vector: A vector with magnitude 1 in the same direction. Û = V / |V| Angle Between Vectors: cos(θ) = (A · B) / (|A| × |B|) θ = arccos((A · B) / (|A| × |B|))

Mathematical Foundation

fxMagnitude: |V| = √(x² + y² + z²)
fxDot Product: A · B = a₁b₁ + a₂b₂ + a₃b₃
fxCross Product: A × B = (a₂b₃-a₃b₂, a₃b₁-a₁b₃, a₁b₂-a₂b₁)
fxUnit Vector: Û = V / |V|
fxAngle: θ = arccos((A·B) / (|A|×|B|))

🎨Part A — Designer View (UI Design)

Open MIT App Inventor → Switch to Designer view. Follow each step below to build the interface.

1

Set up the screen

Set Screen1 title to "Vector Calculator". Use a dark background with green accent text for a tech look.

2

Add dimension toggle

Add a HorizontalArrangement with 2 Buttons: "2D Vectors" and "3D Vectors". Default to 2D mode. When 3D is selected, show the z-component fields.

3

Create Vector A input

Add Label "Vector A". Add a HorizontalArrangement with TextBoxes: - TextBox Ax (Hint: "x₁"), TextBox Ay (Hint: "y₁"), TextBox Az (Hint: "z₁") Set Az visibility to false initially (shown in 3D mode). Set all to NumbersOnly = true.

4

Create Vector B input

Add Label "Vector B". Same layout: Bx, By, Bz TextBoxes. Bz also hidden initially.

5

Add operation buttons

Add a grid of buttons using HorizontalArrangements: Row 1: "Dot Product", "Cross Product" Row 2: "Magnitude A", "Magnitude B" Row 3: "Unit Vector A", "Angle Between" Use different colors for each button.

6

Add result display

Add Label "Result" as header. Add ResultLabel with larger font size. Add a secondary InfoLabel for showing additional details (like "Vectors are perpendicular!").

🧩Part B — Blocks View (Logic & Calculation)

Switch to Blocks view. Now add the logic that makes your app actually work.

1

Read vector components

Create a procedure "readVectors" that reads all TextBox values into variables: set ax = number(Ax.Text), ay = number(Ay.Text), az = number(Az.Text) set bx = number(Bx.Text), by = number(By.Text), bz = number(Bz.Text) (If 2D mode, set az = 0 and bz = 0)

2

Build Magnitude calculation

When MagnitudeAButton.Click: Call readVectors magA = sqrt(ax² + ay² + az²) In App Inventor blocks: set magA to sqrt((ax × ax) + (ay × ay) + (az × az)) Set ResultLabel.Text to: join "| A | = " magA

3

Build Dot Product

When DotProductButton.Click: dot = (ax × bx) + (ay × by) + (az × bz) Set ResultLabel.Text to: join "A · B = " dot Also check: if dot = 0 then: Set InfoLabel.Text = "The vectors are perpendicular! (90°)"

4

Build Cross Product

When CrossProductButton.Click: cx = (ay × bz) - (az × by) cy = (az × bx) - (ax × bz) cz = (ax × by) - (ay × bx) Set ResultLabel.Text to: join "A × B = (" cx ", " cy ", " cz ")" Note: Cross product only works in 3D! If in 2D mode, show alert "Switch to 3D mode for cross product".

5

Build Unit Vector

When UnitVectorButton.Click: Calculate magnitude first: mag = sqrt(ax² + ay² + az²) if mag = 0 then show alert "Cannot calculate unit vector of zero vector!" else: ux = ax / mag uy = ay / mag uz = az / mag Set ResultLabel.Text to: join "Û = (" ux ", " uy ", " uz ")"

6

Build Angle Between Vectors

When AngleButton.Click: 1. Calculate dot product: dot = ax×bx + ay×by + az×bz 2. Calculate magnitudes: magA and magB 3. Check if either magnitude is 0 (show error) 4. cosTheta = dot / (magA × magB) 5. theta = acos(cosTheta) — this gives radians 6. degrees = theta × (180 / π) Set ResultLabel.Text to: join "Angle = " degrees "°" In App Inventor, use the "atan2" or "acos" block from Math category.

7

Toggle 2D/3D mode

When 2DButton.Click: Set Az.Visible = false, Bz.Visible = false Set Az.Text = "0", Bz.Text = "0" When 3DButton.Click: Set Az.Visible = true, Bz.Visible = true

🧪Testing Your App

  • ✓Test dot product of (1,0,0) and (0,1,0) → should be 0 (perpendicular)
  • ✓Magnitude of (3,4,0) should be 5 (classic 3-4-5 triangle)
  • ✓Cross product of (1,0,0) × (0,1,0) should be (0,0,1)
  • ✓Angle between (1,0) and (0,1) should be 90°
  • ✓Unit vector of (3,4) should be (0.6, 0.8)

🚀Bonus Challenges

Extra credit — impress your instructor

  • ★Draw the vectors as arrows on a Canvas component
  • ★Add vector addition and subtraction (resultant vector)
  • ★Show the projection of A onto B: proj = (A·B/|B|²) × B
  • ★Add a 'Parallel Check' — vectors are parallel if cross product = 0
← Back to Mathematics III YearReview Basics →