Amos And Andrew

Project Title: “Misunderstood Movements: A Sensor-Driven Story”

Description:

“Amos & Andrew” revolves around themes of mistaken identity and racial stereotypes, with Nicolas Cage playing Amos Odell, a small-time thief caught in a comedic case of mistaken identity. Inspired by these themes, “Misunderstood Movements: A Sensor-Driven Story” is an interactive web application that uses the Sensor API to create a narrative-driven game. The game challenges players to navigate through various scenarios based on sensor inputs that detect their movements, reflecting the misunderstandings and chaotic situations similar to those experienced by the characters in the film.

This app uses the Accelerometer and Gyroscope features of the Sensor API to detect the player’s physical movements, which control the character in the game. Each level of the game represents different challenging scenarios that require players to perform specific actions or maintain certain postures to progress, highlighting the theme of misunderstandings and assumptions.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Misunderstood Movements</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f0f0f0;
        color: #333;
        text-align: center;
        padding: 20px;
    }

    #gameCanvas {
        margin-top: 20px;
        width: 300px;
        height: 200px;
        border: 2px solid #000;
        background-color: #fff;
    }
</style>
</head>
<body>
    <h1>Misunderstood Movements</h1>
    <div id="gameCanvas">Move your device to navigate the story...</div>
<script>
    if ('Accelerometer' in window && 'Gyroscope' in window) {
        const accelerometer = new Accelerometer({frequency: 60});
        const gyroscope = new Gyroscope({frequency: 60});

        accelerometer.addEventListener('reading', e => {
            console.log(`Acceleration along the X-axis ${accelerometer.x}`);
            console.log(`Acceleration along the Y-axis ${accelerometer.y}`);
        });

        gyroscope.addEventListener('reading', e => {
            console.log(`Angular velocity along the X-axis ${gyroscope.x}`);
            console.log(`Angular velocity along the Y-axis ${gyroscope.y}`);
        });

        accelerometer.start();
        gyroscope.start();
    } else {
        document.getElementById('gameCanvas').textContent = 'Sensor API not supported on your device.';
    }
</script>
</body>
</html>

References:

• Film: Amos & Andrew (1993)
• API: Sensor API Documentation

“Misunderstood Movements: A Sensor-Driven Story” not only brings the chaotic and humorous elements of “Amos & Andrew” into a fun, interactive setting but also leverages advanced web technologies to explore and educate about physical computing in an engaging way. This application encourages players to understand and navigate through misunderstandings, much like the film’s protagonists, using their movements in a meaningful narrative context.