| Re: グラデーションを描画したい ( No.1 ) |
- 名前：管理人 日時：2020/04/05 04:16
> 例えばですが描画する範囲を指定するための座標が4つと
> グラデーションとなるための色のポイントを(描画範囲外を含めて)複数指定できるような関数を想像しております
うーん微妙に追加しても使われる方がかなり限定されるような…
具体的にはどのような表現をされたいのでしょうか？
> また、LoadSoundMemで取得したサウンドハンドルから元ファイルのパスを取得する関数を実装することは可能でしょうか
> 現在のDxライブラリではファイルパスは保存しておらず、
> 余分な処理を付け加える必要がある場合は自身でラッパー関数を作ります
はい、お察しの通りＤＸライブラリではファイルパスを保存していませんので、
申し訳ありませんがラッパー関数での対応をお願いします m(_ _)m
|
| Re: グラデーションを描画したい ( No.2 ) |
- 名前：にこよう 日時：2020/04/05 22:50
こんばんは、ご返信ありがとうございます
>うーん微妙に追加しても使われる方がかなり限定されるような…
>具体的にはどのような表現をされたいのでしょうか？
以下のサイトの様なグラデーションによる背景や
www.go-next.co.jp/blog/web/html_css/25027/
ゲーム内でのエフェクト(動いたら背景に色が残っていくような)として使用したいと考えております
長い記事ですみません
おっしゃる通りゲーム上の動作ではdrawboxで十分で、きれいに見せるためだけに使用するので必要性は余りないかと思います
しかし、(使う側からすれば)drawboxの様な簡単さ、手軽さで、綺麗な表現ができるため、
それなりに使用する機会のある方や、グラデーションの隠し関数を探した方は居るのではないかと思います
背景に合うフリーな画像が無い、または自前で画像を用意することが出来ない際に高品質な雰囲気を出すことが出来で、
画像の背景と違い、アニメーションを付けることが出来るので重宝します
webサイトとゲームは違うかもしれませんが、以下の様なグラデーションを使用したwebサイトはよく見かけます
nicoyougame.starfree.jp/signin/signin.php
今一度ご一考いただければ幸いです
>はい、お察しの通りＤＸライブラリではファイルパスを保存していませんので、
>申し訳ありませんがラッパー関数での対応をお願いします m(_ _)m
分かりました
先にこちらも聞いておくべきだったのかもしれませんが
LoadSoundMemFromSoftSound()
の反対の関数はありますでしょうか？
サウンドハンドルからソフトサウンドハンドルを生成したいので、
最初のスレッドの様な質問をさせていただきました
|
| Re: グラデーションを描画したい ( No.3 ) |
- 名前：管理人 日時：2020/04/05 22:43
> 以下のサイトの様なグラデーションによる背景や
> https://www.go-next.co.jp/blog/web/html_css/25027/
> ゲーム内でのエフェクト(動いたら背景に色が残っていくような)として使用したいと考えております
> 長い記事ですみません
こちらのサイトで紹介されている四角形の領域に縦方向に行われているグラデーションでしたら
dxlib.xsrv.jp/cgi/patiobbs/patio.cgi?mode=view&no=4138
↑こちらのグラデーション描画で実現できそうなのですが、
にこようさんが実現されようと考えているグラデーションは四角形縦グラデーションと
円形グラデーションのどちらでしょうか？
> LoadSoundMemFromSoftSound()
> の反対の関数はありますでしょうか？
ありません
なので、LoadSoundMem を行うタイミングで LoadSoftSound も実行してください m(_ _)m
> あと、記事を修正する際に、記事を投稿する時の禁止用語フィルターが機能していません
> 修正する必要性があるかは分かりませんが、一応報告させていただきます
> 例としてスレッド中にリンクを貼らさせていただきました、不適切であれば修正いたします
禁止用語やリンク貼り付け禁止は迷惑書き込み防止のための処理で、今のところ編集を使っての
迷惑書き込みは行われていないので、悪用されるようになったら対応したいと思います
一応にこようさんも編集を使ってリンクを有効にしたりはしないようにしてください m(_ _)m
( 周知されてしまうと悪用される確率も高くなるので… )
|
| Re: グラデーションを描画したい ( No.4 ) |
- 名前：にこよう 日時：2020/04/05 23:10
ご回答ありがとうございます
>にこようさんが実現されようと考えているグラデーションは四角形縦グラデーションと
>円形グラデーションのどちらでしょうか？
四角形なのですが、縦横ではなく指定した線上(斜めなども含む)に複数の色を指定できるグラデーションを想像しております
上のサイト(.go-next.co.jp/blog/web/html_css/25027/)のページ内の一番下の画像の、
さらに左下のグラデーションの様なものです
サイト内では一色一色関数で指定していますが、これを構造体などで指定できるようなものです
上サイトから引用:
//正方形の描画処理
square.beginPath();
square_color.addColorStop(0.0 , 'rgb(255,253,230)');//卯花色
square_color.addColorStop(0.1 , 'rgb(0,163,219)'); //シアン
square_color.addColorStop(0.2 , 'rgb(185,116,164)');//菖蒲色
square_color.addColorStop(0.3 , 'rgb(237,160,152)');//珊瑚色
square_color.addColorStop(0.4 , 'rgb(227,190,136)');//枯草色
square_color.addColorStop(0.5 , 'rgb(54,176,131)'); //コバルトグリーン
square_color.addColorStop(0.6 , 'rgb(100,61,97)'); //京紫
square_color.addColorStop(0.7 , 'rgb(255,235,88)'); //菜の花色
square_color.addColorStop(0.8 , 'rgb(0,12,43)'); //インディゴ
square_color.addColorStop(0.9 , 'rgb(160,202,90)'); //萌黄
square_color.addColorStop(1.0 , 'rgb(217,93,151)'); //牡丹色
square.fillStyle = square_color;
square.fillRect(100, 400, 300, 300);
>ありません
>なので、LoadSoundMem を行うタイミングで LoadSoftSound も実行してください m(_ _)m
分かりました
迷惑書き込みの内容に関する書き込みは全て削除しておきました
 |
| Re: グラデーションを描画したい ( No.5 ) |
- 名前：sereparu 日時：2020/04/06 13:29
横から失礼します。
> 四角形なのですが、縦横ではなく指定した線上(斜めなども含む)に複数の色を指定できるグラデーションを想像しております
> 上のサイト(.go-next.co.jp/blog/web/html_css/25027/)のページ内の一番下の画像の、
> さらに左下のグラデーションの様なものです
グラデーションをプログラム上でリアルタイムに生成するのではなく
グラデーションのある画像を生成できれば十分ということであれば
以下のようなフリーソフトを使えば手軽に生成できます。
（斜めのグラデーションを作成したり、グラデーション情報の保存もできます）
複数色グラデーション作成君
vector.co.jp/soft/winnt/art/se503896.html
見当違いな回答でしたらすみません。
|
| Re: グラデーションを描画したい ( No.6 ) |
- 名前：にこよう 日時：2020/04/06 20:43
>sereparuさん
フリーソフトの紹介有難うございます
リンク先に移動してみたのですが、リダイレクトされてvectorのtopに戻ってしまいます
また、紹介していただいたうえで申し訳ないのですが、
色を徐々に変化させたり別の色を徐々に追加したり、と言った演出を表現してみたかったため
静止画では難しいと思います
色の変化のイメージを貼っておきます
ics-creative.github.io/151124_createjs_waves/examples/0_bg.html
|
| Re: グラデーションを描画したい ( No.7 ) |
- 名前：sereparu 日時：2020/04/07 14:15
> リンク先に移動してみたのですが、リダイレクトされてvectorのtopに戻ってしまいます
すみません。URLではリダイレクトされてしまうので
Googleで「複数色グラデーション作成君」で検索すると、トップに出てくると思います。
> 色の変化のイメージを貼っておきます
> ics-creative.github.io/151124_createjs_waves/examples/0_bg.html
このような徐々に変化するグラデーションは、グラデーションの画像と単色の画像の2つを用意して
アルファブレンドなどを使えば実現できそうな気がします。
例えば、上記イメージのように青と緑のグラデーションの画面から青の単色の画面に徐々に変化させたい場合
青と緑のグラデーションの画像の上に、初めに青の単色画像を完全に透明で描画して
時間経過とともに、青の単色画像だけ透明度を徐々に下げていけば
徐々にグラデーションが変化するような演出ができるかと思います。
青の単色画像が完全に表示されたタイミングで、次の色の画像のグラフィックハンドルに切り替えて
同じことを繰り返せば、イメージに近いことができるかと思います。
おおまかに以下のような処理になるかと思います。
（グラデーションの種類だけ画像を用意する必要があるので少し無理のある方法ですが、参考程度に）
// 描画ブレンドモードをノーブレンドにする
SetDrawBlendMode( DX_BLENDMODE_NOBLEND , 0 ) ;
// 青と緑のグラデーション画像を描画
DrawGraph( 0 , 0 , BlueGreenGradationGHandle , TRUE ) ;
// 描画ブレンドモードをアルファブレンドにする
// palの初期値は0（完全に透明）
SetDrawBlendMode( DX_BLENDMODE_ALPHA , pal ) ;
// 青の単色画像を描画
DrawGraph( 0 , 0 , BlueGHandle , TRUE ) ;
// palの値を加算（青い画像の透明度を徐々に下げる）
pal++;
// （palが255になったら、palを0に戻して
// 今度は青の単色画像をノーブレンドで描画して
// その上に青と紫のグラデーション画像をアルファブレンドで描画する、というように繰り返す）
|
| Re: グラデーションを描画したい ( No.8 ) |
- 名前：にこよう 日時：2020/04/07 23:19
>おおまかに以下のような処理になるかと思います。
>（グラデーションの種類だけ画像を用意する必要があるので少し無理のある方法ですが、参考程度に）
サンプルコードまで書いていただいてありがとうございます
この方法で実装する必要が出来た時に活用させていただきますm(__)m
>すみません。URLではリダイレクトされてしまうので
>Googleで「複数色グラデーション作成君」で検索すると、トップに出てくると思います。
確認できました
|
| Re: グラデーションを描画したい ( No.9 ) |
- 名前：管理人 日時：2020/04/08 06:51
> 四角形なのですが、縦横ではなく指定した線上(斜めなども含む)に複数の色を指定できるグラデーションを想像しております
> 上のサイト(.go-next.co.jp/blog/web/html_css/25027/)のページ内の一番下の画像の、
> さらに左下のグラデーションの様なものです
ご返答ありがとうございます
dxlib.xsrv.jp/cgi/patiobbs/patio.cgi?mode=view&no=4138
↑このスレッドで使用している DrawPolygon2D を使用して、ご紹介いただいたサイトのグラデーションを再現してみましたので、よろしければご覧ください m(_ _)m
#include "DxLib.h"
int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow )
{
// ウインドウモードで起動
ChangeWindowMode( TRUE ) ;
// ＤＸライブラリの初期化
if( DxLib_Init() < 0 ) return -1 ;
// 描画先を裏画面にする
SetDrawScreen( DX_SCREEN_BACK ) ;
// 画面のクリア
ClearDrawScreen() ;
VECTOR Position[ 11 * 2 ] ;
COLOR_U8 Color[ 11 ] ;
VERTEX2D Vertex[ 10 * 6 ] ;
float DrawX = 60.0f ;
float DrawY = 30.0f ;
float SizeX = 300.0f ;
float SizeY = 300.0f ;
float SideX = -SizeY / 2.0f + 4.0f ;
float SideY = SizeX / 2.0f + 4.0f ;
// 描画範囲を設定
SetDrawArea( ( int )DrawX, ( int )DrawY, ( int )( DrawX + SizeX ), ( int )( DrawY + SizeY ) ) ;
// ポリゴンの頂点座標を算出
for( int i = 0; i < 11; i++ )
{
Position[ i * 2 ].x = DrawX + SideX + i * SizeX / 10 ;
Position[ i * 2 ].y = DrawY + SideY + i * SizeY / 10 ;
Position[ i * 2 ].z = 0 ;
Position[ i * 2 + 1 ].x = DrawX - SideX + i * SizeX / 10 ;
Position[ i * 2 + 1 ].y = DrawY - SideY + i * SizeY / 10 ;
Position[ i * 2 + 1 ].z = 0 ;
}
// 頂点の色を準備
Color[ 0 ] = GetColorU8( 255, 253, 230, 255 ) ;
Color[ 1 ] = GetColorU8( 0, 163, 219, 255 ) ;
Color[ 2 ] = GetColorU8( 185, 116, 164, 255 ) ;
Color[ 3 ] = GetColorU8( 237, 160, 152, 255 ) ;
Color[ 4 ] = GetColorU8( 227, 190, 136, 255 ) ;
Color[ 5 ] = GetColorU8( 54, 176, 131, 255 ) ;
Color[ 6 ] = GetColorU8( 100, 61, 97, 255 ) ;
Color[ 7 ] = GetColorU8( 255, 235, 88, 255 ) ;
Color[ 8 ] = GetColorU8( 0, 12, 43, 255 ) ;
Color[ 9 ] = GetColorU8( 160, 202, 90, 255 ) ;
Color[ 10 ] = GetColorU8( 217, 93, 151, 255 ) ;
// 全ての頂点の固定の値となる変数を設定
for( int i = 0; i < 10 * 6; i++ )
{
Vertex[ i ].rhw = 1.0f ;
Vertex[ i ].u = 0.0f ;
Vertex[ i ].v = 0.0f ;
}
// 描画するポリゴンの座標と色を設定
for( int i = 0; i < 10; i++ )
{
Vertex[ i * 6 ].pos = Position[ i * 2 ] ;
Vertex[ i * 6 ].dif = Color[ i ] ;
Vertex[ i * 6 + 1 ].pos = Position[ i * 2 + 1 ] ;
Vertex[ i * 6 + 1 ].dif = Color[ i ] ;
Vertex[ i * 6 + 2 ].pos = Position[ ( i + 1 ) * 2 ] ;
Vertex[ i * 6 + 2 ].dif = Color[ i + 1 ] ;
Vertex[ i * 6 + 3 ].pos = Position[ ( i + 1 ) * 2 + 1 ] ;
Vertex[ i * 6 + 3 ].dif = Color[ i + 1 ] ;
Vertex[ i * 6 + 4 ].pos = Position[ ( i + 1 ) * 2 ] ;
Vertex[ i * 6 + 4 ].dif = Color[ i + 1 ] ;
Vertex[ i * 6 + 5 ].pos = Position[ i * 2 + 1 ] ;
Vertex[ i * 6 + 5 ].dif = Color[ i ] ;
}
// ポリゴンを20個描画
DrawPolygon2D( Vertex, 20, DX_NONE_GRAPH, FALSE ) ;
// 裏画面の内容を表画面に反映
ScreenFlip() ;
// キー入力待ち
WaitKey() ;
// ＤＸライブラリの後始末
DxLib_End() ;
// ソフトの終了
return 0 ;
}
|
| Re: グラデーションを描画したい ( No.10 ) |
- 名前：にこよう 日時：2020/04/08 09:46
>↑このスレッドで使用している DrawPolygon2D を使用して、ご紹介いただいたサイトのグラデーションを再現してみましたので、よろしければご覧ください m(_ _)m
サンプルコードを書いていただきありがとうございます
とりあえずコピペで描画結果だけ確認してみましたが、想像していた通りの描画結果でした
恐らく自分でやりたかったことがこれでできると思います
ポリゴンと言うのをいまいち理解できていないので、このように描画できるとは思いませんでした
ただ、コードがすぐにアレンジするには少々難しく、自身で変更できないと意味がない為
色々変更しながら使い方を確認していきたいと思います
元々描画したかったものが描画できたら、ここに報告しに戻ってきます
|
| Re: グラデーションを描画したい ( No.11 ) |
- 名前：にこよう 日時：2020/04/17 16:39
このような描画を引数から指定できる関数を作ろうと考えていたのですが、
様々な方向のグラデーションに対応するのが難しかったため、
頂いたコードを変形させてそのまま使わせていただきます
ありがとうございましたm(__)m
また、これとは別のことになるのですが、
dxlib.xsrv.jp/cgi/patiobbs/patio.cgi?mode=view&no=4138
このスレッドの関数を、全ての頂点の色を指定できるように改変した関数でグラデーションを描画した時に
４か所ともに違う色を指定すると三角形を結合させているのが分かるようなラインが真ん中に出てしまいます
もう少し自然に4点のグラデーションを見せる方法はありますでしょうか？
dotup.org/uploda/dotup.org2115013.png
dotup.org/uploda/dotup.org2115015.png
// グラデーションカラーの四角形を描画する
int DrawBoxGrad(int x1, int y1, int x2, int y2, int Colorlt, int Colorrt, int Colorlb, int Colorrb, bool AutoColorChange)
{
int red[4], green[4], blue[4];
if (Colorlb == 0) Colorlb = Colorlt; // 四角形の左下の色が指定されていなければ上の色をコピーする
if (Colorrb == 0) Colorrb = Colorrt; // 四角形の右下の色が指定されていなければ上の色をコピーする
GetColor2(Colorlt, &red[0], &green[0], &blue[0]);
GetColor2(Colorrt, &red[1], &green[1], &blue[1]);
GetColor2(Colorlb, &red[2], &green[2], &blue[2]);
GetColor2(Colorrb, &red[3], &green[3], &blue[3]);
if (AutoColorChange)
{
for (int i = 0; i < 4; i++)
{
int h, l, s;
RGBtoHLS(red[i], green[i], blue[i], &h, &l, &s);
int color_h = GetColorHLS(h + GetKey(KEY_COUNT), l, s); // 少しづつ色を変化させる
GetColor2(color_h, &red[i], &green[i], &blue[i]);
}
}
VERTEX2D vertex[6];
for (int i = 0; i < 6; i++)
{
vertex[i].pos.z = 0.0f;
vertex[i].rhw = 1.0f;
vertex[i].dif.a = 0xff;
vertex[i].u = 0.0f;
vertex[i].v = 0.0f;
}
// 左上の頂点の情報をセット ( 1ポリゴン目の第1頂点 )
vertex[0].pos.x = static_cast<float>(x1);
vertex[0].pos.y = static_cast<float>(y1);
vertex[0].dif.r = static_cast<BYTE>(red[0]);
vertex[0].dif.g = static_cast<BYTE>(green[0]);
vertex[0].dif.b = static_cast<BYTE>(blue[0]);
// 右上の頂点の情報をセット ( 1ポリゴン目の第2頂点 )
vertex[1].pos.x = static_cast<float>(x2);
vertex[1].pos.y = static_cast<float>(y1);
vertex[1].dif.r = static_cast<BYTE>(red[1]);
vertex[1].dif.g = static_cast<BYTE>(green[1]);
vertex[1].dif.b = static_cast<BYTE>(blue[1]);
// 左下の頂点の情報をセット ( 1ポリゴン目の第3頂点 )
vertex[2].pos.x = static_cast<float>(x1);
vertex[2].pos.y = static_cast<float>(y2);
vertex[2].dif.r = static_cast<BYTE>(red[2]);
vertex[2].dif.g = static_cast<BYTE>(green[2]);
vertex[2].dif.b = static_cast<BYTE>(blue[2]);
// 右下の頂点の情報をセット ( 2ポリゴン目の第1頂点 )
vertex[3].pos.x = static_cast<float>(x2);
vertex[3].pos.y = static_cast<float>(y2);
vertex[3].dif.r = static_cast<BYTE>(red[3]);
vertex[3].dif.g = static_cast<BYTE>(green[3]);
vertex[3].dif.b = static_cast<BYTE>(blue[3]);
vertex[4] = vertex[2]; // 2ポリゴン目の第2頂点は左下の頂点なのでコピー
vertex[5] = vertex[1]; // 2ポリゴン目の第3頂点は右上の頂点なのでコピー
return DrawPolygon2D(vertex, 2, DX_NONE_GRAPH, FALSE); // ポリゴンを2個描画する
}
|
| Re: グラデーションを描画したい ( No.12 ) |
- 名前：kanamaru 日時：2020/04/17 16:51
よくわからないけど、グラデーションを作るのにポリゴンを使っている理由ってあるんですか？
少なくとも二方向ならDrawLineで描画できると思うし、（辺と並行じゃないときが大変だけど。）
四方向でもDrawPixel使えば描画できると思うし、
その真ん中に出てくるというラインもなくなるはず。
もしかしたら処理速度の都合でよくない方法なのかもしれないですが、
なぜかポリゴンを使うことが前提に話が進んでいるのでちょっと気になりました。
|
| Re: グラデーションを描画したい ( No.13 ) |
- 名前：にこよう 日時：2020/04/17 17:07
>kanamaruさん
確かにDrawPixelを使用すれば描画できますが、画面サイズ分(1280x720)dotを描画するだけで
かなり処理落ちするので自分で1点ずつ描画する方法は現実的ではないと思います
また、DrawPixelを除けば上のスレッド以外の方法は知らないため、ポリゴンでやろうとしています
DrawLineを使った方法も試してみました
処理落ちはしなかったので2方向はこちらの方法でも問題ないと思われます
|
| Re: グラデーションを描画したい ( No.14 ) |
- 名前：kanamaru 日時：2020/04/17 18:33
処理落ちするのは確かに現実的ではないですね。
理解しました。
説明ありがとうございます。
|
| Re: グラデーションを描画したい ( No.15 ) |
- 名前：kanamaru 日時：2020/04/17 19:45
ポリゴンを使う理由に納得したところで、話を戻しますが、
真ん中のラインの原因は、おそらくポリゴンを2つ使っていることです。
ポリゴンの境目でグラデーションが上手く繋がらなかったのだと考えられます。
なので、解決策としては管理人さんに四角ポリゴンを使えるように頼むことだと思います。
とはいえ、管理人さんが大変だと思うので代替案を提案しておきます。
DrawPixelを使う方法は、発想はいいはず。
とはいえ処理落ちはダメなので、考えたところ、
1個思い浮かびました。
ソフトウェアイメージ使えませんか？
あれならピクセルごとに処理するためのものなので、
より高速に処理できるはず。
ちょっと今パソコンを操作出来る状態では無いので、
実際のプログラムは明日までお待ちください。
|
| Re: グラデーションを描画したい ( No.16 ) |
- 名前：にこよう 日時：2020/04/17 22:13
>ソフトウェアイメージ使えませんか？
そのようなものがあるのですね
"ソフトウェアイメージ"について調べてみましたが、
MakeSoftImage()⇒DrawPixelSoftImage()⇒DrawSoftImage()という形でしょうか？
4方向のグラデーションを作る方法を含めて、簡単には思いつきませんでした...
>実際のプログラムは明日までお待ちください。
ありがとうございます、また明日自分でも考えてみようと思います
|
| Re: グラデーションを描画したい ( No.17 ) |
- 名前：かめのこにょこにょこ 日時：2020/04/18 00:51
> 11
4点の補間を2つの三角形で行うと、それらの三角形をつなぎ合わせた線の前後で大きく勾配が変化してしまうので、
4点の中点 (その4点を結んだ時にできる四角形の重心) を追加して、4つの三角形をつなぎ合わせると、
ある程度はつなぎ合わせた線の前後での勾配の変化を抑えることができると思ったので
その実装を書いてみました。
```cpp
// Online Sample: nokotan.github.io/WebAssemblyStudio/?f=fdm81i856i9
// グラデーションカラーの四角形を描画する
int DrawBoxGrad(int x1, int y1, int x2, int y2, int Colorlt, int Colorrt, int Colorlb, int Colorrb, bool AutoColorChange)
{
int red[4], green[4], blue[4];
if (Colorlb == 0) Colorlb = Colorlt; // 四角形の左下の色が指定されていなければ上の色をコピーする
if (Colorrb == 0) Colorrb = Colorrt; // 四角形の右下の色が指定されていなければ上の色をコピーする
GetColor2(Colorlt, &red[0], &green[0], &blue[0]);
GetColor2(Colorrt, &red[1], &green[1], &blue[1]);
GetColor2(Colorlb, &red[2], &green[2], &blue[2]);
GetColor2(Colorrb, &red[3], &green[3], &blue[3]);
if (AutoColorChange)
{
for (int i = 0; i < 4; i++)
{
int h, l, s;
RGBtoHLS(red[i], green[i], blue[i], &h, &l, &s);
int color_h = GetColorHLS(h + GetKey(KEY_COUNT), l, s); // 少しづつ色を変化させる
GetColor2(color_h, &red[i], &green[i], &blue[i]);
}
}
VERTEX2D vertex[5];
for (int i = 0; i < 5; i++)
{
vertex[i].pos.z = 0.0f;
vertex[i].rhw = 1.0f;
vertex[i].dif.a = 0xff;
vertex[i].u = 0.0f;
vertex[i].v = 0.0f;
}
// 左上の頂点の情報をセット
vertex[0].pos.x = static_cast<float>(x1);
vertex[0].pos.y = static_cast<float>(y1);
vertex[0].dif.r = static_cast<BYTE>(red[0]);
vertex[0].dif.g = static_cast<BYTE>(green[0]);
vertex[0].dif.b = static_cast<BYTE>(blue[0]);
// 右上の頂点の情報をセット
vertex[1].pos.x = static_cast<float>(x2);
vertex[1].pos.y = static_cast<float>(y1);
vertex[1].dif.r = static_cast<BYTE>(red[1]);
vertex[1].dif.g = static_cast<BYTE>(green[1]);
vertex[1].dif.b = static_cast<BYTE>(blue[1]);
// 右下の頂点の情報をセット
vertex[2].pos.x = static_cast<float>(x2);
vertex[2].pos.y = static_cast<float>(y2);
vertex[2].dif.r = static_cast<BYTE>(red[2]);
vertex[2].dif.g = static_cast<BYTE>(green[2]);
vertex[2].dif.b = static_cast<BYTE>(blue[2]);
// 左下の頂点の情報をセット
vertex[3].pos.x = static_cast<float>(x1);
vertex[3].pos.y = static_cast<float>(y2);
vertex[3].dif.r = static_cast<BYTE>(red[3]);
vertex[3].dif.g = static_cast<BYTE>(green[3]);
vertex[3].dif.b = static_cast<BYTE>(blue[3]);
// 中心の頂点の情報をセット
vertex[4].pos.x = static_cast<float>(x1 + x2) / 2;
vertex[4].pos.y = static_cast<float>(y1 + y2) / 2;
vertex[4].dif.r = static_cast<BYTE>((red[0] + red[1] + red[2] + red[3]) / 4);
vertex[4].dif.g = static_cast<BYTE>((green[0] + green[1] + green[2] + green[3]) / 4);
vertex[4].dif.b = static_cast<BYTE>((blue[0] + blue[1] + blue[2] + blue[3]) / 4);
unsigned short indices[] = { 0, 1, 4, 1, 2, 4, 2, 3, 4, 3, 0, 4};
return DrawPolygonIndexed2D(vertex, 5, indices, 4, DX_NONE_GRAPH, FALSE); // ポリゴンを4個描画する
}
```
厳密に補間するのであれば algorithm.joho.info/image-processing/bi-linear-interpolation/ を参考にしながらシェーダを書くか、
kanamaru さんの指摘のように、ソフトウェアイメージを使って1点ごと穿つことになるでしょう。
|
|