What a lovely web experience! I adore the style and artistry of the illustrations here, and the attention to detail to the little things like the clack of the wheels increasing in frequency with the speed, the squeak of the brakes and the different noise when the tram goes over the wooden bridge etc.
I do wish there was a small prompt on screen right at the start with an indication of how to start off the animation. I clicked, dragged and swiped everywhere on the screen before I finally clicked the (i) button to see it was all keyboard driven! :) But perhaps that was deviously intentional, as it gave the site time to load up all the assets it needed in the background?
This is really great! I love "toys" like this on the web, they were prominent in Flash, but then the web looked like bootstrap, and now like Material Design... Sometimes, a little bit of web creativity is what you need to brighten the day.
Beautiful, well done. I love that we can now publish short interactive-ish experiments like that on the plain web. Also, I love the little details - the wheels conform to the shape of the track and the pantograph conforms to the shape of the wires above.
Mean rant below:
However, this suffers from terrible hitching and framerate issues. I tried it both in Firefox and Chrome (latest stable release for both), on Windows, on a i7-6700k cpu and nVidia GTX 1080ti gpu. The framerate just isn't stable and there are random hitches of one or two dropped frames. By itself this wouldn't be that big of a problem, but combined with the very contrasting art style (black on full white), it started giving me a headache and making me seriously sick after a short while. Even when not dropping frames, the motion was quite juddery, e.g. I saw the nearby poles jumping from position to position. I won't ask that the authors resolve the frame-rate issues, because I suspect it's an inherent issue to the browsers. Instead I would suggest that motion blur be implemented to hide the harsh frame-to-frame transitions and less contrast be employed between foreground and background (maybe make the background a bright grey rather than 100% full white).
Thanks so much for the kind words and also the performance analysis! I agree with you 100% that the motion can be jarring and unpleasant. I'm yet unsure as to what exactly is causing the issue, but I believe it's something with regards to GC that is just over my head for the moment. Resolution also plays a huge factor, and as a temporary measure I've added a half-res toggle in the info panel. This helps out especially with high DPI monitors.
Whilst it shouldn't be surprising, I'm astounded as to how much of a science and balancing act it is to achieve frames that at least ~feel~ smooth, especially on web browsers.
I'll be working away as much as possible to try and make things silky all over. Thanks for your patience until then!
I've got a 32GB iMac here, and in Chrome, on full screen on my 27" display, the animation worked smooth as butter. In fact, the smooth scrolling added to the whimsical, arty style of the site for me, leading to a great experience.
EDIT: Actually, I just tried it again in entirety, and noticed some juddering from time to time. However, when I am looking at the beautiful background artwork (which is most of the time), that juddering is less obvious. I guess it depends if you are looking at the background art or the foreground animation as to whether it is really apparent for you.
I had your same experience, it looked choppy to me.
I guess people who have a "gaming capable" PC will notice the micro-stuttering more than others, because they are used to fluid animations.
It's interesting how no one minds about low FPS when watching a movie (24 FPS is "cinematic"!), but when in a game (or any interactive experience where you provide a nontrivial amount of input) suddenly FPS has a huge impact on the experience.
It's a very nice demonstration. Very pleasant and aesthetically pleasing.
I don't know that the title here is really quite right. "Demo" is probably closer to what this is, maybe "Interactive Animation". When I think of a simulation I'm typically thinking of some effort around achieving realism and a much higher degree of freedom of action. This isn't an effort to achieve any of that. This is an artistic impression of such a trip. I can interact with it, but there is very little freedom of choice. Also the rendering is "drawn" 2D.
> Short Trip is the first instalment in a collection of interactive illustrations created for the web. It has been created as a study into capturing the essence of graphite on paper within a digital context, and to learn more about web-based graphics technologies. Short Trip will run on most devices supporting WebGL, including mobile devices.
> Have a look at alexanderperrin.com.au/paper/shorttrip
> Due to the current limitations of both WebGL technologies and my understanding of them, there’s bound to be issues found here and there. If you’ve found something particularly odd and have a spare few minutes it would be greatly appreciated if you tell me about it here. At the moment there’s a few known issues particularly relating to Android support. I hope that these will improve with time.
It would be nice if it didn't require any input from me; I feel guilty skipping stops, but it brings me out of the reverie that I have to play a game, instead of just enjoying the scenery roll by.
Loved it. Does anyone get smooth scrolling, or does the animation stutter even on high end machines? Not complaining, just trying to figure out if I have the wrong settings for my PC.
Stutters like mad for me, so bad that I closed it even though it seemed really sweet. Chrome and Firefox on Windows, recent i7 and higher end nvidia GPU.
Yes, I live in Europe and can confirm that this is much like my morning commute. I felt deja vu. Maybe it's about me? I thought nobody noticed I'm a cat.
So beautiful. It stopped loading at 93% on my phone (Android 7.1.1, latest Firefox) but it works well on my laptop.
Nice illustrations. The sounds are also great. I could spend the night driving the car back and forth but I've got work to do and I already spent too much time on this :-)
Some nice illustrations and animations there, but not really an interactive sequence like this one in the OP.
Also, I know it is a take on a popular children's fable, but this one seems to have a not so subtle political message underlying it, and it also seems to be a lot darker (I only got up to the end of page 3). I don't know - it seemed to me in this one that the rats seemed to be a metaphor for a particular socio-economic cultural group. I could be wrong, but something about it made me a little uneasy.
A very pleasant ride! I didn't think to stop for passengers at the first few stops. I feel a bit guilty about that. Meh... they should have read the "express service" sign.
Fails in Chrome Version 60.0.3112.113 (Official Build) (64-bit) with the error:
"My apologies, your device doesn't support WebGL, which is what Short Trip relies on! Try updating it, or try another one."
WebGL works all across the web, so you must be doing something wrong in detecting it. This is on a Mac running Yosemite (I know, company won't let me upgrade!) with plenty o' memory and lots o' CPU available.
This is one of the things I see on HN where all I can think is "how the flying f..k does this even work" and "what a madness of assets, that must have taken months to record".
For what its worth, the simulator even does physics (try not pressing right on a hill, for example - the tram will roll backwards, and brake much faster than on plain level)... awesome.
[+] [-] cyberferret|8 years ago|reply
I do wish there was a small prompt on screen right at the start with an indication of how to start off the animation. I clicked, dragged and swiped everywhere on the screen before I finally clicked the (i) button to see it was all keyboard driven! :) But perhaps that was deviously intentional, as it gave the site time to load up all the assets it needed in the background?
[+] [-] jen729w|8 years ago|reply
[+] [-] chairmanwow|8 years ago|reply
[+] [-] Olivia56|8 years ago|reply
[deleted]
[+] [-] Fifer82|8 years ago|reply
[+] [-] Asooka|8 years ago|reply
Mean rant below: However, this suffers from terrible hitching and framerate issues. I tried it both in Firefox and Chrome (latest stable release for both), on Windows, on a i7-6700k cpu and nVidia GTX 1080ti gpu. The framerate just isn't stable and there are random hitches of one or two dropped frames. By itself this wouldn't be that big of a problem, but combined with the very contrasting art style (black on full white), it started giving me a headache and making me seriously sick after a short while. Even when not dropping frames, the motion was quite juddery, e.g. I saw the nearby poles jumping from position to position. I won't ask that the authors resolve the frame-rate issues, because I suspect it's an inherent issue to the browsers. Instead I would suggest that motion blur be implemented to hide the harsh frame-to-frame transitions and less contrast be employed between foreground and background (maybe make the background a bright grey rather than 100% full white).
[+] [-] alexanderperrin|8 years ago|reply
Whilst it shouldn't be surprising, I'm astounded as to how much of a science and balancing act it is to achieve frames that at least ~feel~ smooth, especially on web browsers.
I'll be working away as much as possible to try and make things silky all over. Thanks for your patience until then!
[+] [-] cyberferret|8 years ago|reply
EDIT: Actually, I just tried it again in entirety, and noticed some juddering from time to time. However, when I am looking at the beautiful background artwork (which is most of the time), that juddering is less obvious. I guess it depends if you are looking at the background art or the foreground animation as to whether it is really apparent for you.
[+] [-] mastazi|8 years ago|reply
I guess people who have a "gaming capable" PC will notice the micro-stuttering more than others, because they are used to fluid animations.
It's interesting how no one minds about low FPS when watching a movie (24 FPS is "cinematic"!), but when in a game (or any interactive experience where you provide a nontrivial amount of input) suddenly FPS has a huge impact on the experience.
[+] [-] mattdesl|8 years ago|reply
Stuttering in WebGL is not an inherent issue in browsers. :)
To me it seems like something in their code is thrashing the GC. Maybe the `getLUT` function which creates a new 100-length array every frame...
[+] [-] cyannaro|8 years ago|reply
[+] [-] chrisb|8 years ago|reply
[+] [-] sbuttgereit|8 years ago|reply
I don't know that the title here is really quite right. "Demo" is probably closer to what this is, maybe "Interactive Animation". When I think of a simulation I'm typically thinking of some effort around achieving realism and a much higher degree of freedom of action. This isn't an effort to achieve any of that. This is an artistic impression of such a trip. I can interact with it, but there is very little freedom of choice. Also the rendering is "drawn" 2D.
[+] [-] jakelear|8 years ago|reply
[+] [-] Theodores|8 years ago|reply
http://alexanderperrin.com.au/portfolio/short-trip/
> Three.js, Javascript
> Short Trip is the first instalment in a collection of interactive illustrations created for the web. It has been created as a study into capturing the essence of graphite on paper within a digital context, and to learn more about web-based graphics technologies. Short Trip will run on most devices supporting WebGL, including mobile devices.
> Have a look at alexanderperrin.com.au/paper/shorttrip
> Due to the current limitations of both WebGL technologies and my understanding of them, there’s bound to be issues found here and there. If you’ve found something particularly odd and have a spare few minutes it would be greatly appreciated if you tell me about it here. At the moment there’s a few known issues particularly relating to Android support. I hope that these will improve with time.
> Regardless, I hope that you enjoy your journey.
[+] [-] throwanem|8 years ago|reply
[+] [-] troymc|8 years ago|reply
[+] [-] mih|8 years ago|reply
[+] [-] pavel_lishin|8 years ago|reply
[+] [-] teh_klev|8 years ago|reply
[spoiler warning]
It's nice that you're not allowed to walk the cat over the cliff at the end and ting the bell.
[+] [-] a_t48|8 years ago|reply
[+] [-] Tomte|8 years ago|reply
[+] [-] jannyfer|8 years ago|reply
[+] [-] problems|8 years ago|reply
[+] [-] JoshTriplett|8 years ago|reply
[+] [-] wastedhours|8 years ago|reply
[+] [-] dom96|8 years ago|reply
[+] [-] unknown|8 years ago|reply
[deleted]
[+] [-] Lorin|8 years ago|reply
[+] [-] kroltan|8 years ago|reply
[+] [-] d-sc|8 years ago|reply
[+] [-] jjallen|8 years ago|reply
[+] [-] toddmorey|8 years ago|reply
[+] [-] seattle_spring|8 years ago|reply
[+] [-] troymc|8 years ago|reply
[+] [-] whatgoodisaroad|8 years ago|reply
[+] [-] ehnto|8 years ago|reply
[+] [-] pmontra|8 years ago|reply
Nice illustrations. The sounds are also great. I could spend the night driving the car back and forth but I've got work to do and I already spent too much time on this :-)
[+] [-] Rifu|8 years ago|reply
[0]https://en.wikipedia.org/wiki/Densha_de_Go!
[+] [-] twfarland|8 years ago|reply
[+] [-] neocodesoftware|8 years ago|reply
http://hobolobo.net
[+] [-] cyberferret|8 years ago|reply
Also, I know it is a take on a popular children's fable, but this one seems to have a not so subtle political message underlying it, and it also seems to be a lot darker (I only got up to the end of page 3). I don't know - it seemed to me in this one that the rats seemed to be a metaphor for a particular socio-economic cultural group. I could be wrong, but something about it made me a little uneasy.
[+] [-] chuckevolved|8 years ago|reply
[+] [-] bane|8 years ago|reply
[+] [-] jaza|8 years ago|reply
[+] [-] madamelic|8 years ago|reply
[+] [-] rkagerer|8 years ago|reply
[+] [-] mshenfield|8 years ago|reply
[+] [-] BFatts|8 years ago|reply
"My apologies, your device doesn't support WebGL, which is what Short Trip relies on! Try updating it, or try another one."
WebGL works all across the web, so you must be doing something wrong in detecting it. This is on a Mac running Yosemite (I know, company won't let me upgrade!) with plenty o' memory and lots o' CPU available.
[+] [-] mschuster91|8 years ago|reply
For what its worth, the simulator even does physics (try not pressing right on a hill, for example - the tram will roll backwards, and brake much faster than on plain level)... awesome.