グラデーションの作り方の原理をお願いします。

例えば基本の色#FF0000を中間の色として前後にグラデーションを作るとき、
FBGはそれぞれどれくらいずつ増減していけばよいのか、
また、始点と終点の色をはじめに決めておき、その間をグラデーションとして
表現する場合等です。
Windowsのソフトで「色の作成」を選択したときに一番右端に出てくる
あのグラデーションの作り方を探しています。
別に任意のグラデーションを作成したい場合ではありません。その原理というか、
仕組みというか、アルゴリズムです。
なのでソフトウェアの紹介の必要はありません。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/07/22 15:08:16
  • 終了:--

回答(7件)

id:Ooooooooooooooo No.1

Ooooooooooooooo回答回数93ベストアンサー獲得回数02004/07/22 15:19:03

ポイント20pt

あれは、HSB色空間にしてBをmax - min で振るんです、

RGBとHSBの相互変換アルゴリズムを探せばすぐわかります。

id:sls

ありがとうございます。

2004/07/22 16:08:46
id:aki73ix No.2

aki73ix回答回数5224ベストアンサー獲得回数272004/07/22 15:27:58

ポイント20pt

FBGではなくてRGBではないですか?

始点・終点の色をまずRGB分解して

それぞれR(赤)G(緑)B(青)ごとに間の距離を計算して重み付けを内分と同じ計算方法で算出します

具体的には

始点を0(r,g,b)終点をF(R,G,B)とした時

位置Xの色は

( {R*X+r*(F-X)}/F,{G*X+g*(F-X)}/F,{B*X+b*(F-X)}/F )になります。

例えば、長さ100で位置60で

(0,0,255) (255,128,0)をグラデーションすると(255*0.6+0*0.4,128*0.6+0*0.4,0*0.6+255*0.4)

で(153,76,102)になります

中間が決まっている場合は、一方の端が決まれば、その間の色に対する補色を逆側に持ってきて2回グラデーションを行うのが一般的です。

中間の色が #ff0000で端が #00ff00 ならば #0000ff

#4080a0 ならば #408060 という感じでしょうか

id:sls

ありがとうございます。

>FBGではなくてRGBではないですか?

そのとおりです。

2004/07/22 16:12:39
id:TakamiChie No.3

高見知英回答回数59ベストアンサー獲得回数02004/07/22 15:36:48

ポイント11pt

 URLは関係無しです。

 開始色(A色とする)から終了色(B色とする)へ、徐々に遷移していくのが、グラデーションです。

たとえばRGBならば、それぞれのRGBから、1ピクセルごとに変化させるべき量を割り出し((B-A) / Width)、

A色にその量を足していくわけです。

Windowsの色の作成ダイアログは、HSLを少しずつずらしていっていますね。

確かHSLを直接得る方法は(Windowsには)なかったと思いますので、

いくつかの計算式が必要だったと思いますけど。

id:sls

ありがとうございます。

ちょっと指示語が多くてわかりにくかったです。

出来ればいわしでもいいのでもう少し具体的なご説明をお願いできますでしょうか。

2004/07/22 16:14:58
id:Momonga No.4

Momonga回答回数20ベストアンサー獲得回数02004/07/22 15:58:36

ポイント11pt

http://www1.odn.ne.jp/artistic/color/

Color's 〜 色、カラーチャートなど色彩に関する入門サイト

URLは参考まで。

色を発色させる際、16進表記だと00からFFまで、10進表記で0から255までがひとつの色で表現できる事になります。

数字が小さいほど暗く、大きいほど明るくなります。

グラデーションを作る際には、等間隔で明→暗、暗→明を作っていけばよい事になります。

0から255まで、正確に分けるならば、3、5、17、51などが考えられ、これを基準に色を分けていけば良いと思いますが、こだわる必要もないと思います。

後は、増減分に配慮しながら色分けしていけば、グラデーションさせることはできます。

複数の色に値を持たせている場合でも、やはり同様に等間隔で増減させればよいかと。

id:sls

ありがとうございます。

> 0から255まで、正確に分けるならば、3、5、17、51などが考えられ、これを基準に色を分けていけば良い

うーん、わかるようなわからないような、です。

具体的に示していただくとたすかります。

2004/07/22 16:23:03
id:aki73ix No.5

aki73ix回答回数5224ベストアンサー獲得回数272004/07/22 16:53:34

ポイント20pt

上はグラデーションの作り方のサンプルプログラムで下はソースです(C++Builder)

実際のソースを照らし合わせてみた方が分かり易いかと思います(^^;

r1=(r*(l-i-1)+R*i)/(l-1);

これは赤の成分を出してるわけですが

lは横幅の最大座標です ですから幅はl-1です

iが描画するx座標ですその割合をr と Rで掛け算してその座標の赤成分の値を求めます

では、以下ソース

注:’と”と¥が全角に化けます

//r_str2hexは文字列をHexにするサブルーチン

int r_str2hex(const char *d){

__asm{

mov edx,d

xor eax,eax

L0: mov cl,[edx]

or cl,’ ’

cmp cl,’f’

ja L1

sub cl,’0’

jb L1

cmp cl,10

jb L2A

sub cl,’a’-’0’-10

jc L1

cmp cl,10

jb L1

cmp cl,16

jae L1

L2A: shl eax,4

or al,cl

inc edx

jmp L0

L1:

}

}

void __fastcall TForm1::Button1Click(TObject *Sender)

{

int rgb1,rgb2;

int r,g,b;

int R,G,B;

int l;

Memo1->Clear();

//16進数変換

rgb1=r_str2hex(Edit1->Text.c_str());

rgb2=r_str2hex(Edit2->Text.c_str());

//キャンバスサイズ読み出し

Image1->Picture->Bitmap->Width=Image1->Width;

Image1->Picture->Bitmap->Height=Image1->Height;

//よこはば

l=Image1->Width;

//RGB抽出

b=rgb1%256;

B=rgb2%256;

g=(rgb1>>8)%256;

G=(rgb2>>8)%256;

r=rgb1>>16;

R=rgb2>>16;

for(int i=0;i<l;i++){

int r1,g1,b1;

char rgbstr[16];

//距離からグラデーションを計算

r1=(r*(l-i-1)+R*i)/(l-1);

g1=(g*(l-i-1)+G*i)/(l-1);

b1=(b*(l-i-1)+B*i)/(l-1);

//描画処理

for(int j=0;j<Image1->Height;j++)Image1->Picture->Bitmap->Canvas->Pixels[i][j]=r1+(g1<<8)+(b1<<16);

//16進数表現

wsprintf(rgbstr,”%d:%02x%02x%02x”,i+1,r1,g1,b1);

//テキスト出力

Memo1->Lines->Add(rgbstr);

}

}

id:sls

とってもわかりやすかったです。

ご説明していただいた内容をそのまま実践していただいたわけですね。

しかも実行モジュールまでご用意していただけるとは。。。

実は自分で作ろうと思っていたんですよ。

デスクトップから好きな色をスポイトで取得してそのグラデーションを

作るというものを。

ホームページとか作るときに、ページに統一感を出すために

ある一色(又は2色)をベーシックカラーに決めたら後はそのグラデーション

を元にすれば簡単にスタイルシートの色設定が決まるっていう考えからなんです。

ドロー系のソフトの色設定画面で出来ないこともないんですが、

いちいち色のRBGを入力するのが面倒だったので、色の勉強も兼ねて

質問させていただきました。

ああ、こんな短時間で作成していただいてしまった。

応用させていただきます。

ありがとうございました。

2004/07/22 17:33:30
id:fms No.6

fms回答回数10ベストアンサー獲得回数02004/07/22 17:27:52

ポイント20pt

まず、基本的に色はR:赤、G:緑、B:青の00〜FF(十進法ならば0〜255)で表現されるので、

終点の赤色の値を oR、始点の赤色の値を eR、グラデーションを描く幅を Width とすると、

(oR-oR)/Width

で1ピクセルにおける赤においての増/減分値が求まります。

つまり、原点をx0としたxでの赤の色R’ は

R’=oR + (eR - oR) / width * | x - x0 |

で求まります。

「色の作成」の右側のようなものはスライダの真ん中を原点として

各色に対して

上端を終点として終点の色をFFFFFFにして上に向かって描画

下端を終点として終点の色を000000にして下に向かって描画

するとできます。

ただし、滑らかになるので本物のようにしたければとびとびに描く必要がありますが

id:sls

ありがとうございます。

非常にわかりやすいです。

2004/07/22 17:36:17
id:k318 No.7

k318回答回数2622ベストアンサー獲得回数22004/07/22 19:32:59

ポイント4pt

http://www.geocities.co.jp/SiliconValley-Cupertino/3384/CG.html

コンピュータグラフィックス(CG)

線形補完で直線描画ができますし、色のグラデーションを作ったり、画像の半透明処理なんかも出来ます。とのことです。

id:sls

うーん

2004/07/25 18:57:03

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません