Tempe’s Geeks Night Out: Kinect for Kids
Today is Geeks Night Out in Tempe, which is a derisive sounding event to honor us “nerds” for being the only ones who paid attention in math class in high school and managed to secure a STEM degree, and to encourage other people to do the same. These STEM events always get to me because it’s like “Look what fun things you could maybe do one day!” but IRL it doesn’t tell you how much I cried and drank to get to the position I am today!
Anyways enough complaining about STEM, onto what I actually did for this event.
We had to have some kind of interactive demonstration for kids to see what technology we do at my company, and since I was invited forced to do the entire thing I decided to have some fun with it. I took my dusty Kinect off the wall and put together an easy to use interface with interactive websites that do pretty things when you mouse over them.
The UI of the demo is based off an anime (of course) from a long time ago called .hack//sign which I think must be ten years ago by now. I always thought the OS they used in the anime was particularly well designed for it’s time
I started with a metro interface because that one was designed to work with the Kinect the best but it didn’t quite fit, so instead of the squares I switched to a honeycomb look and it seemed to fit better with the futuristic operating system feel that altimit has.
The backdrop is actually particles.js to make it seem more like an operating system and less like a static page.
See the Pen particles.js by Vincent Garreau (@VincentGarreau) on CodePen.
and I pulled my loading screen design from Battlefield 3
Each of the honeycombs go to a simple code demo some of them using d3.js or other things I’ve pulled off of Codepen that seem colorful enough to entice kids into a lifelong slavery like programming. Each demo has a forward and back button and works very well with the kinect mouse program I managed to finagle into working (it seems that everyone abandoned the kinect back in 2013, most of the programs are dead or abandoned.) An example of one of the ones we have available to play with:
See the Pen deliquescent by Tiffany Rayside (@tmrDevelops) on CodePen.
This was kind of a rushed project, because I was in Hong Kong for a week when I was supposed to be doing the development for this project so when I came back I spent a good day on the only part I cared about which was Future Disco.
I think I love working on music visualizers more than anything. I did a project for my office recently that used a particle cloud and fast fourier transforms in order to pulse to the beat with Coffeescript and SASS. Future Disco started out as a simple interactive visualizer based off of party mode but I added too many special effects and now it’s a full blown discotheque.
Included is a SASS starfield, a SASS animated gradient, and of course the final theme (my favorite) is a random anime webm picker a la AMV Hell that works by randomly picking a webm video and a random spot in the webm video to play. I want to expand the webm concept a little more but I ran out of time before the date of the event.
The visualizer itself and the theme of the visualizer can be controlled by mouse gestures or the keyboard arrows, and it allows for import of your own soundcloud tracks if you don’t care for DJ Amaya (but you should because I really like him and he runs Arch Linux), and of course it’s sharable, for anyone else who wants to see the disco.