Methoden voor willekeurige gradiënten

In de loop der jaren — inclusief mijn tijd bij OpenAI — heb ik geëxperimenteerd met verschillende methoden voor het genereren van willekeurige gradiëntafbeeldingen. Deze omvatten:

• Heightmap
• Laagjes van radiale gradiënten
• AI-gegenereerd

Heightmap

Willekeurig gegenereerde gradiënten waren een essentieel onderdeel van de vroege visuele identiteit van OpenAI, ontworpen door Ben Barry in 2017. Zijn eerste generator koos willekeurig vier hoekkleuren en interpoleerde daartussen.

Nadat ik in 2018 bij Ben in dienst trad bij OpenAI, begon ik meer manieren te verkennen om gradiënten programmatisch te creëren. Een bevriende engineer suggereerde het gebruik van heightmaps: rasters van cellen die elk een hoogtewaarde bevatten variërend tussen 0 en 1.

Ik ontwikkelde een implementatie in Processing die gebruikmaakte van willekeurige ruisgeneratie (een gemodificeerde en gladgestreken Perlin-ruis) om de hoogtewaarden in te vullen.

Bijschrift: Heightmaps met gladgestreken Perlin-ruis.

Heightmaps worden vaak gevisualiseerd als grijswaardenafbeeldingen, waarbij waarden worden gekoppeld aan een eenvoudige zwart-wit-kleurenschaal: lagere waarden zijn donker en hogere waarden zijn licht.

Bijschrift: Een eenvoudige zwart-wit-kleurenschaal.

We kunnen echter elke gewenste kleurenschaal op deze waarden toepassen. Ik genereerde willekeurige schalen door kleurstops te maken met variërende posities, tinten, verzadigingen en helderheid, om vervolgens een vloeiende overgang (blend) daartussen te interpoleren.

Bijschrift: Willekeurige en gemengde kleurenschalen.

Door dit alles te combineren, koppelde ik deze willekeurige kleurenschalen aan de willekeurige heightmaps, wat resulteerde in organische, opvallende gradiënten.

Bijschrift: Heightmap gradiënt.

Deze gradiënten voelden niet helemaal juist aan voor de visuele identiteit van OpenAI en zijn daarom nooit in productie genomen, maar ze zijn desondanks prachtig om naar te kijken.

Laagjes van radiale gradiënten

Begin 2019 toonde de startpagina van OpenAI een levendige, schermvullende gradiënt. De implementatie was eenvoudig: een piepklein beeld van 2×3 pixels met zes kleurstops, wat een vloeiende gradiënt opleverde wanneer het door webbrowsers werd opgeschaald. Het bestand woog slechts 85 bytes (ongeveer de grootte van een kort tekstfragment) en werd vrijwel onmiddellijk geladen.

Bijschrift: Statische gradiënt gebruikt op openai.com van 2019 tot 2020.

Hoewel performant en slim, was de gradiënt statisch. Ongeveer een jaar later ontwikkelde ik een implementatie in Scalable Vector Graphics (SVG) die dynamisch willekeurig kon worden gegenereerd terwijl de prestaties behouden bleven.

SVG bevat een native <radialGradient>-element, waarmee een radiale gradiënt met kleurstops kan worden gedefinieerd. Om variatie en visuele interesse toe te voegen, kun je het brandpunt (focal point) aanpassen en transformaties toepassen zoals schalen, rotatie, scheefstand (skew) en translatie.

Bijschrift: Basis SVG radiale gradiënten, met variërende brandpunten en transformaties.

Door een reeks willekeurig getransformeerde radiale gradiënten over elkaar heen te leggen, ontstond een complexere samengestelde gradiënt.

De startpagina van OpenAI uit begin 2020 maakte gebruik van deze gelaagde radiale gradiënten, gekozen uit een set van vier kleuren. Bij elke pagina-laadbeurt werd er dynamisch een unieke, eenmalige gradiënt aan elke bezoeker getoond.

Bijschrift: Dynamische, gelaagde radiale gradiënt gebruikt op openai.com van 2020 tot 2022.

Voorbeelden van deze implementatie zijn hieronder te zien. Elke SVG-afbeelding is oneindig schaalbaar zonder kwaliteitsverlies en behoudt de prestaties doordat het bestand slechts 6 KB weegt (ongeveer de grootte van een klein tekstdocument).

Bijschrift: Ellipsen gradiënt.

Ik heb deze methode in de loop der jaren vaak gebruikt om gradiënten te produceren — zowel kleurrijk als subtiel, licht als donker — voor diverse toepassingen van het OpenAI-merk.

AI-gegenereerd

Modellen voor AI-beeldgeneratie, die nog niet bestonden toen Ben en ik voor het eerst experimenteerden met gradiënten, openen nu een schat aan mogelijkheden. Hoewel het proces van het gebruik ervan onvoorspelbaar kan zijn — meer vergelijkbaar met een gokkast dan met een exacte wetenschap — bieden ze spannende kansen, en de technologie en tools worden steeds beter.

Hieronder demonstreer ik drie proofs of concept voor het genereren van texturele gradiëntafbeeldingen, gebruikmakend van het DALL·E 2-model van OpenAI (een favoriet van mij sinds de release in april 2022).

• Voor een luchtige, dromerige look kun je een prompt gebruiken zoals:

"soft, abstract gradient with blurred transitions of vibrant hues, creating a serene, dreamlike atmosphere" (zacht, abstract gradiënt met vervaagde overgangen van levendige tinten, wat een serene, dromerige sfeer creëert) Bijschrift: AI-gegenereerd dromerig gradiënt.

• Voor een florale richting met krachtigere texturen kun je een prompt gebruiken zoals:

"abstract macro photograph of a flower in the style of a mid-century color field painting, hazy, out of focus" (abstracte macrofotografie van een bloem in de stijl van een mid-century color field painting, wazig, buiten focus) Bijschrift: AI-gegenereerd bloem-geïnspireerd gradiënt.

• Voor een op de lucht geïnspireerd, natuurlijk rustgevend gradiënt kun je een prompt gebruiken zoals:

"bright hazy illustration of the sky at sunset, out of focus, evoking motion, 35mm, varied contours, vivid, brilliant, optimistic, wide spectrum of colors" (heldere, wazige illustratie van de lucht bij zonsondergang, buiten focus, beweging suggererend, 35mm, gevarieerde contouren, levendig, briljant, optimistisch, breed spectrum aan kleuren) Bijschrift: AI-gegenereerd lucht-geïnspireerd gradiënt.

Afgezien van het bijsnijden zijn de getoonde afbeeldingen ruwe, onbewerkte resultaten. De resultaten kunnen onverwacht maar verrukkelijk zijn. Als je vaak genoeg aan die gokkast draait, win je uiteindelijk.

Met tools zoals DALL·E 2 openen beperkingen juist de creativiteit. Ik heb hier drie richtingen laten zien, maar de mogelijkheden zijn eindeloos.