Geeks Night Out

Geeks Night Out

Last week, a few of us from the tech department participated in Geeks Night Out, a yearly street-fair hosted by the City of Tempe to celebrate STEM-based education. The event is geared towards high-school-aged kids and younger, and their families, to get them excited about SCIENCE!

ALTIMIT – Kinect “OS”

For the event, we built: Altimit. This interface interacts with Microsoft Kinect. We wanted to encourage children to interact with our technology, so we thought the easiest way to accomplish this would be to make the interface “motion-sensitive.” We took a Kinect off the shelf, dusted it off, and coded the interface to be controlled via Kinect, so kids could move their bodies or hands to view visual feedback on the screen.

conical

The UI for the interface is based of a an anime that one of our developers saw a decade ago. The anime was called .hack//sign and their OS on the show was a pretty futuristic-looking system called “ALTIMIT”:

altimit

She had always liked the look of it, and we finally thought it was appropriate to pull it out for this project! She started with a metro interface (similar to Windows 8 start menu) but the squares seemed a little sterile, so switched it out to honeycombs, which we thought fit in better with the Altimit design scheme.

altimit

For the backdrop, she used particles.js to give everything a little more movement. We thought it made it look more like an actual Operating System rather than a static HTML page:

See the Pen particles.js by Vincent Garreau (@VincentGarreau) on CodePen.

A few of the team worked on Altimit on our First Quarterly Autonomy Day. We took inspiration for the loading screen design from Battlefield 3:

loading-screen

Each of the honeycombs in the OS interface can be “clicked” using the Kinect (for those of you who have never used Kinect, to “click” you simply close your hand into a fist). To speed things up, we pulled the simple code demos from Codepen or built them using d3.js. Our goal was basically to choose visualizations that would be colorful and a little crazy – we were basically trying to show kids how far you can stretch the limits of an HTML website – and to keep the kids interested long enough to compete with the Robotics booths that were next to us at the event.

Future Disco

The second half of the project was what dubbed Future Disco. This is a gorgeous music visualizer that uses Fast Fourier transforms to render the sound waves.

music

In the eleventh hour, we added randomly generated anime video clips to the visualizer background, which turned out to be a great idea, as more than one kid last night stopped dead cold in front of our display, gawking. I don’t blame the kids – the end result was pretty hypnotic.

Result

The event was fun! It was great to see all of the exhibits that different teams put together. It was a cool opportunity for Lucid Agency to get our name out there in the STEM community, and hopefully encourage kids to embrace technology. I also got to meet Loki, which was a personal highlight for me, despite that uneasy grimace on my face:

loki

Lucid Agency
[email protected]
No Comments

Sorry, the comment form is closed at this time.