Skip to content
Tech News
← Back to articles

Methods for Random Gradients

read original more articles
Why This Matters

A designer's account of how OpenAI's early visual identity was built, including the randomized gradient generators used from 2017 onward, offers a rare look at how AI companies craft brand aesthetics through code. It also highlights practical engineering tradeoffs, like an 85-byte 2 times3 pixel image scaled by browsers into a full-screen gradient.

Key Takeaways

Tue, 19 Nov 2024

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

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 I joined Ben at OpenAI 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 (a modified and smoothed Perlin noise) to populate height values.

Smoothed Perlin noise heightmaps.

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.

But 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.

... continue reading