Code Golfing a Tiny Demo Using Maths and a Pinch of Insanity

Posted3 months agoActive3 months ago

107 points

22 comments

blog.pkh.meTechstory

excitedpositive

Debate

20/100

Code GolfingDemo CodingShader Programming

Key topics

Code Golfing

Demo Coding

Shader Programming

The post showcases an extremely compact demo coded using mathematical tricks and shader programming, with the community discussing its intricacies and suggesting optimizations.

Snapshot generated from the HN discussion

Discussion Activity

Active discussion

First comment

10h

Peak period

12-24h

Avg / period

4.4

Comment distribution22 data points

Loading chart...

Based on 22 loaded comments

Key moments

01Story posted
Sep 29, 2025 at 9:34 AM EDT
3 months ago
Step 01
02First comment
Sep 29, 2025 at 7:48 PM EDT
10h after posting
Step 02
03Peak activity
11 comments in 12-24h
Hottest window of the conversation
Step 03
04Latest activity
Oct 4, 2025 at 7:18 AM EDT
3 months ago
Step 04

Generating AI Summary...

Analyzing up to 500 comments to identify key contributors and discussion patterns

Discussion (22 comments)

Showing 22 comments

bangaladore

3 months ago

2 replies

The top demo doesn't function on Edge or Chrome on Windows due to too many webgl contexts.

> WARNING: Too many active WebGL contexts. Oldest context will be lost.

uxAuthor

3 months ago

2 replies

Ah, someone reported this to me today, but I must admit I have no idea how to address the issue. Currently the canvas animations are stopped when out of context, but yeah they have to be loaded.

The code on the blog is pretty simple and naive (I'm not a webdev): https://github.com/ubitux/scripts/blob/main/share/blog/shade...

Any suggestion on how to address the issue is welcome.

Note: I don't have any Windows machine to test with

timojaask

3 months ago

1 reply

Similar issue on iOS Safari: all examples work except for the very first one.

sgarland

3 months ago

It loaded fine for me. iOS 26.0, iPhone 16 Pro.

greggman65

3 months ago

1 reply

If you just want it to work, stick this script on your page

https://github.com/greggman/virtual-webgl

If you want to make your own solution there's one listed here about 1/2 way down the page

https://webglfundamentals.org/webgl/lessons/webgl-multiple-v...

As an aside, WebGPU doesn't have this issue or at least has it less. For one, WebGPU can use a single device to render to multiple canvases, something WebGL can't. Another is that WebGPU is mostly stateless making it easier for both the user and the browser.

uxAuthor

3 months ago

Incredible, thank you very much. I've included the script for a quick fix, I'll see how to make to cook something myself at some point!

user1093298

3 months ago

Works fine with Firefox on Windows.

What am I saying? Fine? It's freaking awesome.

recursive

3 months ago

2 replies

I don't know much about 3d stuff or shaders or this language, but I know golf, and I think I found a byte to save.

    w = g-g*exp(-mix(h*3e2,d*2.5,a=h<.001?0.:1.))
    w = g-g/exp(mix(h*3e2,d*2.5,a=h<.001?0.:1.))

uxAuthor

3 months ago

1 reply

Hey, thank you, that's a nice one. I added the change to the Shadertoy version with your credit. I will add a note/update on the blog and demo page later. Thanks again :)

zahlman

3 months ago

1 reply

Is it actually necessary to specify `a` as a floating-point literal? Will it not be implicitly converted?

uxAuthor

3 months ago

Yeah. If you want implicit conversion, you need to specify a constructor like float(cond), but that would be longer than the ternary form. I thought about using a vec3() but vec3(...).x is still too long and using the vec3 directly doesn't look viable. Declaring a bool adds more characters as well. There is also step() giving the same number of chars: a=step(.001,h), but it's not more optimal: https://iquilezles.org/articles/gpuconditionals/

If you see a way to make it shorter, feel free to share :)

lifthrasiir

3 months ago

1 reply

You can also premultiply w with a, as every occurrence of `w` looks like `w*a`. This should shave three more bytes:

  w=g-g*exp(...),g-=w*a,c+=w*a*d*9.+...,c.r+=w*a*a*2,...
  w=g-g*exp(...),g-=w*=a,c+=w*d*9.+...,c.r+=w*a*2,...

(I've tested this with the Shadertoy version. YMMV.)

uxAuthor

3 months ago

This is not equivalent; the `a` in `c.r+=w*a` is different, you need the original untouched w. The mountain looses its crack with your version.

But! You can save 1 char by replacing w with a:

    g -= a*=w,
    c += a*d*9.+...
    a = min(...),
    c.r += w*a*a*.2,

So thank you for the idea!

ForHackernews

3 months ago

1 reply

If anyone is interested in learning more about this kind of coding https://thebookofshaders.com/ is a fantastic intro.

uxAuthor

3 months ago

Is this tutorial kind of abandoned? There are many teased chapters that never seem to have materialized somehow.

mkbosmans

3 months ago

1 reply

Another two bytes found (I think)

  (d==0.?K*.01*h:c-c)

could become

  (d>0.?.0:.01)*K*h

uxAuthor

3 months ago

1 reply

Ah nice for noticing d!=0 is d>0. Not sure how I missed the multiplication to get rid of the vector form; I guess I was too obsessed with the x-x trick...

I added your changes to the Shadertoy version with your HN nickname. I'll integrate it to the original later.

Thanks!

mkbosmans

3 months ago

I saw that you used `float z;` to later use `z` instead of the constant `0.`. You can also apply that to get a zero vector: `vec3 y;` and use `y` in place of `p-p`.

It seems that leaving the obsession behind some more can save another byte.

vintermann

3 months ago

Using maths, insanity, and a ton of calculation horsepower... That made my graphic card fan turn on instantly!

sgarland

3 months ago

This is utterly bonkers to me, well done.

samwhiteUK

3 months ago

Unbelievably cool, well done!

mielioort

3 months ago