Justin Jay Wang

Methods for random gradients

Over the years, including during my time at OpenAI, I’ve experimented with various methods for generating random gradient images. These include:

  1. Heightmap
  2. Layered radial
  3. AI-generated

Heightmap

Randomly generated gradients were an essential element of OpenAI’s early visual identity, designed by Ben Barry in 2017. His earliest generator randomly picked four corner colors and interpolated between them.

After Ben hired me in 2018, I began exploring more ways to create gradients programmatically. An engineer friend suggested using heightmaps: grids of cells, each containing a height value ranging between 0 and 1.

I developed an implementation in Processing that used randomized noise generation to populate height values, with a modified and smoothed Perlin noise.

Heightmaps are often visualized as grayscale images, mapping values to a simple black-to-white color scale, where lower values are dark and higher values are light.

A simple black-to-white color scale.

We can also apply any color scale to these values. I generated randomized scales by creating color stops with varied locations, hues, saturations, and brightness, and then interpolating a smooth blend between them.

Putting it all together, I mapped these color scales to the randomized heightmaps, resulting in organic, striking gradients.

These gradients didn’t feel quite right for OpenAI’s visual identity so never made it to production, but they’re nevertheless lovely to look at.


Layered radial

In early 2019, OpenAI’s home page displayed a vibrant, full-screen gradient. The implementation was simple: a tiny, 2×3 pixel image of six color stops, which produced a smooth gradient when scaled up by web browsers. It weighed just 85 bytes (about the size of a brief text snippet) and loaded virtually instantly.

Static gradient used on openai.com from 2019 to 2020.

While performant (and clever), the gradient was static. About a year later, I developed a gradient implementation in Scalable Vector Graphics (SVG) that could be dynamically randomized while maintaining performance.

SVG includes a native <radialGradient> element, which defines a radial gradient containing color stops. To introduce more variety and visual interest, you can adjust the focal point and apply transformations like scale, rotation, skew, and translation.

Layering a sequence of randomly transformed radial gradients on top of each other yielded a more complex composite gradient.

OpenAI’s home page from early 2020 featured layered radial gradients picked from a set of four colors. Each page load dynamically served a unique, one-off gradient to every visitor.

Dynamic, layered radial gradient used on openai.com from 2020 to 2022.

Examples from this implementation are shown below. Each SVG image scales infinitely without loss of quality and maintains performance by weighing just 6 KB (about the size of a small text document).

I used this method often over the years to produce gradients—both colorful and subtle, light and dark—for various applications of the OpenAI brand.


AI-generated

Today, AI image generation models, which didn’t exist when Ben and I first experimented with gradients, open up a wealth of possibilities. While the process of using them can be unpredictable—more akin to a slot machine than exact science—they offer exciting opportunities, and the technology and its tools are only getting better.

Below, I demonstrate three proofs of concept for generating textural gradient images, using OpenAI’s DALL·E 2 model (a favorite of mine since its release in April 2022).

To explore an airy, dreamlike look, you can use a prompt along the lines of:

soft, abstract gradient with blurred transitions of vibrant hues, creating a serene, dreamlike atmosphere

To go for a floral direction with bolder textures, use a prompt such as:

abstract macro photograph of a flower in the style of a mid-century color field painting, hazy, out of focus

To pursue a sky-inspired, naturally soothing gradient, you can use a prompt like:

bright hazy illustration of the sky at sunset, out of focus, evoking motion, 35mm, varied contours, vivid, brilliant, optimistic, wide spectrum of colors

Aside from cropping, the images shown are raw, unedited outputs.

The results can be unexpected yet delightful. Play that slot machine enough times, and you’ll get some payouts.

When working with tools like DALL·E 2, I found that setting parameters opens up more creativity. I showcased three directions, but the possibilities are endless.

Filed under: Design, Explorations