Classic Tiled Wallpaper Challenge

This repository is intended to hold open-source wallpaper graphics and source code for the following challenge.

Given that desktop backgrounds today tend to cover the full computer screen, to employ thousands of colors, and to have a high-definition resolution (1920 × 1080 or larger), rendering tileable backgrounds with limited colors and pixel size ever harder to find, I make the following challenge.

The Challenge

Create a tileable desktop wallpaper graphic ¹ meeting the following requirements.

• The graphic is an image (also known as a raster image, a rectangular array of pixels) with one of the color palettes given in “Color Palettes for Classic-Style Graphics Projects” and one of the pixel dimensions given later.
• The graphic is preferably abstract, should not employ trademarks, and is suitable for all ages.
• The graphic does not contain text. Graphics that contain depictions of people or human faces are not preferred.
• The graphic should be uncompressed or compressed without loss (so in PNG or BMP format, for example, rather than JPEG format).
• The graphic is in the public domain or licensed under the Unlicense or, less preferably, another open-source license approved by the Open Source Initiative.
• The graphic was not produced by artificial-intelligence tools or with their help.

Instead of being an image, the graphic is allowed to be a vector graphic with two-dimensional filled outlines with no stroke, where—

• each outline is filled black and either opaque or translucent (semitransparent),² or
• each outline is opaque and filled with one of up to ten colors from a color palette given in “Color Palettes for Classic-Style Graphics Projects”.³

Also welcome would be computer code (released to the public domain or licensed under the Unlicense) to generate tileable or seamless—

• noise,
• procedural textures or patterns, or
• arrangements of symbols or small graphics or images with partial transparency,

meeting the requirements given earlier. (In this sense, tileable or seamless grayscale images, as defined later, are quite versatile; see note 1 in “Wallpaper Generation Notes”.)

In general, the following are not within the scope of this challenge.

• Photographic images (see note 2 in “Wallpaper Generation Notes””, later in this document).
• Graphics with a single solid color on all four sides; such graphics are trivially tileable.
• Graphics that can be tiled in one dimension only, such as those depicting horizontal or vertical borders with an “infinitely” extending background.

Pixel Dimensions

The pixel dimensions allowed are as follows.

• Preferred: 8 × 8, 16 × 16, 32 × 32, 64 × 64, 64 × 32, 32 × 64, 96 × 96, 128 × 128, 256 × 256.
• 32 × 32 or 64 × 64, where the second, fourth, etc. column is the same as the previous column (each logical pixel is 2 × 1).
• Not preferred: 320 × 240, 320 × 200.
• Not preferred: Custom size up to 96 × 96.
• Not preferred: Custom size up to 256 × 256.

Examples

Name	Made by	Colors	Size	License/Notes
dstripe.png	peteroupc	Black and white	32 × 32	Unlicense
dzigzag.png	peteroupc	Black and white	64 × 32	Unlicense 4
dzigzagcyan.png	peteroupc	Two colors (cyan and teal)	64 × 32	Unlicense
truchet2color.png	peteroupc	Black and white	32 × 32	Unlicense
truchet2colorthick.png	peteroupc	Black and white	32 × 32	Unlicense
truchet3color.png	peteroupc	Black/gray/white	32 × 32	Unlicense 5
smallslant.png	peteroupc	Four tones	8 × 8	Unlicense
truchetff5500vga.png	peteroupc	VGA palette 6	32 × 32	Unlicense 7
boxes.png	peteroupc	VGA palette	128 × 128	Unlicense
circlec.png	peteroupc	VGA palette	128 × 128	Unlicense
circlews.png	peteroupc	“Safety palette”	128 × 128	Unlicense
check.png	peteroupc	VGA palette	96 × 96	Unlicense
brushed.png	peteroupc	VGA palette	96 × 96	Unlicense
JohnGWebDev/Background-Textures	John Galiszewski	Black and white	All 100 × 100	MIT License

The texture generator at schalkt/tgen, under an MIT License, is another example.

Wallpaper Generation Notes

1. Suppose an image used as wallpaper has only colors of the same hue and “saturation”. Then a grayscale version of the image is preferred, since then the image could be color-shifted and then adapted to have the colors of any limited-color palette (as given in “Color Palettes for Classic-Style Graphics Projects”) by known dithering techniques or print-simulating halftoning techniques. For an example, see the patternDither method in desktopwallpaper.py. Alternatively, the gray tones (as well as black and white) in the grayscale image could be mapped to colors in a color gradient (see the sample code given later), or the image could be dithered and then this mapping occurs.
   • A grayscale image is an image where the colors are limited to gray tones, black, and white.
   • Dithering scatters an image’s pixels in a limited-color palette to simulate colors outside that palette.
   • A color gradient is a mapping from numbers to colors. A color gradient can be defined, among other ways, as a list of gradient stops (a gradient stop is a number together with the color it maps to), where colors in between these gradient stops are found by linear interpolation.⁸ As an example, suppose a color gradient of this kind has the gradient stops (0, “black”) and (1, “white”). Then the in-between color at 0.3 is the gray tone that is 30% of the way from “black” to “white”.
   • If only part of the image has only colors of the same hue and “saturation”, and the rest is grayscale, then the color shifting or color mapping can be limited to the nongrayscale part.
   • If an image looks unsatisfactory after being automatically adapted to a particular color palette (such as one mentioned in “Color Palettes for Classic-Style Graphics Projects”), it can be manually adapted instead.

2. Other tileable wallpapers employing more than 256 colors and otherwise satisfying the challenge’s requirements are acceptable, though not preferable. If an image used as wallpaper has more than 256 colors and otherwise meets those requirements, it can be adapted to have the colors of a limited-color palette (see “Color Palettes for Classic-Style Graphics Projects”) by dithering techniques, where the image can be converted to a grayscale image, color shifted, or both before adapting it this way.

3. If an image is not tileable, but otherwise meets the challenge’s requirements, the Python script desktopwallpaper.py has an argyle method that generates a tileable wallpaper image from two images of the same size, neither of which need be tileable.

4. A striking form of wallpaper results from layering a tileable foreground over a nontileable (abstract) background, where the foreground has transparent pixels and wraps around the edges. Examples of this technique are shown in the wallpaper files RIBBONS.BMP and PARTY.BMP, both of which were distributed with Windows 3.0 and the latter was inspired by the Memphis group style.

5. One example of tileable noise can be generated using the “diamond-square algorithm”.

6. One way to generate a wallpaper image is by blending a solid color (or another tileable wallpaper) with a tileable image consisting of only transparent pixels and semitransparent and opaque black pixels (such as a masonry pattern).

7. Stochastic tiling: Wang tiles are a finite set of tiles (here, wallpaper graphics) that can cover an arbitrary grid without seams. One example is the set of 16 tiles whose edges have two variations each: two upper-edge, two lower-edge, two left-edge, and two right-edge variations.

   • A randomized tiling, or stochastic tiling, can be generated from this tile set by repeatedly selecting a grid position and choosing a random tile that can go in that position without introducing seams, until the whole grid is covered.
   • Another kind of stochastic tiling occurs with placing a randomly chosen version of a wallpaper graphic at each grid position, where each version has the same dimensions and the same edges as each other version but can otherwise vary.⁹

   Both kinds of stochastic tiling can be combined. See example.¹⁰

Sample Wallpaper Generation Code

This repository has the following code files in Python for generating tiled wallpapers and reading and writing Windows icon files and images in the PNG and Windows bitmap formats: desktopwallpaper.py, imageformat.py, randomwp.py.

This repository also has a directory (rust/) with Rust source code for generating a tiled wallpaper.

In addition, the following code in Python is presented as an example of computer code to generate tileable wallpaper patterns. It uses the desktopwallpaper and imageformat modules and helped generate circlec.png and circlews.png.

import desktopwallpaper as dw
import imageformat as ifmt
import random

def contouring(x,y,z):
    return abs(x**z+y**z)**(1/z)

def _togray(x):
    return int(abs(max(-1, min(1, x))) * 255.0)

width = 128
height = 128
# Draw an image with a grayscale gradient fill
image = [
    _togray(contouring((p%width) * 2.0 / width - 1.0, (p//width) * 2.0 / height - 1.0, 2.5))
    for p in range(width*height)
]
# Generate a random color gradient (that maps numbers from 0 through 255 to colors)
colors = dw.randomColorization()
# Create a colorized version of the image
image = [cc for pix in [colors[x] for x in image] for cc in pix]
# Draw a checkerboard overlay over the image
image = dw.checkerboard(
  dw.blankimage(width,height,[random.randint(0, 255) for i in range(3)]),
  image,
  width, height)
# Copy the image for dithering
image2 = [x for x in image]
# Dither the image in VGA colors
dw.patternDither(image, width, height, dw.classiccolors())
# Dither the image in "safety palette"
dw.websafeDither(image2, width, height)
# Write dithered images
ifmt.writepng("/tmp/circlec.png", image, width, height)
ifmt.writepng("/tmp/circlews.png", image2, width, height)

Replacing the contouring method just given with the one given next leads to a diagonal gradient fill that’s tileable:

def contouring(x,y,z):
   c=abs(x+y)%2.0; return 2-c if c > 1.0 else c

Other User-Interface Graphics

For discussions on the traditional design of user-interface elements such as buttons, border styles, icons, cursors, and animations, see uielements.md in this repository.

The page also describes an additional challenge to write computer code (released to the public domain or licensed under the Unlicense) to draw traditional button and border styles.

For discussions on converting traditional icons to vector graphics, see pixeltovector.md in this repository.

License

Any copyright to this page is released to the Public Domain. In case this is not possible, this page is also licensed under the Unlicense.

Notes