AI・機械学習

ランダムグラデーションの方法

Methods for Random Gradients (justinjay.wang)

47 pointsby nickswalker2026年9月4日5 コメント

要約

この記事では、ランダムなグラデーション画像を生成するための様々な手法について解説しています。過去にはOpenAIで、高さマップ（Heightmap）やレイヤードラジアル（Layered radial）といったプログラム的な手法が用いられてきました。近年では、AI画像生成モデル（例: DALL·E 2）を活用することで、より多様で予期せぬ、魅力的なグラデーションイメージを作成する可能性が開かれています。

全文翻訳

ランダムグラデーション生成法

2024年11月19日（火）

長年にわたり、OpenAIでの在籍期間中も含め、ランダムなグラデーション画像を生成するための様々な手法を試してきました。それらには以下が含まれます。

高さマップ

ランダムに生成されたグラデーションは、2017年にベン・バリーによってデザインされたOpenAIの初期のビジュアルアイデンティティの不可欠な要素でした。彼の最も初期のジェネレーターは、4つの角の色をランダムに選択し、それらの間で補間を行いました。

2018年に私がベンと共にOpenAIに入社した後、プログラムでグラデーションを作成するさらなる方法を探求し始めました。エンジニアの友人が高さマップ（各セルが0から1の間の高さ値を持つグリッド）の使用を提案しました。

私は、ランダムノイズ生成（パーリンノイズを修正・平滑化したもの）を使用して高さ値を埋める、Processingでの実装を開発しました。

［画像: 平滑化されたパーリンノイズ高さマップ］

平滑化されたパーリンノイズ高さマップ。

高さマップは、しばしばグレースケール画像として視覚化され、値は単純な白黒のカラースケールにマッピングされます。値が低いほど暗く、高いほど明るくなります。

［画像: 単純な白黒カラースケール］

しかし、これらの値に任意のカラースケールを適用することもできます。私は、様々な位置、色相、彩度、明度を持つカラーストップを作成し、それらの間で滑らかな補間を行うことで、ランダム化されたスケールを生成しました。

［画像: ランダム化されブレンドされたカラースケール］

ランダム化されブレンドされたカラースケール。

これらを組み合わせることで、ランダム化されたカラースケールをランダム化された高さマップにマッピングし、有機的で印象的なグラデーションを作成しました。

これらのグラデーションはOpenAIのビジュアルアイデンティティにはあまり適さないと感じられたため、製品化されることはありませんでしたが、それでも見るのは楽しいものです。

レイヤードラジアル

2019年初頭、OpenAIのホームページには鮮やかでフルスクリーンのグラデーションが表示されていました。実装はシンプルで、6つのカラーストップを持つ小さな2x3ピクセルの画像で、ウェブブラウザで拡大されると滑らかなグラデーションを生成しました。重さはわずか85バイト（短いテキストスニペットと同程度）で、ほぼ瞬時にロードされました。

［画像: 2019年から2020年までopenai.comで使用されていた静的グラデーション］

パフォーマンスが高く巧妙でしたが、グラデーションは静的でした。約1年後、私はパフォーマンスを維持しながら動的にランダム化できる、Scalable Vector Graphics (SVG) でのグラデーション実装を開発しました。

SVGにはネイティブの<radialGradient>要素が含まれており、カラーストップを持つラジアルグラデーションを定義します。多様性と視覚的な興味を導入するために、焦点（focal point）を調整したり、スケール、回転、スキュー、平行移動などの変換を適用したりできます。

［画像: 様々な焦点と変換を持つ基本的なSVGラジアルグラデーション］

基本的なSVGラジアルグラデーション、様々な焦点と変換を適用。

ランダムに変換されたラジアルグラデーションのシーケンスを重ね合わせることで、より複雑な複合グラデーションが得られました。

2020年初頭のOpenAIのホームページでは、4色セットから選ばれたレイヤードラジアルグラデーションが使用されていました。各ページロード時に、訪問者ごとにユニークで一度きりのグラデーションが動的に提供されました。

［画像: 2020年から2022年までopenai.comで使用されていた動的なレイヤードラジアルグラデーション］

この実装からの例を以下に示します。各SVG画像は品質を損なうことなく無限にスケーリングでき、わずか6KB（小さなテキストドキュメントと同程度）の重さでパフォーマンスを維持します。

私は長年、OpenAIブランドの様々な用途のために、カラフルで繊細なものから、明るいもの、暗いものまで、グラデーションを生成するためにこの手法を頻繁に使用しました。

AI生成

ベンと私が最初にグラデーションの実験を始めた頃には存在しなかったAI画像生成モデルは、今や豊富な可能性を開いています。それらを使用するプロセスは予測不可能であり、正確な科学というよりはスロットマシンに近いですが、エキサイティングな機会を提供し、技術とツールは常に進化しています。

以下では、OpenAIのDALL·E 2モデル（2022年4月のリリース以来、私のお気に入りの一つ）を使用して、テクスチャのあるグラデーション画像を生成するための3つの概念実証（proof of concept）を実演します。

空気感があり、夢のような外観を探求するには、次のようなプロンプトを使用できます。

柔らかく、抽象的なグラデーションで、鮮やかな色相のぼやけた遷移があり、穏やかで夢のような雰囲気を作り出す

より大胆なテクスチャを持つフローラルの方向性に行くには、次のようなプロンプトを使用します。

ミッドセンチュリーのカラーフィールド絵画のスタイルで、ぼやけた、ピントの合っていない、抽象的な花のクローズアップ写真

空をイメージした、自然に癒されるグラデーションを追求するには、次のようなプロンプトを使用できます。

夕暮れ時の空の明るくぼやけたイラスト、ピントが合っていない、動きを呼び起こす、35mm、多様な輪郭、鮮やか、輝かしい、楽観的、広い色のスペクトル

クロップを除き、表示されている画像は生の、編集されていない出力です。

結果は予期しないものかもしれませんが、楽しいものです。スロットマシンを十分に回せば、ペイアウトが得られます。

DALL·E 2のようなツールでは、制約が創造性を開きます。ここでは3つの方向性を示しましたが、可能性は無限です。