Hacker News new | ask | show | jobs
by arendtio 1667 days ago
Nice idea.

Ideas for optimization: - use some kind of seed from a URL, so that people can share them. - How about multi-monitor setups?

The multi-monitor setup is something I struggled a bit. My two monitors are stacked vertically. So I use SVG images, render them in 2x4k height + 80px or so and cut the relevant parts out.

3 comments

The width and height can be changed in the code. If you also increase the number of layers (vertical) and line segments (horizontal) accordingly, you should be able to get similar results at different resolutions/aspects.
I would also second the idea of putting the seed in the URL, even with just an anchor link so that all processing is done in the browser. So if someone visits https://tanck.nl/wallpaper/#12345, use this number as the seed. You could also add a link under the image.

edit: here's a hacky way to do it, since you can't seed Math.random() in JavaScript; add this at the start of the "draw()" function.

    const url = new URL(location.href);
    const match = /#([0-9]+)$/.exec(url.hash);
    if (match) {
        var seed = parseInt(match[1]);
        Math.random = function() {
            var x = Math.sin(seed++) * 10000;
            return x - Math.floor(x);
        };
    }
Based on a StackOverflow answer to the commonly-asked question of how to seed the PRNG in JavaScript, by all means not a perfect solution but appropriately concise for this short script: https://stackoverflow.com/a/19303725
But that wouldn't be cryptographically secure. Someone could deterministically predict my wallpaper for fuck's sake.
I've done something similar in another project (avatar generator based on username). That code would always use a seed, and generate a new one when none was supplied.

The main issue I see is that all the non-random numbers in the code would need to remain fixed. I love tweaking those to improve the results. The link you'd share would have to be something like /v1/hash, where 'v1' is a folder with the 'frozen' version of the algorithm.

I also think the results would be less random/erratic, and since the images this generates are only around 150 kilobytes, they are also easy to share :).

I see you've added a sharing feature! Thanks for this.

It really says something about the elegance of the image generation algorithm when the sharing code is about as long as the code to generate images. I was surprised when I first saw this draw() function, only a few lines long. Great job!

Instead of a seed you could create NFTs for every wallpaper to finance the insane server cost and for flexing of course ;-)