Superhero: physically interactive browser game

OverviewMission: Asteroid is a browser-based game that is controlled by a ‘smart’ cape and gloves set. The ideal users are children aged 5-7. In theory they would purchase our cape and gloves, then enjoy our interactive game wherever they are connected to the Internet.

Game
The game itself is a flying game. When you arrive at the URL there is nothing to click or type, just a magical prompt to ‘close your fists’ to begin the game. From there you calibrate your cape, learn the rules and the mission, then you’re off flying. You have 30 seconds to fly as fast as you can to save the world. A work-in-progress version of the game can be played on ‘auto-pilot’ mode here, and just press ENTER to get from scene to scene.

Intro7C

Tech specs
The cape and gloves are controlled wirelessly via Bluetooth. Inside the gloves are conductive fabric to sense when the wrist is closed and an accelerometer to sense gravity and velocity on the wrists. The cape has conductive Velcro and embedded lights. The gloves are powered by a 3.7 litho battery and the cape is powered by coin cel batteries. The site was coded in JavaScript- a combination of P5.js, Three.js, Node.js, Express.js, and Noble.js. The accelerometer and micro controller were programmed with Arduino.

Process
The project is being developed by KC Lathrop and Eve Weinberg. We have been working on it for 4 weeks. Before creating this game, neither KC nor Eve had coded an interactive website before or created electronic wearable devices. This project was the output of 1 semester’s worth of learnings in our ITP graduate studies. We began by exploring ways to allow for children to feel like superheros in their own living room. We referenced children’s book and wanted there to be a storyline to our game, but also wanted the focus to be on moving your body around. We learned a great deal from user testing our early concepts, and iterated on the story many times before coding and designing the site. This process and early storyboards can be seen here.

The Codehttps://github.com/evejweinberg/SuperHero/tree/master/SuperHero_v8/ble_js/public

Sources and Documentation
Much of the 30 second game is derived from lessons from the Three.js book Learning Three.js – The Javascript 3D library for WebGL by Jos Dirksen, and from the Threejs.org website. The wireless node.js code was written with much help and guidance from our professor Tom Igoe.