8 ms·
HTML5 Version of the Tron:Legacy Boardroom Scene
- jarym 9y agoReally damn impressive!
- raykanani99 9y agoHoly cow. Did you use a charting framework for the stream feed? How did you get such a pretty globe?
- arscan 9y agoAll hand built, including the globe. I split that out into it's own library over at https://github.com/arscan/encom-globe https://github.com/arscan/encom-globe * edit: I did leverage quite a few great libraries, namely three.js... just none that are charting specific
- raykanani99 9y agobeauty
- thinkpad20 9y agoThe term "mad skills" comes to mind. I would love to see a breakdown of some of the techniques he used to construct this.
- pmattos 9y agoVery cool stuff... even `ls` works in the shell ;)
- DannyDaemonic 9y agoThis is beautiful. There needs to be a plugin api for this so we can make our own using charts using the built in command line and associated widgets.
- porlune 9y agoI would love that, this is UI art.
- sandGorgon 9y agoi would pay for this - as a HUD for company stats
- arscan 9y agoGlad to see some people are getting a kick out of this. I built it a few years back while learning webgl, css3, node.js, redis, and modern (at the time) js tooling. Source over at https://github.com/arscan/encom-boardroom https://github.com/arscan/encom-boardroom I didn't build this with any real practical application in mind at the time. But some people have reused components in their own projects over the years, particularly the globe (https://github.com/arscan/encom-globe https://github.com/arscan/encom-globe).
- 52-6F-62 9y agoNot going to hesitate to toot your horn here, man. This is extremely well done! It's all great! That globe as an interface itself is worth congratulations and should be an envy. I'll have to look more into your work.
- djsumdog 9y agoI liked the mobile orienteering detection. Looks great on Firefox/Android.
- arscan 9y agoThanks. I use it on a couple of my projects [1]. Happy to take PRs if anyone has ideas for improvement. [1] https://github.com/arscan/pleaserotate.js https://github.com/arscan/pleaserotate.js
- krock 9y agoAll awesome stuff! I'm currently working in the travel industry and immediately after seeing this I'm planning on using the globe for a flights dashboard. ;)
- arscan 9y agoGreat! If you end up using it let me know.
- tarruda 9y agoPutting the quality of your work aside(which is really amazing), I applaud the self discipline required to develop such a big project on free time alone. Hope to get there one day.
- mattnewton 9y agoThis is super cool, I love the from aesthetics (if not the movie). How do you make you or tapping not zoom again? Is there a HTML meta tag or something? It would improve the usability of the keyboard on mobile.
- edpichler 9y agoWow, beautiful!
- thatcherc 9y agoAre there any efforts to make movie-type window styles for real use? The Tron:Legacy style would be a fun one to have, as well as the one used in the computers in Westworld (similar light-blue-on-black)[1] and Interstellar [2]. I'm sure it's a more difficult process than I'm imagining, but it would be really cool to be able to use the window and interface themes of the computers in your favorite show or movie, especially since some have such great designs. [1] - https://www.youtube.com/watch?v=Ikup60uEg0c https://www.youtube.com/watch?v=Ikup60uEg0c [2] - https://youtu.be/bmz9lMP6aQU?t=2m4s https://youtu.be/bmz9lMP6aQU?t=2m4s, visible for a brief second just after 2m4s
- Rjevski 9y agoThe main problem with this kind of UI is information overload (which is the desired effect in movies, since the viewer isn't actually supposed to "use" nor understand all of the info displayed). There's no way to make this usable unless you lower the amount of info displayed, but then it will loose its "cool" factor.
- naikrovek 9y agoA good designer, paid to do so, could create very cool and useful UIs, I am sure. Ultimately, it will depend on your own definition of "cool" and "useful" as to how well any one UI suits those labels.
- martin_ky 9y agoExactly. These fictional UIs are designed for a single end - to look good on camera. I think there is an inverse correlation between "cool" and "useful" - the "cool" often distracts from the "useful". While this kind of UI could work for something trivial like a simple calculator or alarm clock, in my experience it does not work for serious applications. As works of art however, these things are a beauty to look at - http://sciencefictioninterfaces.tumblr.com/ http://sciencefictioninterfaces.tumblr.com/ I had this idea first back when I saw Star Trek The Next Generation and its slick flat computer panels, called "okudagrams" after their designer, Michael Okuda - https://en.wikipedia.org/wiki/LCARS https://en.wikipedia.org/wiki/LCARS. I tried to reproduce the look in a note-taking application. It didn't work. The UI was dominated by these large colored buttons and arches, with too much contrast against the black background, leaving too little room for the actual content.
- th0ma5 9y agoThey used Processing some I think in the movie which now has a WebGL version.
- fizixer 9y agoYou could add a video stream from a live online news channel on the top right? (on my side the top right was pretty much empty)
- samstave 9y agoGitHub top right was full of github user avatars
- samgranieri 9y agoHoly shit! This is amazing. Great job
- deleted 9y ago[deleted]
- emilioolivares 9y agoWhat, the .js file for the globe itself is 43 thousand lines of code. Was this a weekend project? How do you find the time? Very well done my friend. (https://github.com/arscan/encom-globe/blob/master/build/encom-globe.js https://github.com/arscan/encom-globe/blob/master/build/enco...)
- arscan 9y agoI used browserify to bundle in Three.js and all the other dependencies. Yes, it's an embarrassingly large JS package. There are probably better ways of doing this, but being a weekend project I decided that it wasn't worth my time to investigate ;-) If you look at the commits, I just tried to push a few lines of code every day (nights, weekends) over the course of a couple of months. It adds up.
- unkown-unknowns 9y agoI am quite stupid, I always thought that when people on HN talked about their weekend projects they meant something that they'd made in a single weekend. Only now upon reading your comment do I realize that it means something one is working on over any number of weekends. I've been on HN for about 7 years :/ All this time I've been wondering why it takes me weeks of weekends to complete what others do in a single weekend even though I regard myself as highly competent at both software engineering and programming. Then it turns out I had simply misunderstood the meaning of "weekend project". Oh and also, very nice project, kudos.
- metmac 9y agoSo cool to see this revived. I remember stumbling upon it awhile back.
- cjsuk 9y agoYou got in :)
- Splines 9y agoSubreddit of movie-fake-UI: https://www.reddit.com/r/FUI/ https://www.reddit.com/r/FUI/
- baalimago 9y agoI've not even seen tron since im too young... but all i can say is that i'm mighty impressed
- mixmastamyk 9y agoThe legacy film came out in 2010 or so.
- ninju 9y agoThe original TRON movie came out in 1982 http://www.imdb.com/title/tt0084827/ http://www.imdb.com/title/tt0084827/ In 2010 there was a sequel movie Tron: Legacy http://www.imdb.com/title/tt1104001/ http://www.imdb.com/title/tt1104001/
- Kenji 9y agoThe funny thing is that it loads faster and has higher fps than many websites that display simple blogposts and a couple of images, but pull in literally megabytes of JavaScript and other bloat. People, learn from this. Seriously. The web doesn't have to be slow if you put effort into it.
- kang 9y agoReminded me of top unixporn post https://www.reddit.com/r/unixporn/comments/2sz5xo/bspwmofxoc_i_love_sci_fi_movie_interfaces_so_i/ https://www.reddit.com/r/unixporn/comments/2sz5xo/bspwmofxoc...
- hobarrera 9y agoIt _looks_ really cool, but I feel that with all the extra bells and whistles taking up so much screen estate, I'd need a 50" monitor on my desk just to actually _use_ ~27".
- BallyBrain 9y agoThis kind of thing would make a great screensaver
- deleted 9y ago[deleted]
- nautilus12 9y agoIf only we could get a version of this to render in the terminal so we could hack our workstations to actually look like this. I use tmux pretty heavily. Id love it if panes looked like this
- cdevs 9y agoI love this.
- deleted 9y ago[deleted]
- collinmanderson 9y agoFun to see Event Source show up here. I feel like WebSockets are all the craze, but Event Source seems to be a really simple alternative that uses only HTTP.
- arscan 9y agoYes! I started with WebSockets, but Event Source met my needs and is much simpler.
- bluescreenofwin 9y agoMan this brings me back.. Thank you for creating this!
- hughw 9y agoMy admiration is unbound. I have one reservation -- I wish it would handle history correctly. I wish each click e.g. github produced a new URL I could email to a friend so they could view the same scene. And then I wish I could hit "back" to recover the landing page. None of this diminishes how beautiful this is, and I'm sure it just wasn't part of what you were trying to explore.
- arscan 9y agoThanks for the feedback! I'll definitely add that if I take the time to add more features.
- Animats 9y agoCheck out Harvard's economic globe.[1] This looks like the globe from this demo, but it's a real interactive tool. [1] http://globe.cid.harvard.edu/?mode=gridSphere&id=PH http://globe.cid.harvard.edu/?mode=gridSphere&id=PH
- Shinchy 9y agoThis is fantastic, really fun to use and would make a cool portfolio website.
- luord 9y agoMan, fantastic. I should probably get into doing something like this in my free time instead of browsing reddit or tvtropes.