Show HN: 4K Desktop Wallpaper Generator

by roytanck • 5 years ago

258 75 5 years ago

roytanck13• 5 years ago

I created a little web page (<10kB) that generates a random 4K (3840*2160px) wallpaper image using Javascript and the <canvas> element. Right-click to save the image (desktop only for now).

No two images are the same. You may need a few refreshes to get an interesting result.

Code: https://github.com/roytanck/wallpaper-generator

arendtio• 5 years 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.

roytanck13• 5 years ago

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.

Tepix• 5 years ago

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

thamer2• 5 years ago

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

ralusek• 5 years ago

But that wouldn't be cryptographically secure. Someone could deterministically predict my wallpaper for fuck's sake.

roytanck13• 5 years ago

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 :).

FredPret• 5 years ago

This is just brilliant. I’ve been looking for ways to generate spanning wallpapers for two 4k screens, or two 4k’s + a laptop screen. Looks like this could be adapted for that.

kevmo314• 5 years ago

Love the simple, readable source compared to the compiled stuff these days :) https://tanck.nl/wallpaper/wallpaper.js

countmora• 5 years ago

On Safari (macOS) it is as impossible to download this easy-to-download-picture as it is possible to download the impossible-to-download-picture[1] from yesterday.

[1] https://news.ycombinator.com/item?id=29358880

sam0x17• 5 years ago

Luckily the vast majority of MacOS users these days don't use Safari, for reasons like this

bee_rider3• 5 years ago

If you can't get the download to work, but are still interested in something similar, @victorgama put together what appears to be a pretty neat macOS implementation. It runs the algorithm on the desktop and automagically refreshes the wallpaper on startup, etc (unfortunately I don't know swift or have a mac, so this is just based on the readme).

https://news.ycombinator.com/item?id=29377185

OJFord• 5 years ago

Nice! Feature suggestion: an (optional) colour picker would be a nice touch, so you can pick (or perhaps enter #RGB) one that should appear and the others are then a fitting palette. Occurred to me because I was refreshing through a few, liked the colours on one, but not so much the pattern. (Perhaps alternative implementation would be a 'hold colour palette' or 'hold pattern' toggles, so only the other varies.)

roytanck13• 5 years ago

Thank you. Those are great suggestions, but I also like the simplicity of it being completely random. Perhaps I'll do an interactive wallpaper designer at some point, where you're more in control.

bartvk• 5 years ago

What could be nice, and not require user input, is detect whether the user has dark mode enabled, and then use that as an input variable.

Bedon292• 5 years ago

I do like the simplicity of completely random, but my first instinct was definitely to want some sliders or toggles. Personally prefer desktops to be extremely dark, and many of them were nice, but way too bright on a section. User control would definitely end up with a different experience, and totally respect the simplicity.

Might end up tweaking it to my tastes and a few other resolutions, like for my ultra wide.

okramcivokram• 5 years ago

I've added GUI where you can also pick the color and play around with other params. Check it out in this branch: https://github.com/markomarkovic/wallpaper-generator/tree/gu...

masteruvpuppetz• 5 years ago

Can somebody recommend a free low poly background picture generator? Example https://trianglify.io/

marban• 5 years ago

Come on — in the era of NFTs, $8 for an SVG is a steal.

pimlottc• 5 years ago

I miss the old days of the internet when people would make something like this just for fun, not to make a buck.

danskeren• 5 years ago

https://cojdev.github.io/lowpoly/

roland35• 5 years ago

My favorite site for wallpapers is interface lift, but just note that the site does occasionally go down for months at a time!

https://interfacelift.com/

fuzzy2• 5 years ago

Oh, it’s back? I was under the impression it was down for, like, two years.

podiki• 5 years ago

Yes, has some fantastic images, but seems nothing new for a few years now.

peanut_worm• 5 years ago

You can’t download the image on iOS

roytanck13• 5 years ago

This unfortunately, is a known issue. I tried adding a download button, but that also only worked on desktop. Probably some browser policy thing. The same is true for Android (Chrome and Firefox Nightly).

oefrha• 5 years ago

You can convert the canvas to a Blob with HTMLCanvasElement.toBlob(), then create a blob URL from that with URL.createObjectURL(). You can then replace the canvas with an <img src="blob://...">, which can be long press saved; add a download button linking to that blob URL; or whatever. Works on all non-ancient mobile browsers I've tested.

Do note that Firefox’s privacy.resistFingerprinting can block you from reading canvas image data, giving you garbage instead, and the permission prompt is basically unnoticeable if the user isn’t actively looking for it.

58x142• 5 years ago

I was able to download the image on iOS just now, using Firefox on iOS.

bit-101• 5 years ago

Nice work!

oceankid• 5 years ago

Super nice! Save doesn't work on Safari MacOS?

roytanck13• 5 years ago

Unfortunately, no. There seems to be some issue with saving canvas elements as PNG on mobile browsers. Since the generated images are landscape aspect anyway, I didn't spend a lot of time figuring out exactly what's causing this.

dylan604• 5 years ago

macOS is not a mobile OS

rcarmo• 5 years ago

Interesting. I used around 30-40 wallpapers generated through Trianglify until recently, this has a lot of potential.

eins12342• 5 years ago

This is really cool! Thanks for sharing!

Though one question popped up in my mind while looking at this... Given the trend of ever increasing screen resolutions with no end in sight, why don't OSes support using vector images (svg, etc) as wallpapers?

hnarn3• 5 years ago

Your claim that no operating systems support this seems extremely unlikely. I’m pretty much certain there are multiple Linux desktop environments that support vector based background images.

coolso• 5 years ago

Yeah but the problem is they don’t otherwise support a convenient desktop experience. Maybe next year will be the year.

ExtraE• 5 years ago

Still, the question remains. Why don’t many/most/all?

eins12342• 5 years ago

Well, I had assumed none had support since none of the OSes I use regularly had support. I stand corrected.

That said, I do still wonder why none of the OSes that I use (Windows, MacOS, Android, iOS, accounting for pretty much 100% of the OSes regular people use) have support for it.

smoldesu• 5 years ago

My current desktop has an SVG as the wallpaper for my main display and a webp on the second one. I guess I could switch them over to a png or something, but I'm too lazy and I haven't noticed any issues with it.

notRobot• 5 years ago

Also see related: the soft landscapes twitter account: https://mobile.twitter.com/softlandscapes

grech• 5 years ago

Love the minimalist execution. Personally, I consider your tool having no user-facing options a plus (less decision making for me and excitement from complete randomness). I just set one of the wallpapers as my desktop background. Thank you

qrohlf• 5 years ago

Not entirely dissimilar to my own pattern generation tool, https://trianglify.io/

How are you doing the color palettes? Is it fully random or using some kind of picker algorithm?

roytanck13• 5 years ago

Completely random. It picks a hue value (0-360) and then adds or subtracts a second random value from this for each layer. The maximum value of this increment is relatively small, so the colors are usually similar within the same image.

Starmina• 5 years ago

Love it.

naikrovek• 5 years ago

Tapet for Android is another example of this, and could serve as great inspiration if you need any.

enz• 5 years ago

Very nice. I now use one as my wallpaper. It's pretty satisfying to know I have a uniquely generated wallpaper ;)

ajross• 5 years ago

Ditto. It's been a while with the same gradient. Reloaded a few times to find one with the general color space I wanted. Boom, done. I love it.

(Needs a tip jar or something though.)

petepete• 5 years ago

Works beautifully, I've saved a few for my rotation. Thanks!

sahiljajodia01• 5 years ago

This is amazing. However, how much is the probability for it to generate the same wallpaper twice?

roytanck13• 5 years ago

Almost infinitely small. There are many random values used to create the image, and most of those have millions of possible values.

rob_c• 5 years ago

Cool!

I wonder is the code public or just page source?

(Will have to check the page when not on mobile)

roytanck13• 5 years ago

The code is on Github: https://github.com/roytanck/wallpaper-generator

Please let me know if you create something nice with it.

swayvil• 5 years ago

Tasteful. Minimal. You are truly owning the zone.

stemlord• 5 years ago

Anyone else remember digitalblasphemy.com? Good times

taejavu• 5 years ago

Oh, with the glowing mushrooms (plus plenty of other abstract/fantasy landscapes)? Damn that takes me back

unethical_ban• 5 years ago

Still there!

bee_rider3• 5 years ago

A fun alternative would be to run this on the desktop and generate a new wallpaper every time your computer starts up (This is not a feature request, though -- you've had plenty of those here already, and since you've helpfully released the code under GPL, I'm sure anyone interested could easily do this conversion on their own end).

victorgama• 5 years ago

Done! (For macOS) https://github.com/heyvito/kabegami

bee_rider3• 5 years ago

You've added some thoughtful features. I don't have a mac, but hopefully people will check this out.

chubs• 5 years ago

My favourite part of this is that the wallpapers will look super sharp on my 4k display. It's quite difficult to find wallpapers that don't look blurry when blown up, even quality landscape photography. Very neat! Thanks for sharing :)

GekkePrutser• 5 years ago

The colour schemes and limited amount of colours reminds me of the old VUE and CDE backgrounds :)

And that reminds me of xfishtank. I still use that sometimes for old school cool and also because it is pretty optimized (when it was written many X terminals shared a 10mbit coax) and great way to see if a remote X desktop session is still responsive.

nvaider• 5 years ago

This is great for rotating my lockscreen backgrounds

batuhandirek• 5 years ago

Not entirely same, but I have a similar project at https://circles.gallery

Love the minimalism in yours! Maybe I should also put a URL for generating a single image like /random

Thank you a lot for this :)

Show HN: 4K Desktop Wallpaper Generator

Related Stories