ドットを並べて三角形を描画する


二重のループの中で VC++ の SetPixel() でドットを並べて三角形を描画します。

少なくとも二重のループが使えるようにならなければ話になりません。 (;_;)
ここでしっかり二重のループを身に付けて下さい。 (-.-;)

前田稔(Maeda Minoru)の超初心者のプログラム入門

プロジェクトの説明

  1. 新規プロジェクト(Sankaku)を作成して WM_PAINT の位置までスクロールして下さい。
    プロジェクトの作成は Windows プログラムを自動的に作成する を参照して下さい。
  2. WM_PAINT に三角形を描画するコードを追加します。
        case WM_PAINT:
            hdc = BeginPaint(hWnd, &ps);
            // TODO: 描画コードをここに追加してください...
            int     x,y;
            for(y=0; y<100; y++)
            {   for(x=0; x<=y; x++)
                {
                    SetPixel(hdc,x,y,RGB(0,255,0));
                }
            }
            EndPaint(hWnd, &ps);
            break;
        
  3. [デバッグ][デバッグなしで開始]を選択して、ビルドに続いて実行を行います。
    三角形が一個表示されたら完成です。
    赤色の三角形

【説明】

SetPixel は指定された座標にドット(点)を描画する関数です。
ソースコード 説明
SetPixel() 座標にドット(点)を描画
hdc デバイスコンテキスト
x ドットを描画するX座標
y ドットを描画するY座標
RGB(0,255,0) ドットの描画色

ループの制御変数に x と y を使い二重にループしています。
二重ループを構成する場合でも「ループごとの最初の値と最後の値」がポイントです。
制御変数の値は次のようになります。
Yの値が大きくなるほど線が長くなる(ドットが増える)ことに注目して下さい。
下の表で SetPixel の座標は「X座標,Y座標」の順です。
Yの値 Xの値 SetPixelの座標(X,Y) 線の長さ
0 0~0 まで繰り返す 0,0~0,0 1 ドット
1 0~1 まで繰り返す 0,1~1,1 2 ドット
2 0~2 まで繰り返す 0,2~2,2 3 ドット
99 0~99 まで繰り返す 0,99~99,99 100 ドット

【演習】

  1. 次の三角形(緑色 )を描画して下さい。
    プログラムを一行だけ修正すれば良いのですが?
    三角形の画像
    ヒントを差し上げましょう。
    下の表で SetPixel の座標はX座標,Y座標の順です。
    Yの値 Xの値 SetPixelの座標(X,Y) 線の長さ
    0 0~0 まで繰り返す 99,0~99,0 1 ドット
    1 0~1 まで繰り返す 99,1~98,1 2 ドット
    2 0~2 まで繰り返す 99,2~97,2 3 ドット
    99 0~99 まで繰り返す 99,99~0,99 100 ドット
  2. それでは次の三角形(黄色)はどうでしょう。
    これも修正するのは一行だけです。
    三角形の画像
    方法は色々あるのですが、下のドットラインから描画を始めるのがわかり易いでしょうか?。
    下の表で SetPixel の座標はX座標,Y座標の順で、Y座標は下から上に描画しています。
    Yの値 Xの値 SetPixelの座標(X,Y) 線の長さ
    0 0~0 まで繰り返す 0,99~0,99 1 ドット
    1 0~1 まで繰り返す 0,98~1,98 2 ドット
    2 0~2 まで繰り返す 0,97~2,97 3 ドット
    99 0~99 まで繰り返す 0,0~99,0 100 ドット
  3. 右上隅が直角の三角形(青色)を描いて下さい。
    これも修正するのは一行だけです。
    三角形の画像
  4. 下記の図形を表示して下さい。
    最初のプログラムの SetPixel を修正して、後3行追加すれば良いのですが?
  5. 緑・赤・青・黄の三角形の組み合わせを表示して下さい。
    最初のプログラムの SetPixel を修正して、後3行追加すれば良いのですが? (^_^;)
    三角形の組み合わせ
  6. 4個の三角形を組み合わせて風車の図形を表示して下さい。
    これも上のプログラムと同じ要領で、二重のループが一組で描画できるのですが。 (^_^;)
    風車の画像

超初心者のプログラム入門(Win32API C++)