bmp画像をモザイク処理したい

Question

前提

ボタンを押した際にbmp画像を違う領域にモザイク処理させた状態で出力させたい

実現したいこと

　　・左画像の10（縦）×10（横）ピクセル分のR/G/Bのそれぞれの平均を求める
Rの平均＝10*10の色データのRの合計/100
・右画像の同じ10×10の領域すべてに求めた平均の色をRGBマクロで設定
・縦、横それぞれ10ピクセルずつ処理をずらしながら画像全体を処理

左側の画像の座標(0,0)から(10,10)までのRGB値の平均を求めたら、右側の同じ座標にRGBの平均値を出力する
それが終われば(0,11)から(10,20)を求めて、右側の同じ座標に平均値を出力していく…というような処理になります
画像全体が３００×３００ピクセルで構成されているので、繰り返しの処理が３０回行われると思います

下図が実行イメージです

左側の画像の情報（RGB値の平均）を取得し、右側に出力したいと思っています

発生している問題・エラーメッセージ

画像全体に処理が適用されない。

エラーメッセージ

該当のソースコード

C++

ソースコード
```int btnid = MessageBox("ボタンが押されました。", "確認", MB_OK | MB_ICONINFORMATION);

	//画像の縦横の範囲を宣言
	int Width = m_img_left.GetWidth(); //横幅全体
	int height = m_img_left.GetHeight(); //縦幅全体

	int x = 10;
	int y = 10;
	int beside = 0;
	int vertical = 0;
	int R_beside = 0;
	int R_vertical = 0;

	for(x; (x <= Width); x += 10) {
			for(y; (y <= height); y += 10) {

			int r_sum = 0;
			int g_sum = 0;
			int b_sum = 0;

		
		for(beside = 0; (beside < x); beside++) { 
			for(vertical = 0; (vertical < y); vertical++) {

				COLORREF color = m_img_left.GetPixel(beside,vertical);	//左の画像から色情報を抜き取りcolorに格納

				int r = GetRValue(color); //色情報取得
				int g = GetGValue(color);
				int b = GetBValue(color);

				 r_sum = r_sum + r; //RGBそれぞれの値を加算代入する
				 g_sum = g_sum + g;
				 b_sum = b_sum + b;

			}
		}

			 int red = r_sum / 100; //加算したRの値を割り算
			 int green = g_sum / 100; //加算したGの値を割り算
			 int blue = b_sum / 100; //加算したBの値を割り算


			 for(R_beside = 0; (R_beside < x ); R_beside++){ 
					for(R_vertical = 0; (R_vertical < y ); R_vertical++){

						 m_img_right.SetPixel(R_beside,R_vertical,RGB(red,green,blue));
						 

					}
					  
			 }
			
						
					
				
			}
	}Invalidate();	// 再描画

}

### 試したこと

ここに問題に対して試したことを記載してください。
ネットでモザイク処理に関して調べた
### 補足情報（FW/ツールのバージョンなど）
Visual Studio 2012　

ここにより詳細な情報を記載してください。

Comments

[fana]

ぱっと見で，ループの仕方が不思議なので，どういう処理を考えているのかを詳細に説明する必要があるように見受けます．
各変数の意味とか，各ループの範囲が何故こうなっているのか？等．（…を他人に説明しようとすれば，その過程で間違いに気づけるかも）

[fana]

例えば

> for(beside = 0; (beside < x); beside++)

とか．
例えば x の値が外側のループで増えていって 200 になっているとき，このループでの beside の値は　0～199 の範囲になりそうだけど，行おうとしている処理のことを考えると，多重ループの内側のところにそんな範囲でループする処理を入れる必要があるとは思えない．

[iri-ryo]

コメントありがとうございます
質問の内容を更新しましたので確認をお願いします

Answer 1

アドバイス等を頂き、解決することができました。
ループする際の初期値を０にしていることで常に同じエリアをループし続けることになっていることと
そうしないためには、変数に変数を代入することで値を保持させることができること
あとは足してダメなら引いてみることを今回の課題で得ることができたと思います

int btnid = MessageBox("ボタンが押されました。", "確認", MB_OK | MB_ICONINFORMATION);

//画像の縦横の範囲を宣言
int Width = m_img_left.GetWidth(); //横幅全体
int height = m_img_left.GetHeight(); //縦幅全体

int x;
int y;
int X = 0;
int Y = 0;
int beside = 0;
int vertical = 0;

int R_beside = 0;
int R_vertical = 0;

for(x = 10; (x <= Width); x += 10) {
		for(y = 10; (y <= height); y += 10) {

		int r_sum = 0;
		int g_sum = 0;
		int b_sum = 0;

		
	for(beside = x - 10; (beside < x); beside++) { 
		for(vertical = y - 10; (vertical < y); vertical++) {

			COLORREF color = m_img_left.GetPixel(beside,vertical);	//左の画像から色情報を抜き取りcolorに格納

			int r = GetRValue(color); //色情報取得
			int g = GetGValue(color);
			int b = GetBValue(color);

			 r_sum = r_sum + r; //RGBそれぞれの値を加算代入する
			 g_sum = g_sum + g;
			 b_sum = b_sum + b;

		}
	}

		 int red = r_sum / 100; //加算したRの値を割り算
		 int green = g_sum / 100; //加算したGの値を割り算
		 int blue = b_sum / 100; //加算したBの値を割り算


		 for(R_beside = x - 10; (R_beside < x); R_beside++){ 
				for(R_vertical = y - 10; (R_vertical < y); R_vertical++){

					 m_img_right.SetPixel(R_beside,R_vertical,RGB(red,green,blue));
					 

				}
				  
		 }
		
					
				
			
		}
}Invalidate();	// 再描画

}

Answer 2

		for(beside = 0; (beside < x); beside++) { 
			for(vertical = 0; (vertical < y); vertical++) {

このループは 10x10 の領域を処理する意図だと思います。x と y は 10 ずつ増えていきますが、たとえば x=100 y=100 のときにこの beside と vertical はどういう値でループするかチェックしてみてください。10x10 になるでしょうか。

Comments

[iri-ryo]

besideとverticalの初期値を０にしていることで、xとyの値が100だとbesdeとverticalの値は100になるまでループし続けるので、１０×１０にはならないですね

[int32_t]

そうですよね。たぶん beside vertical ともに 90 から始めるといいのではないですかね。