Contributing Backgrounds

Kevin Workman edited this page Nov 1, 2016 · 1 revision uses a random background image whenever you load a page. Those images are generated using code, and I'd love other people to contribute their own images (and the source code that generated them)!

If you want to create and contribute your own images and code, just follow these steps:

Step 1: Play with some code.

On, scroll to the bottom and find the link to the code for that page's background image, or just go here to see a list of all of the code.

Download the file and open it in your Processing editor (it will ask if you want to move it into a directory, this is normal). You'll see that I've overridden Processing's drawing functions so that they wrap around the edges of the screen, so any generated images can be tiled as background images. I've also used the save() function to save the sketch as an image.

Use that as a starting point to write your own code.

Step 2: Generate some image files. contains a feature that allows users to switch between light and dark themes, so try to generate two images: one for the light theme, and one for the dark theme.

Make the images unobtrusive, so they don't distract too much from the main content. For light images, I've used fill(random(222, 256)) to generate nice-looking light shades, and for dark images, I've used fill(random(0, 32)) to generate nice-looking dark shades.

The save("YouImageFileNameHere") function makes it easy to output whatever is currently showing in your sketch as an image file.

Step 3: Submit your stuff!

If you're new to GitHub or contributing to open source, feel free to post your images to instead. I can add them to the site for you, or help walk you through the process of contributing them.

If you are familiar with GitHub, then you need to do three things:

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.