Might I recommend some fine CC-BY (vapor|synth|retro)wave music to accompany it?

* https://stratfordct.bandcamp.com/album/airglow-memory-bank

* http://stratfordct.bandcamp.com/album/stratford-ct-melior

* http://stratfordct.bandcamp.com/album/stratford-ct-lux-aesti...

* http://stratfordct.bandcamp.com/album/stratford-ct-secret-se...

* http://stratfordct.bandcamp.com/album/stratford-ct-1-yr-anni...

* http://stratfordct.bandcamp.com/album/stratford-ct-aestas

* http://stratfordct.bandcamp.com/album/literature-prose-ep

Thanks for these! My personal favorite retro-synth mix right now: https://soundcloud.com/quicksexfm/qsfm25

I blindly clicked this at work. Big mistake.

haha. same think happened to me. But I took my headphone out and started to listen to this. It turned out to be good one. :)

Thank you for the links! Since I did not really know where to find CC-licensed music, I did include any music.

You absolutely should – the music made this a lot more awesome :).

If you can, you should really turn on anisotropic filtering, so that the grid-lines on the horizontal surfaces don't go all blurry.

Thanks for posting. This brings back a lot of fond memories for me. The good old days when I was still teaching myself DirectX and OpenGL. Copying and updating ancient demoscene tutorials. These sorts of vector terrain flythroughs, infinite wormholes, looping roller coasters, dancing sinewave text animations and eternally zooming julia sets were my bread and better for understanding geometry and shading. The Moment of Zen here is, as you noted, how little actual code is required to build a world. Keep going ;)

Indeed, keep going, and you may reach this level of awesome:

https://www.youtube.com/watch?v=_YWMGuh15nE

(Quite realistic terrain generated by a 4 kilobyte binary, along with music. Source code and its discussion here: https://news.ycombinator.com/item?id=11848097)

The author then went on to produce a WebGL version in ShaderToy: https://www.shadertoy.com/view/MdX3Rr

He also wrote ShaderToy...

Inigio Quillez' homepage has lots of cool articles about this kind of stuff, so please check it out: http://www.iquilezles.org/www/index.htm

>var f = 0.0015974 Where did this number come from? Is it arbitrary?

Just arbitrary hand-tweaking. It was chosen because I though it looked good. When doing procedural generation like this, you basically just tweak constants 'til it looks good. There's no deeper reason behind it.

I'm hoping that this kind of interaction will be part of one of our first encounters with aliens, sometime in the far future. The aliens would ask why we had done something a certain way and the human answer would be: "Because it looks good".

Another example: bootstrap

Next step is to extract these constants for user to play with.

It is really nice. Thanks for sharing.

Is there any particular reason you did this?

I just wanted to try making something vaporwave-like. I really like the aesthetics of it.

It starts visually glitching out after 10 seconds or so, for me. Doesn't really ruin the experience, but as it appears to get more pronounced with time, I don't think we'll reach infinity. :)

After some time the glitches are reset and the process restarts.

It's very cool up until everything starts going a bit see through - although it does still look good even then.

Funny when I read the word "glitching" I assumed it would be a framerate hitch, which might be cause by GC, but I did a quick timeline grab and it seems OK for desktop. Collects about 12MB every 10-12 seconds. That might have more of an impact on mobile of course, especially Android.

I'm having that kind of issue with a game I'm working on - in my case I'm being way too cowboy about creating and throwing away JS objects for particles (only in 2D on a canvas) and it's causing GC framerate glitches on Android.

From what I've experienced and read about, it seems the best approach is not to create/destroy objects at run time since it can be an expensive operation and cause frame rate issues. It's better to hide them and build as many as you can when the app is started up.

Yes, object pools are a good solution for elements like bullets in bullet hell games and similar applications.

"If you can't run it for some reason, a recorded gif of the demo can be found here"

WebGL in a nutshell.

The .js file is over 10,000 lines of code. How did it get so bloated from your 450 lines of code?

It includes imported libraries, primarily regl[1] which is 8228 lines long.

[1]: https://github.com/mikolalysenko/regl/blob/gh-pages/dist/reg...

I didn't spend much time optimising the size. I thought it loaded fast enough for me. But maybe it doesn't load as fast on a slow connection...

It's probably a bundled JS file containing all of his dependencies.

Node

While the tooling uses Node, the bloat comes from the bundle which includes canvas-fit, regl, and gl-mat4.

Since when do libraries used in your code classify as 'bloat'?