Activity 13: Motion Fun - Discovery Challenge

Welcome to the Motion Fun discovery challenge! This is a working Expo app that's 70% complete and ready for you to explore and enhance with motion detection features.

🎯 Learning Objectives

By completing this activity, you will:

• Use device accelerometer and gyroscope sensors
• Implement shake detection algorithms
• Create motion-based UI interactions
• Handle sensor data updates efficiently

Total Time: 1.5-2 hours Difficulty: Intermediate Concept: Concept 13 - Device Motion and Sensors

🚀 Getting Started (See Results in 30 Seconds!)

Important: This activity requires a physical device with accelerometer and gyroscope sensors. Web preview will not work for motion features.

Step One: Install Dependencies

# Navigate to this folder
cd activity-13-motion-fun

# Install all packages (this will take ~30 seconds)
npm install --legacy-peer-deps

Step 2: Start Development Server

# Start Expo
npx expo start

# You should see:
# ✓ Metro bundler ready
# ✓ QR code in terminal

Step 3: Open on Your Device

1. Install Expo Go app (free on iOS/Android)
2. Scan QR code from terminal
3. Wait for load (~30 seconds first time)
4. See it work! The app displays live accelerometer and gyroscope data from your device

🎯 What's Already Working

Discover what's built and what you'll create:

• ✅ Complete Expo app structure with SDK 54 ready to run
• ✅ Sensor subscriptions for accelerometer and gyroscope
• ✅ Real-time data display showing live x, y, z values from sensors
• ✅ State management for shake counter and background colors
• ✅ Professional UI with data containers and clear instructions
• ✅ Proper cleanup on component unmount
• ⚠️ Shake detection - TODO: Implement shake detection algorithm
• ⚠️ Tilt-based colors - TODO: Change background color based on device tilt

📁 Template Structure

activity-13-motion-fun/
├── App.js                      # Main entry (YOU'LL EDIT: TODOs 1-2)
├── package.json                # Dependencies (100% complete)
└── README.md                   # This file

📋 Tasks to Complete

TODO 1: Implement Shake Detection (Medium)

File: App.js (line ~22) Time: 30 minutes

Open: App.js Find: Line ~22 in accelerometer listener

Add this logic:

// Inside Accelerometer.addListener callback
const accelerometerSubscription = Accelerometer.addListener(data => {
  setAccelerometerData(data);

  // Detect shake: check if any axis exceeds threshold
  const threshold = 1.5;
  const isShaking =
    Math.abs(data.x) > threshold ||
    Math.abs(data.y) > threshold ||
    Math.abs(data.z) > threshold;

  if (isShaking) {
    setShakeCount(prev => prev + 1);
  }
});

How it works:

• Accelerometer measures device acceleration on x, y, z axes
• Sharp movements (shake) cause high acceleration values
• Threshold of 1.5 filters out normal device movement
• When shake detected, counter increments

Test:

1. Save the file
2. Shake your device vigorously
3. Watch counter increment!

Common Mistakes:

• ❌ Forgetting Math.abs() -> ✅ Use absolute values
• ❌ Threshold too low (0.5) -> ✅ Use 1.5 or higher
• ❌ Counter resets -> ✅ Use prev => prev + 1 pattern

TODO 2: Update Background Color Based on Tilt (Hard)

File: App.js (line ~34) Time: 45 minutes

Open: App.js Find: Line ~34 in gyroscope listener

Add this logic:

// Inside Gyroscope.addListener callback
const gyroscopeSubscription = Gyroscope.addListener(data => {
  setGyroscopeData(data);

  // Map tilt to colors
  let newColor = '#1f2937'; // Default gray

  if (data.x > 0.3) {
    newColor = '#ef4444'; // Red - tilted right
  } else if (data.x < -0.3) {
    newColor = '#3b82f6'; // Blue - tilted left
  } else if (data.y > 0.3) {
    newColor = '#eab308'; // Yellow - tilted forward
  } else if (data.y < -0.3) {
    newColor = '#22c55e'; // Green - tilted backward
  }

  setBackgroundColor(newColor);
});

How it works:

• Gyroscope measures rotation rate around x, y, z axes
• Positive/negative values indicate tilt direction
• Threshold of 0.3 prevents jittery color changes
• Background updates in real-time as you tilt

Understanding the Axes:

• X-axis: Left/right tilt (roll)
  • Positive: Device tilted right
  • Negative: Device tilted left
• Y-axis: Forward/backward tilt (pitch)
  • Positive: Top of device tilted toward you
  • Negative: Top of device tilted away
• Z-axis: Rotation around vertical axis (yaw)

Test:

1. Save the file
2. Hold device flat, then tilt slowly in different directions
3. Background changes color based on tilt!

Common Mistakes:

• ❌ Using accelerometer instead of gyroscope -> ✅ Use gyroscope for tilt
• ❌ Threshold too low (0.1) -> ✅ Use 0.3 to avoid flickering
• ❌ Forgetting to call setBackgroundColor() -> ✅ Update state

✅ Success Checklist

Your activity is complete when:

• Shake detection works (counter increments on shake)
• Background color changes based on tilt direction
• All sensor data displays correctly
• No errors in terminal/console
• App responds smoothly to motion

🎨 What You've Learned

Core Concepts:

• ✅ Accelerometer: Measures acceleration forces
• ✅ Gyroscope: Measures rotation rates
• ✅ Sensor Subscriptions: Real-time data streams
• ✅ Motion Detection: Algorithms for shake/tilt
• ✅ State Management: Updating UI from sensor data

Key Skills:

• Setting up device sensors with expo-sensors
• Implementing shake detection algorithms
• Creating motion-based interactions
• Handling sensor data efficiently
• Building responsive motion UIs

🚀 Extension Challenges

Completed all TODOs? Push your motion skills further:

Easy Extensions

• Shake Intensity Levels: Add different shake thresholds (gentle shake threshold 1.0, vigorous shake threshold 2.5)
• Shake Feedback: Display "Shaking!" message when shake detected using conditional rendering
• Counter Reset: Add reset button for shake counter with TouchableOpacity

Medium Extensions

• Smooth Transitions: Implement smooth color transitions using React Native's Animated API
• Haptic Feedback: Add vibration when shake detected using expo-haptics
• Tilt Gradient: Create color gradient based on exact tilt angle instead of threshold zones

Hard Extensions

• Shake to Undo: Build a drawing app with "shake-to-undo" feature to clear last stroke
• Tilt Game: Create a tilt-controlled game where user balances a virtual ball by tilting device
• Gesture Recognition: Implement advanced gesture recognition (detect circle shake, figure-8 patterns, or specific motion sequences)

🔗 Related Activities

This template connects to:

• Activity 06: Save My Data (persist shake high score)
• Activity 11: Test My App (test motion features)
• Project 02: Photo Gallery (shake to shuffle)

📚 Resources

Documentation:

• expo-sensors Accelerometer
• expo-sensors Gyroscope
• Motion Sensors Overview

Tutorials:

• Understanding Device Motion
• Sensor Coordinate System

Troubleshooting:

• Sensors not working? Check physical device (not web)
• Noisy data? Increase threshold or add smoothing
• Battery drain? Increase update interval to 200-500ms

📤 Submission

When you're done:

1. Take 2-4 screenshots showing:
   • Shake counter working
   • Different background colors from tilt
   • Sensor data values
2. Submit via: Activity Submission Form
3. Include brief reflection: What surprised you about motion sensors?

Required:

• Both TODOs completed
• App runs without errors on physical device
• Screenshots showing motion features

Optional (extra credit):

• At least 1 extension challenge
• Creative motion interaction

💡 Common Issues & Solutions

Issue: "Sensor unavailable" error Solution: Use physical device, not web simulator

Issue: Shake counter increments too quickly Solution: Increase threshold from 1.5 to 2.0 or add debouncing

Issue: Background color flickers rapidly Solution: Increase gyroscope threshold from 0.3 to 0.5

Issue: Battery drains quickly during testing Solution: Increase update interval to 200ms or higher

Issue: App crashes on sensor subscription Solution: Check expo-sensors is installed: npm install expo-sensors

🎉 Congratulations!

You've mastered device motion sensors! You now understand:

• How accelerometer and gyroscope work
• Implementing shake detection
• Creating tilt-based interactions

Next Steps:

1. Submit your work
2. Complete Exit Ticket for Lesson 13
3. Integrate motion features into your projects!

Activity 13 Template | M1: Mobile Foundations | Expo SDK 54 | React Native 0.79.5