ゆるゆるプログラミング

・グラデーション

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

グラデーション画像

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

まず、2点間の色の値を計算する式について説明します。これは開始位置(距離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にする必要があります。

■グラデーション画像作成プログラム

グラデーション画像(横方向)      グラデーション画像(横方向)の作成方法を解説
グラデーション画像(放射状)      グラデーション画像(放射状)の作成方法を解説
グラデーション画像(4隅の色)      グラデーション画像(4隅の色)の作成方法を解説

■関連コンテンツ

光と色の3原色 光と色の3原色の考え方を解説
画像の色 画像の色について解説
画像ファイル形式 画像ファイル形式について解説
for文 繰り返し処理に使用するfor文について解説
コマンドライン引数 外部からの値を受け取る方法について解説

■新着情報

2017.11.17 N値化 カラー画像をN値化する方法について解説
2017.11.16 最も近い値の取得 指定値に最も近い配列の値を取得する方法を解説
2017.10.02 アルファ値(透過) アルファ値(透過)について

■広告

法人向けのETC専用カード

~約8,000名の受講生と80社以上の導入実績~ 企業向けプログラミング研修ならCodeCamp

日本最大級ショッピングサイト!お買い物なら楽天市場

Topへ