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 MasterclassA 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
🎨Part A — Designer View (UI Design)
Open MIT App Inventor → Switch to Designer view. Follow each step below to build the interface.
1. Screen Basics
• Go to the **Properties** panel (right) for **Screen1**. • Set **Title** to "Vector Operations App". • Set **BackgroundColor** to dark grey or black. • Set **AlignHorizontal** to Center.
2. Vector A Input
• Drag a **Label** from **User Interface**. Set its text to "VECTOR A (x, y, z)". • Drag a **HorizontalArrangement** from **Layout**. • Inside it, drag 3 **TextBoxes**. • **Rename them**: 'Ax', 'Ay', 'Az'. • In Properties, set **Width** to 25% for each and check **NumbersOnly**.
3. Action Buttons
• Drag another **HorizontalArrangement**. • Drag 2 **Buttons** inside: - Button 1: Rename 'DotBtn', Text: "DOT PRODUCT". - Button 2: Rename 'MagBtn', Text: "MAGNITUDE of A". • Style them with bright colors so they stand out.
4. Result Display
• Drag a **Label** to the screen. • Rename it to 'ResultLbl'. • Change text to "Result: 0". • Set **FontSize** to 22 for easy reading.
🧩Part B — Blocks View (Logic & Calculation)
Switch to Blocks view. Now add the logic that makes your app actually work.
1. Switch to Blocks
• Go to the top right of the Designer screen. • Click the **Blocks** button to enter the logic area.
2. Calculating Dot Product
• Formula: (Ax * Bx) + (Ay * By) + (Az * Bz). • Click **DotBtn** in the list. Drag the gold 'when DotBtn.Click' block. • Click **ResultLbl**. Drag the green 'set ResultLbl.Text to' and snap it inside. • From **Math** (Blue), drag a '+' block and plug it into the green 'to' slot. • Add more slots to the '+' block by clicking its blue gear icon (need 3 total). • Fill each slot with a multiplication '*' block from **Math**. • Logic: (Ax.Text * Bx.Text) + (Ay.Text * By.Text) + (Az.Text * Bz.Text).
3. Calculating Magnitude (A)
• Formula: √ (Ax² + Ay² + Az²). • Drag 'when MagBtn.Click' (Gold). • From **Math** (Blue), get the 'sqrt' (square root) block. • Inside it, add '+' blocks for the components. • Use the '^' (power) block with the number '2' for squaring: [Ax.Text] ^ [2].
🧪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