2015.11.24

グラフィック

グラデーション(gradation)

グラデーションとは色が段階的に変化する様子のことで、この色変化の様子を画像にしたものがグラデーション画像です。以下がグラデーション画像の例で、左端の赤色から右端の青色まで滑らかに変化しています。

グラデーション画像

グラデーション画像を作る

ここでは、指定した開始色と終了色の間の色を計算し、グラデーション画像を作る方法を解説します。

まず、２点間の色の値を計算する式について説明します。これは開始位置（距離d=0.0）の色(R1,G1,B1)と終了位置（距離d=1.0）の色(R2,G2,B2)が与えらた時、距離dの色を求める計算問題として解くことが出来ます。図で書くと以下のようになります。

グラデーション計算問題

色の変化を距離との比例関係で表すと以下のような式になります。

グラデーション計算式

距離d=0.0のときR=R1・G=G1・B=B1、距離d=1.0のときR=R2・G=G2・B=B2となる計算式になりました。この計算式に0.0未満、1.0より大きい距離dを指定することも可能ですが、計算結果のR・G・B値が0～255の範囲を超えることがあるので、その場合にはが0未満を0に、255より大きければ255にする必要があります。

読んでほしいコンテンツ

横方向に色を滑らかに変化するグラデーション画像を作成する方法を解説しています。ソースコード付きです。

2020.03.23

画像の中心から放射状に色を滑らかに変化するグラデーション画像を作成する方法を解説しています。ソースコード付きです。

2020.03.23

画像の４隅の色を与えてグラデーション画像を作成する方法を解説しています。ソースコード付きです。

2015.12.02

画像フォーマット形式・色・大きさ・傾きなどの変更、特定の図形（文字・記号など）を見つけたり、取り出したりする画像処理について詳しく解説。

2015.11.29

数学に関係するJavaのメソッドやソースコードなどを紹介しています。

2022.10.25

プログラミング、ＩＴに関する用語をまとめています。

2022.10.17

関連コンテンツ

画像って何？

2022.07.25

２つの座標(x1,y1)と(x2,y2)の直線距離を求める計算式は？

2020.03.23

ＰＣやスマートフォンのディスプレイに表示されている色、プリンターで印刷される色の仕組みについて解説しています。

2020.03.23

横方向に色を滑らかに変化するグラデーション画像を作成する方法を解説しています。ソースコード付きです。

2020.03.23

画像の中心から放射状に色を滑らかに変化するグラデーション画像を作成する方法を解説しています。ソースコード付きです。

2020.03.23

画像の４隅の色を与えてグラデーション画像を作成する方法を解説しています。ソースコード付きです。

2015.12.02

一般に使われている画像の色の種類ってどんなものがありますか？。色の種類ごとの用途も説明しています。

2015.12.22

広告

【PR】初心者も安心のサポート充実【DMM FX】