
Scenic Tram Simulator - fredley
http://alexanderperrin.com.au/paper/shorttrip/
======
cyberferret
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?

~~~
jen729w
Just shows you the ‘power’ of touch. On my iPad, I didn’t even think about it.

------
Fifer82
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.

~~~
andybak
The ebb and flow of various conventions for utilitarian or practical sites
bears little connection with the amount of creativity present on the web.

"Shall I make a beautiful illustrative web-based experience or shall I make a
site using Bootstrap?" said nobody ever.

~~~
problems
It's not about what any individual person may say, but about what gets
produced in the end. Pure HTML and JS tools like Bootstrap make it easy to
crank out basic web templates for developers, while tools like Flash made it
easier for designers to make beautiful toys.

~~~
fredley
This is a really good observation. Flash allowed a designer to work in their
tool and export that content directly to the web. Back in the day you'd buy a
cheap FTP-enabled web hosting account, and upload your exported index.html and
content.swf as-is and that would be it.

As a designer these days I don't think there's anything like that kind of
workflow available any more.

------
Asooka
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).

~~~
alexanderperrin
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!

~~~
cyberferret
Just curious - did you draw all this artwork yourself? It is exquisite. If so,
did you draw onto paper then scan in, or did you use a tablet etc. to create
vector drawing that you then animated?

------
sbuttgereit
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.

~~~
jakelear
The title of the piece is actually "Short Trip" as seenin the title tag and
the end of the experience. It seems the HN submitter chose "simulator."

------
mih
Quite impressive, especially paying attention to little details like the clock
showing the local time.

~~~
cyberferret
Dang, didn't notice that until you pointed it out. Yes, that is really cool.

Also, love the little animated cats along the path. At one stop, I saw an 'old
lady' cat off to the left of the screen moving fast towards my tram. Perhaps
she was rushing to get on, but I took off on my next leg of the journey
regardless, and noticed that as soon as I started moving, she stopped running
with a somewhat dejected slump to her stance. Probably totally random and
coincidental, but I'd like to think she was trying to run and catch the tram
and missed it!

~~~
ehnto
It really is like public transport!

------
pavel_lishin
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.

------
teh_klev
What a lovely thing to play with.

[spoiler warning]

It's nice that you're not allowed to walk the cat over the cliff at the end
and ting the bell.

~~~
Tomte
Where do you get the cat?

~~~
jdmulloy
I believe they are referring to the character you are controlling. It doesn't
let you walk off the cliff.

------
jannyfer
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.

~~~
jjallen
I got no stuttering on my 2017 MBP

~~~
joevo2
2017 MBP LOL well it runs fine on my 2013 MBA

~~~
nopassrecover
Ran fine on my iPhone 5S, although admittedly that's a far lower resolution.

------
toddmorey
Beautiful illustration and execution. I was hoping for a bit of discussion on
tools used to create this. Looks like it makes clever use of three.js.

------
seattle_spring
I just got back from a good, long trip to Europe. This captures the spirit
quite nicely.

~~~
troymc
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.

~~~
valesco
Ah ah, where do you live? My guess would be Switzerland or Austria.

------
whatgoodisaroad
In tone this reminds me of the fable of the "Cat Town" in the novel "1Q84" by
Haruki Murakami.

~~~
ehnto
I picked up a copy because of your comment. I am looking forward to diving in!

------
pmontra
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 :-)

~~~
larkeith
Huh, I was able to load it (and even run it, they thought to put in touch
controls!) on Android 6.0.1, Chrome 59.0. I'm quite impressed at how smoothly
it ran on a mobile device.

------
Rifu
If this awakened feelings inside of you of driving people from station to
station, may I suggest Densha de Go[0]

[0][https://en.wikipedia.org/wiki/Densha_de_Go](https://en.wikipedia.org/wiki/Densha_de_Go)!

------
twfarland
Very calming way to start the day. Almost like a guided meditation.

------
neocodesoftware
loved that? you will love this!!!

[http://hobolobo.net](http://hobolobo.net)

~~~
cyberferret
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.

------
bane
I need much more of this kind of lovely thing in my life.

------
jaza
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.

~~~
madamelic
Interactive MTA Conductor: Unannounced skipping stops and shows up when it
wants to.

------
mshenfield
This was such a refreshing experience. The sound work especially brought
things home for me.

------
BFatts
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.

------
mschuster91
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.

------
chi18
I really wanted to drive it off the cliff.

------
sambf
It was much needed this morning, thank you for this wonderful piece of
Internet!

------
the_arun
What an awesome experience! In fact you could reverse it too. Splendid!

------
kps
I don't see it in the help, but Space also does something.

------
jay-anderson
You can click on the bell at the end. Besides letting passengers on and off
was there anything else along the way that was interactive like that?

~~~
cyberferret
Press the spacebar when in the tram...

------
gt_
Can someone recommend to me what I can to do view this despite the bandwidth
exceeded? I am not sure my life can go on without.

~~~
fredley
It's back up, for me at least.

------
qualitytime
Lovely! Really enjoy playing it. Great work.

P.S. you have a erroneous </div> tag in the html source near the credits
block.

------
sabujp
i didn't stop for anyone on the way back, am i a bad person?

~~~
TeMPOraL
To absolve your conscience, imagine your tram had "TECHNICAL RIDE" written on
it.

------
timvdalen
Unfortunately, I'm getting a Cloudflare timeout on
[http://alexanderperrin.com.au/paper/shorttrip/static/img/tre...](http://alexanderperrin.com.au/paper/shorttrip/static/img/trees.png)

------
dag11
I love this so much.

------
aaron695
Technical write up?

[edit] some info here - [http://alexanderperrin.com.au/portfolio/short-
trip/](http://alexanderperrin.com.au/portfolio/short-trip/)

------
spamtarget
To be honest, it's kinda mediocre, the gameplay is ok, but really linear, the
color filter feels grayish and the characters are really two-dimensional

------
fnord77
Doesn't appear to work on Google chrome on Linux Mint.

------
marnett
This was really pleasant. Thanks for sharing this.

------
wiz21c
Is the scenery a huge one-time drawing or is it generated as the train
progresses ? In any case it's truly well done !

------
dhekir
I've noticed it had several upvotes during the interval in which it has been
hugged to death. Is this expected?

~~~
ljf
Could well have been that they were returning from playing it and were up
voting it then.

------
blumomo
Lovely!

Did you notice that

... wall clocks are showing your local time?

... passengers walk towards you (the driver) when you miss their stop?

------
katelynsills
What kinds of libraries did you use to build this? I see you have a webpack
bundle.

~~~
alexanderperrin
Webpack was certainly invaluable when developing this! The ThreeJS framework
was used for everything graphics and animation, however. I absolutely love
working with it.

~~~
anc84
How much of the graphics is procedurally generated versus sprites?

------
peternicky
Wow! This is such a lovely, inspiring experience. Is the source available?

------
nippples
I wish there was the opportunity to drive myself off the cliff at the end. :(

------
aryehof
Loved this. Many thanks to the author for brightening my day!

------
speps
Title should be changed to "Short Trip".

~~~
falsedan
mailto:hn@ycombinator.com

------
mewwts
This is insane. Extremely well done!

------
AJRF
Beautiful

------
kinard
Amazing, I loved this.

------
rozap
that was a good thing

------
Shinchy
That was fantastic.

------
m23khan
beautiful, beautiful work! Well done Sir!

------
loeg
Please include a volume control.

------
FraKtus
The site seems down...

------
make3
Hugged to death

~~~
make3
guys stop downvoting me xD it was true when I wrote this

------
sheraz
Loved to death. Bandwidth limit exceeded.

~~~
perryprog
Poor fella. Couldn't handle all the hugs.

~~~
DigitalJack
A lot of people on hacker news have trouble receiving affection.

------
robputt
Damn, bandwidth eaten for the month, I'll check back in November :-D, but
would like to see this.

~~~
fredley
It's back up, for me at least.

------
Exuma
Damn I missed it... why do people ever host stuff on this trash? :(

~~~
mulmen
Is this your way of offering to pay for hosting?

~~~
Exuma
You don't have to pay, just put it on github pages.

