Design as configuration

TL;DR: I’ve been enjoying Microsoft’s Xbox Design Lab. See all my nerdy controllers here: https://xboxdesignlab.xbox.com/en-US/designs/Seriema

Note: The gallery view doesn’t support linking from the images, so the caption has the controller name and I’ve left a comment with a direct link to it in Xbox Design Lab.

My favourite project at my previous employer was making a car configurator for BMW. I wish I could share our initial prototype as it was immensely satisfying, but here are some slides showing what we did:

Slides from a company presentation

What I loved the most was all the high quality images for all possible configurations. So no matter what choices the user made, the car looked fantastic. This was back in 2011 so pre-rendered images was the way to go. Now it’s 2016 and Microsoft just launched the Xbox Design Lab which allows you to design your own controller and see it update in realtime in 3D. It felt so great that I’ve been playing with it all night and woke up early full of ideas for thematic controllers!

My full Xbox controller gallery at Microsoft’s Xbox Design Lab.

Captain 💀💩L

I naturally started with red and black, as I always found that combination stunning. It’s not surprising that Deadpool picked that as his suite colours when he copied honoured Spiderman.

Deadpool 1

Deadpool 2

My Deadpool reference

He’s got a more subtle yet stunning variation in Uncanny X-Force, but it’s a more subtle reference.

My Favourite Canadian (on the left) X-Force reference

Deadpool X-Force

Batman, Robin, and Nightwing

I could probably do a whole gallery of just the Batman family of heroes, but I kept it to what I think would be most recognisable. Today Batman is mostly depicted as black and dark gray with an occasional yellow, but he started light blue and light gray with yellow. So I went for a few variations.

My The Bat/Batman reference

The Bat

My Batman Cartoon reference

Batman Cartoon

My Batman Comic reference

Batman Comic

My Robin reference

Robin

My Nightwing reference

Nightwing

My Nightwing Rebirth/Red Nightwing reference

Nightwing Rebirth

I tried making a Robin Retro but just couldn’t get it to work.

My Robin Retro reference

Robin Retro

Teenage Mutant Ninja Turtles

My TMNT reference image

I kept it simple with just green and yellow, then adding their distinct colours as highlight.

Turtle Michelangelo

Turtle Leonardo

Turtle Raphael

Turtle Donatello

Transformers

My first attempts just playing with the tool looked a lot like a Decepticon, so I rolled with it. I’ll play a bit with the logos later as these turned out to be more references to specific transformers.

My Autobot/Optimus Prime reference

Autobot

My Decepticon/Scorponok reference

Decepticon

The Nintendo and Super Nintendo consoles

I’ve been playing around with RetroPie, with my own UI for it, and hopefully I’ll blog about that soon. The iconic look worked out pretty good IMHO.

My NES reference

NES

My SNES PAL reference

SNES PAL

My SNES NTSC reference

SNES NTSC

Voltron

I remember the Voltron series as a kid, and if you haven’t seen the Netflix remake it’s worth checking out! I wanted to use the coloured X/Y/A/B buttons as a subtle hint to the combined robot form, but the thumbsticks weren’t available in white so the black took over a bit. The lion themed controls turned out pretty good though.

My Voltron reference image

Voltron

Voltron Green

Voltron Blue

Voltron Yellow

Voltron Red

Voltron Black

Fallout

Fallout 1 & 2 are one of my favourite video games of all time. The newer ones are good games in themselves, and highly popular. So it was no surprise that the most voted controller was the Vault 101 (Fallout 3) blue/yellow controller. I felt I could improve it a bit, and also created a bluer version remembering the older games.

My Vault 13 reference

Vault 13

My Vault 111 reference

Vault 111

I really hope to see more of this, although the prices have to go down a bit. $79.99 for one custom controller is pretty pricey, and then add shipping and customs/tax it’s just a no. For now.

Idea: Sleep and save the world

Windows Phone 7 supports running apps and doing bigger data transfers when it’s connected to WiFi and a battery charger. It would be great to have Folding@Home running then! Sure the phone isn’t all that powerfull but it would have a good spread of users if it couldn’t run as a mobile app.

Spotify screensaver attempt #2 made on Way Out West hack 2013 Gothenburg

About 8 months ago me and my friend Jocke did a screensaver for Spotify, based on an idea I had blogged about earlier. The main idea circles around the web player version of Spotify, because it’s the only way we’ve figured out how to do full screen apps. Our last attempt was a bit of a failure, because nothing was animating (which makes for a really bad screensaver). So during Way Out West I gave it another try, this time with Johan and Jonas who I’ve made Spelkalendern with.

Early we concluded that web app was the only way, again. So we changed our bookmarklet into a Chrome extension. As a little cute trick, the Chrome extension automatically adds a “hack” button to the page when you visit the player. When clicked it opens our app and hacks the iframe around it to allow fullscreen.

Now as Chrome plugin

We really should change it to allow any app to go fullscreen. Hmmm…

We had one small problem though. The app SDK for the web player was no longer supported! It took a few hours to hack around it but we were able to solve it by changing the local server a bit.

Last time we mucked around with WebGL and that slowed us down. So this time it was simple HTML and CSS for the styling. We went with a clean look that’s very appealing. Using a service to get cool desktop sized artist photos and then the regular album art of the upcoming songs.

Since it was coded very modular, we could have a view to show various playlists to start with but we could also visualize anything you’re playing (like search results or just start playing inside some artist page). This was useful at my party last weekend.

Spotify screensaver #2 running on my TV through Apple TV

Update: See version 3 of this project.

Spotify screensaver made on Music Hack Day 2013 Stockholm

Some time ago I blogged about an idea of making a Spotify screensaver. This weekend at the MusicHackDay in Stockholm me, Jocke and Vincent finally tried our hands at doing this by creating PartySaver. The first quest was: How do we play music and show music info, in fullscreen?

There’s several ways to play Spotify music: Spotify players (Win, Mac, iOS, etc), Spotify web player, and libspotify. We opted for the web player, but a developer edition which supports apps. We quickly noticed the apps aren’t allowed to run in fullscreen! So we created a bookmarklet that “hacks” the player to allow fullscreen apps.

Then I focused on the new 1.0 API to get the users playlists, and then the tracks from that playlist. While Jocke spent most of his time on WebGL and three.js so we could have the cover arts in a 3D mosaic that would animate and move. Sadly, we never got that far. Regardless, it went pretty good and we’re happy – so we’re going to try a CSS3 version. If we make it, we might even have a sponsor for a real screensaver. The question is, how should it be done?

Regular view in Spotify Web Player

Fullscreen view

Update: See version 2 and version 3 of this project.