Star Wars GUI/MultiTouch UI Controls (again)

MultiTouch UIIf you follow this blog you may remember I posted this along with a Vine of some UI controls I was working on about a year ago. I was inspired to build them after seeing this real-time rendering demo for Star Wars by LucasFilm (check it at 01:19).

I’m revisiting this project at the moment which has been really well received and has had lots of interest from UI people to interactive infographics designers and I thought I would share the actual demo rather than a Vine. Currently the UI controls are built, controlled and animated with CSS using Greensock GSAP (they happen to be in Adobe Edge Animate but because they are JavaScript ‘classes’ they can be used anywhere) and they’re making full use of the ThrowProps plugin and the Draggable utility. I was fairly sure I had already posted the actual JS demo but it turns out I hadn’t which means I’ve gone mad.

The reason I am revisiting this project, apart from being really fun to work on, is that I want to build them all in a slightly different way and I want to build build using SVG. The current components are OK (one or two of them might be a bit buggy) but I wanted to post them so that you can have a go.

Over the next few months I will pick one, release the code for that component and do a breakdown of how it works and how I built it. I intend to have built the new version of that component in SVG by then which I will also share in terms of how I built that.

I heartily recommend you give it a whirl on an iPad as it’s multitouch (this was designed to run on a tablet and is fixed at iPad dimensions) but it does a fine job on desktop too.

All the components are can be instantiated in a dynamic way (the sliders can be horizontal or vertical, you can define their dimensions, ranges, assign their outputs to whatever you like and even define their color):

UIRange.js

UISlider.js

UIDial.js

UIIncrement.js

UITimeline.js (not shown here because it has a stinky bug in it.)

UINotch.js

UIPlane.js (again not shown and I can’t remember why – probably another bug.)

SimpleCube.js

If any of these are of particular interest then leave a comment or send me a message and I’ll deconstruct the most popular one first.

Check out the MultiTouch UI Controls Demo

7 thoughts on “Star Wars GUI/MultiTouch UI Controls (again)

  1. Hi Chris
    Some incredibly inspiring demos on your blog here.. Did you ever get round to writing up an article explaining how you created these components? If not are you selling this anywhere so I can disect it myself to get a better idea?

    1. Thanks for your kind words and no, I haven’t written them up yet – client work has got the better of me recently so I’ve had no time to do anything else.

      I do intend to rebuild these purely in SVG (I’ve made a tentative start here http://codepen.io/chrisgannon/pen/pvpgBx – dissect away!) – these kinds of components really need to be resolution independent and pure CSS just doesn’t really cut it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s