Why use BGJolt to generate random cool background images?

Creating cool background images to use on your website, phone or other application can be challenging. A random background image generator (try to say that a few times quickly!) allows you to very quickly go over a large number of interesting background images, tweak the settings to your requirements and hone in on something without having to wait. It's also so easy to do that you won't have to be an experienced artist. With BGJolt it's possible to set the color palette to get exactly the right colors.

Here is one example image with a automatically generated color palette that is quite chill and I like it:

Generated Voronoi background image with white to blue to dark blue gradient

Manual

In the next few paragraphs there will be a short explanation behind the usage of all the sliders and options of the image generator.

Generating the next random image is easy enough by clicking on the 'Generate' button, arrow or swiping to the left. It's also possible to go back a generated image by clicking on the left arrow or a right swipe. The 'Vary' button keeps the core generated image exactly the same but moves the sliders around. Moving the sliders yourself is easy enough but if you're like me I'd prefer clicking a button a couple of times instead. Going back and forth does reset the image to the one that is generated by default (except for a custom palette).

The images can be exported to PNG to perfectly preserve the quality. It's also possible to export to SVG in case a vector image is required. The exact size of an exported image can be decided ranging from 300 to 10000 pixels without distorting the image contents. The generator itself has a zoom/scale function so it's easy to get as much or as little detail as necessary.

For every generated image the line width and line color can be altered. Where the color of the line ranges from completely back to white. The line width is optional: remove it by setting it zero (all the way to the left).

Rotate won't simply rotate the entire image, which is easy enough to do with other software such as GIMP or Photoshop. Instead it rotates only the background color gradients. Move is interesting in that setting it all the way to the left produces a classic checkboard like pattern. The more the slides is moved to the right the more the checkboard pattern is distorted and it the Voronoi pattern becomes more apparent.

Custom palettes allows for exactly matching a color theme or experiments in getting interesting color gradients. Clicking on 'Custom Palette' adds a new row with swatches that are used in the currently generated image. The default palette is using the default random color generation and will usually produce a nice range in lightness with reasonably matching hues and saturation. To apply a custom palette simply click anywhere on the grey area of the palette you want to apply.

Little hint: new palettes use the colors from the currently generated image. What I'd like to do is generate images using the 'Default Palette' and click on 'Custom Palette' when I like the colors. After I got a couple of these custom palettes I can look for a pattern I like and see how it looks with a custom palette I like. That often gives nice results quickly.

Last but not least your creation can be shared with a simple URL. This will include the (custom) palette but only the one that is used to the current image. It also comes in handy to save the image in case you haven't decided which one works best.

Using Voronoi diagrams to generate background images

There are of course a wide variaty of web apps to create graphics online. However, I've not seen many that create these using Voronoi diagrams. As you may have noticed they have an appealing natural organic look yet retain something that has a little bit of mysterious sci-fi hint. Combine that with an automatically generated palette and there will be many varied results.

What are Voronoi diagrams?

The Voronoi diagrams are a way of dividing a set of points into regions or cells. Where the line that separates the cells has the same distance to the points of these cells. These properties give Voronoi diagrams a wide range of applications within science, engineering and of course art! Examples are usually known for their distinct angular yet lively look.

For generating these Voronoi diagrams I've opted to use the JavaScript library from Raymond Hill (see also the about page). The entire web app is written in TypeScript/JavaScript and the images are shown on a standard HTML canvas.