
Show HN: TerrainVer – Generate Worms-Style Cartoon Terrain in JavaScript - juliango
https://juliango202.com/terrainver/
======
swyx
this is a pretty faithful reproduction. I like it! a lot of solid pointers to
great algorithms in here.

\- perlin noise:
[https://en.wikipedia.org/wiki/Perlin_noise](https://en.wikipedia.org/wiki/Perlin_noise)
for generating terrain bumps

\- flood fill for painting terrain on top of noise :
[http://lodev.org/cgtutor/floodfill.html#Scanline_Floodfill_A...](http://lodev.org/cgtutor/floodfill.html#Scanline_Floodfill_Algorithm_With_Stack)

\- convolutions with webgl shaders
[https://github.com/phoboslab/WebGLImageFilter](https://github.com/phoboslab/WebGLImageFilter)

\- dilation filter

\- "closing" in image processing
[https://en.wikipedia.org/wiki/Closing_(morphology)](https://en.wikipedia.org/wiki/Closing_\(morphology\))

\- deciding in the hqx algorithm for anti aliasing
[https://en.wikipedia.org/wiki/Hqx](https://en.wikipedia.org/wiki/Hqx)

\- texturing

\- halton sequences for even distribution of worms
[https://en.wikipedia.org/wiki/Halton_sequence](https://en.wikipedia.org/wiki/Halton_sequence)

\- sine wave for water

all done in the browser.

github repo at
[https://github.com/juliango202/TerrainVer](https://github.com/juliango202/TerrainVer)

------
lurquer
Excellent demo.

I've been working on a procedural terrain generator for fun. Voxel-based. Just
big chunks of 16x16x256 sections. Like minecraft.

My goal is create a function that will take any 3D integer coordinate and
output a particular type of block for that coordinate... be it air, granite,
dirt, etc.

The constraint, however, is that the only knowledge the function has is the
coordinate; that is, it has no knowledge of adjoining blocks.

The second constraint -- (because one can never trust floating point) -- is to
have the function (and the requisite RNG) use only integers between 0 and
100,000 with no calculations that involve fractions. This constrain is to
guarantee that with a given seed, the same terrain will be generated on any
system. Rolling hills and mountains and caves and all the typical minecraft
kinda stuff is trivial. But, I'm trying to get my magical black-box function
to create buildings with walls, windows, etc. that's trickier.

Have you come across anything like this?

~~~
progval
Why no fractions? If you are worried about loss of precision caused by
floating-point numbers, you can use exact fractions. For instance, there is
"mpq" in GMP (for C), the "fractions" module in Python's stdlib, or you could
hand-write a small fractions library yourself.

~~~
lurquer
Agreed. It's a sort of silly constraint. Not truly necessary. But, there are
other aspects of the project that make it much easier to completely and
utterly do away with floating point.

------
codetrotter
The fact that all of the illustrations in the article update when you generate
a new terrain is neat attention to detail :) Good article, thanks for it and
for open sourcing your code!

~~~
juliango
Thanks for noticing :) This article actually started as a debug page where I
displayed all the images to see what was wrong.

------
mpetrovich
I love this. Recreating old games makes you really appreciate the techniques
and effort put into even the small things that one often takes for granted.
Doing it yourself is a great way to learn real-world applications of abstract
math/compsci algorithms.

I hope others build on this in the future and add the worms gameplay
mechanics. One of my favorite games when I was younger.

------
jastanton
This is great! About 6 years ago I created a worms destructible terrain using
canvas. Still up on my website all these years later, no promises on code
quality though :)

[http://jastanton.com/experiments/Destructible-
Terrain/](http://jastanton.com/experiments/Destructible-Terrain/)

~~~
etaioinshrdlu
My unfinished clone:
[https://kmbaragona.gitlab.io/volley/](https://kmbaragona.gitlab.io/volley/)

WebGL (three.js) based. Keyboard input, arrow keys + space to fire. (no use on
any mobile device) Terrain operations are done on vector svg-like objects, not
pixels or polygons. Physics is also done in vector space. Terrain is converted
to polygons just before rendering.

Was kind of fun :) With the right terrain the physics let you drive your tank
round and round in a loop with centripetal force.

