If 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).
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):
UITimeline.js (not shown here because it has a stinky bug in it.)
UIPlane.js (again not shown and I can’t remember why – probably another bug.)
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.