人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: sls
●カテゴリ:コンピュータ 芸術・文化・歴史
✍キーワード:Windows アルゴリズム グラデーション ソフト ソフトウェア
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● Ooooooooooooooo
●20ポイント

http://www.google.com/search?sourceid=navclient&hl=ja&ie=UTF-8&o...

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

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

◎質問者からの返答

ありがとうございます。


2 ● aki73ix
●20ポイント

http://www.geocities.co.jp/SiliconValley-Oakland/9582/renders/pr...

レンダリングアルゴリズム

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 という感じでしょうか

◎質問者からの返答

ありがとうございます。

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

そのとおりです。


3 ● 高見知英
●11ポイント

http://Onpu.jpn.ch/

おんぷ村

URLは関係無しです。

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

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

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

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

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

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

◎質問者からの返答

ありがとうございます。

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

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


4 ● Momonga
●11ポイント

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

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

URLは参考まで。

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

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

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

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

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

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

◎質問者からの返答

ありがとうございます。

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

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

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


5 ● aki73ix
●20ポイント

http://nifberry.727.net/test/hatena39.lzh

上はグラデーションの作り方のサンプルプログラムで下はソースです(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);

}

}

◎質問者からの返答

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

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

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

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

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

作るというものを。

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

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

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

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

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

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

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

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

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


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ