Death Star Defense on IPad Using a Darth Vader MiniFig (with Mini GaussSense)

You might have already seen lots of cool projects using littleBits or Makey Makey. Today I am going to use another toolkit called Mini GaussSense (made by GaussToys.) This tutorial helps you build an interactive game on an iPad: Death Star Defense! Spin the Vader minifig to wield his lightsaber and touch the Vader’s hand to use the force to beat the enemies! You can see the game in the video above.

Let’s begin with hacking a Lego Minifig!

To turn Darth Vader Minifig into a game controller, we need a magnet and a piece of conductive tape. Of course, you can use any Minifig at your choice.

I ordered a Mini GaussSense on their online store, and it came with a bundle of wires, a Mini GaussSense sensor, and a magnet in a box.

Mini GaussSense is a sensor that can track the orientation of a magnet, so I vertically attached a magnet on the bottom of the Minifig and thusly the sensor knows its orientation.

Certainly, I want to USE THE FORCE! Here is my trick: I wrapped the conductive tape around his arm and down to his feet. So, when I put the Vader Minifig on the tablet display and touch his arm, the touchscreen is able to detect the touch event as a trigger.

I followed the decent Tutorial provided about how to connect things up.

Then, I uploaded the Arduino script to my Arduino, which can be downloaded Here (filetype: zip)
As I connected the Arduino’s analog pin A0 to the sensor, I specified it in the Arduino script.

const int analogPin[] = {A0};

To use the sensor data, I downloaded and installed GaussSense Desktop, which is a daemon application (appearing on the menu bar/system tray in Mac/Windows). The application collects sensor data from serial port, and send the data to web pages via WebSocket.

After the app was installed, I launched the app and connected the Arduino to my computer. Then, I saw the port connecting to Arduino, and hit connect. A visualizer then prompted. I used the magnet in the box, and slided, spinned, or flipped it on the sensor, it showed the magnetic-field distribution as a result, which seemed to be plausible. I didn't experience any noticeable delay or glitch from the view. To my experience, the hover is detectable in a 2cm-distance above the sensor. Using stronger magnets may increase the sensing range.

So as the hardware part had been done, I now tried to run the web game on our desktop browser.

I downloaded the source code of the game "StarWarsP5", which is built with p5.js from this GitHub repository and installed http-server via npm. (You could try other local server alternatives.)

If you have npm installed, install http-server globally in your command line:

$ npm install http-server -g

This line in Gausssense.js is used for receive data sent from the GaussSense Desktop.

<script src="http://gausstoys.com/libs/gausssense.js"></script>

Then, I launched the http-server in the game folder and tested it on my desktop browser.

$ http-server

The http-server informs which URL (usually 192.168.x.x) I should key in the browser. (Make sure to launch it in the same directory of your HTML file.) After the website is loaded, I can place the Vader MiniFig on the sensor, and wield the lightsaber by rotating it.

The next step is to put everything together on the tablet.

In the javascript file main.js, I initialized the GaussSense object with my internal IP address and port number 5100 (the default port number for GaussSense Desktop):

var gs = new GaussSense("ws://192.168.x.x:5100");

Then, the same program works on the tablet.

(Make sure your tablet is connected to the same WiFi network as your computer.)

I attached the Mini GaussSense to the back of a tablet (at the center) and got an empty box to support the tablet.

And then, I entered the internal IP address with the port number of the http-server (not 5100 in this case) on the tablet's browser. The game should be working just the way like it’s on the desktop browser.

Now Defend the Death Star, Beat the enemies!

Spin the little Vader to wield his lightsaber, and touch the Vader’s hand to use the force!

Enjoy the game. Happy playing!

As the Mini GaussSense "sees" the surrounding magnetic fields of the magnet, you can develop your own ways of using API of GaussSense.js to get the magnet's x and y position, intensity (could be treated as z position,) rotation angle, and tilt angle.

// GaussSense.js API
var gs = new GaussSense(); 
// Getting north/south pole, bipolar midpoint
var north = gs.getNorthPoint(); 
var south = gs.getSouthPoint();
var midpoint = gs.getBipolarMidpoint();

// Getting sensor values
console.log("position x    :", midpoint.x);
console.log("position y    :", midpoint.y);
console.log("intensity     :", midpoint.intensity);
console.log("rotation angle:", midpoint.angle); // support bipolar midpoint only
console.log("tilt angle    :", midpoint.pitch); // support bipolar midpoint only

You could also check out the supplemental materials on this page:

http://developers.gausstoys.com/apps/desktop?locale=en

http://developers.gausstoys.com/tutorials/web-gaus...

In addition to working with the web, the good news for developers/makers is that GaussSense SDK also covers some other great platforms for building prototypes, applications, or games as well including Scratch, Processing, and Unity.

As for the extension on the hardware side, Mini GaussSense could be combined together forming a grid with larger sensing area (esp. for 2D movements.) using an 2x2 Arduino shields. Pairing with GaussToys' NFC module is also an option to get physical feedback or identify different objects.

Overall, I am excited about this tool, and look forward to seeing more works of using Mini GaussSense from the creative minds!