
Show HN: Open source balloon simulation with Three.js - alexanderperrin
https://alexanderperrin.com.au/triangles/ballooning/
======
alexanderperrin
A couple of years ago I produced this as a study into procedural heightmaps,
shadow mapping and online geometry loading with Three.js. I had big plans for
it but abandoned it half way.

I found it on my hard-drive the other day and thought it might be worth
putting up in the case that it's of any use to anyone! The project is full of
performance issues and other weird things but hey I hope it's worth something!
Enjoy.

Code lives here: [https://github.com/alexanderperrin/threejs-
ballooning](https://github.com/alexanderperrin/threejs-ballooning)

Works on desktop and (most) mobiles. You can use the arrow keys or touch the
screen to move the balloon.

~~~
salzig
Im surprised, ever and ever again, how well this works on mobile.

~~~
alexanderperrin
Super glad it's working for you! May I ask what sort of device you're using?
I'm quite curious.

~~~
dvh
To give you second data point, it crashes (probably OOM) on my $39 phone.

~~~
swiley
Where do you get a $39 phone?

~~~
dvh
It's myPhone Pocket, Android 6, 512MB ram, 4GB flash. I found it now cheapest
for €42 [1], year ago I found it for €39. The only downside is that default
apps cannot be uninstalled, that makes the phone almost unusable. It was never
locked to any carrier. It's dual sim but I never had sim in it, I use it only
as pocket-wifi-browser (102 grams!) and for app development.

[1] [https://www.gigastore.sk/4-az-48-vcetne/myphone-pocket-
cerny...](https://www.gigastore.sk/4-az-48-vcetne/myphone-pocket-
cerny-4-ips480x8544gb500mb-ram2mpxandroid-6/)

------
lucidstack
Perhaps not as technically impressive, but this [0] other short
game/experience from the same creator is extraordinarily charming and well
produced!

[0]:
[https://alexanderperrin.com.au/paper/shorttrip/](https://alexanderperrin.com.au/paper/shorttrip/)

~~~
mcjiggerlog
That was absolutely beautiful! Props to OP.

------
pasta
Press space to see the world from another side.

Use the left and right to 'steer'.

Also checkout his Short Trip which was posted here some time ago:
[http://alexanderperrin.com.au/paper/shorttrip](http://alexanderperrin.com.au/paper/shorttrip)

~~~
nickthemagicman
How was short trip made? That's super dope

~~~
alexanderperrin
To put it simply, I hand drew the whole thing and then scanned it all in! Took
about 2-3 years of (learning) programming, illustration and general R&D.

~~~
pasta
My kids love it!

 _" Waah stop the traain there is a station coming up!"_

~~~
alexanderperrin
Hahaha that's so lovely! Awesome :)

------
saagarjha
Pretty! There's a lot of little details I appreciated, like the little boats
and piers, as well as the fact that the birds would move to avoid you if you
tried to collide with them.

~~~
alexanderperrin
Thank you! I really wanted to add a bunch of other objects to decorate the
landscape but it was a massive pain to get new models in. Glad you like what's
there :)

~~~
saagarjha
Honestly, I'm not sure that's a loss; there's something very pleasing about
the minimal aesthetic.

------
technotarek
Wow, things have come a long way.

When CSS3 and jQuery first started gaining some traction (<8 years ago?), I
tried a bunch of animations using layered images and image transformations.
One of these "dreams" was of some hot air balloons as well. Desktop only:

[https://technotarek.com/sky](https://technotarek.com/sky) (first balloon
appears at ~10s)

My favorite was a simple tail wag
([https://technotarek.com/cat](https://technotarek.com/cat)).

Edit: noted desktop only

~~~
alexanderperrin
This is really effective! Nice work. Indeed though there are some astonishing
capabilities for the web out there now.

------
atum47
if you change the canvas-container css to display:block you will get rid of
those nasty scroll bars

~~~
alexanderperrin
Haha a fine contributor already made a PR fixing this! Good stuff

------
Pfhreak
I love this low poly aesthetic, and it's been a dream of mine to work on a
little side project that uses it. You might have given me the inspiration to
go out and mess around a bit and see what I can come up with.

I'm curious about your background. I've built games (and hacked SNES games),
but always leaned heavily on others for art and audio, and I'm curious if
those were skills you had coming into your projects.

------
Epskampie
Hey Alexander, this game looks like so much fun!
[https://alexanderperrin.com.au/portfolio/ropejacks/](https://alexanderperrin.com.au/portfolio/ropejacks/)

Aren't you going to finish it?

~~~
alexanderperrin
Hey! If funding came our way we'd definitely look into it! Alas, the project's
been put on a pretty indefinite hiatus. I'm starting to come around to the
idea of just releasing all my unfinished things as open source projects, so
maybe we'll end up doing the same with that one?

Glad you like the look of it though! Perhaps it'll start up again some day...

------
citeguised
Cool! This is nice to just run locally and play around with the parameters. I
know the feeling of rediscovering abandoned sketches and projects, and
thinking that they're not so bad after all.

~~~
alexanderperrin
Glad you got it running ok! There should be heaps to play with.

Yeah! I compare this to a lot of the work I'm doing currently and I start to
wonder what on earth I'm doing... Gotta get back to pointless Three.js
experiments! They were good days.

------
cr0sh
This was amazing; thanks for posting it. Also, I love "Short Trip"!

~~~
alexanderperrin
Thank you for taking a look! :)

------
HipstaJules
Super cute!

------
2019ideas
My buddy is developing a fireworks Sim in js + embedded systems to coordinate
with a fireworks show.

The embedded work is basically done, but he was considering using JS and
three.js, any suggestions/advice?

~~~
alexanderperrin
Ooh cool! That sounds fascinating. It would be valuable to know the context
for which the simulation would be displayed (ie. where, for how long, does it
have user interaction etc.) to make suggestions, but hey if you're just
looking for a good recommendation for a JS rendering/scene-graph/animation
framework then I couldn't recommend Three.js more.

I personally love it for the reason that it doesn't automagically do
everything for you, and in that way if you've got any sort of experience with
computer graphics and game engines then it's got a really gentle and intuitive
learning curve. This said, if you're looking to get up-and-running with
something really quickly or rapid prototype then you might want to look at
something like [https://pixijs.io](https://pixijs.io).

I also wonder, if you're looking to do physical or live performance work then
maybe it would be worth looking into something battle-tested and robust like
Touch Designer? Not free like JS of course, but could be much more suited to a
high-stakes live performance scenario as it sounds like he's putting together.

------
rplnt
Sim is short for simulation. Generally you strip down some elements, but keep
some true to reality. Steerable hot air balloon moving seemingly on its own is
not that. So this is more of an arcade.

