Техниките на двумерната графика. Урок 2.

В този урок ще представим основните техники за двумерна графика. Те ще ни позволят да пресъздаваме прости изображения върху нашия екран. Ще разгледаме следните теми:
•    Двумерна равнина
•    Точки
•    Линии
•    Многоъгалници
•    Графични обекти

Двумерна равнина
Двумерната равнина е като лист хартия. По точно тя е като лист хартия който продължава неограничено в двете посоки.


 


Всека точка от двумерната равнина се определя от две координати (x,y). Където x координатата задава позициято по хоризонталната ос а y координатата задава позицията по вертикалната ос. Например сините точки на фигурата по горе имат съответно координати (-4, 3) и (1,1). Двумерната равнина ни дава отправната точка от където да започнем.

Точки
Точка е място в равнината определено от две координати (x,y). Използвайки програмата създадена в Урок 1 като основа ще напишем програма Points която ще рисува точки по екрана. Ще разгледаме функцията render_frame която изчертава точките върху екрана. Пълния изходен код на програмата можете да намерите във файловете прекрепени в края на урока.

  1.  
  2. void render_frame(void)
  3. {
  4.     // изчиства прозореца и го запълва със син цвят
  5.     d3ddev->Clear(0, NULL, D3DCLEAR_TARGET,
  6.                   D3DCOLOR_XRGB(0, 40, 100), 1.0f, 0);
  7.  
  8.     // маркира започването на изчертаването на сцената
  9.     d3ddev->BeginScene();  
  10.  
  11.     for(int i=0; i<20; i++)
  12.     {
  13.         for(int j=0; j<20; j++)
  14.         {
  15.             int x = i*10+10;
  16.             int y = j*10+10;
  17.  
  18.             DrawPoint(x, y, D3DCOLOR_XRGB(255, 255, 255));
  19.         }
  20.     }
  21.     // маркира края на изчертаването на сцената
  22.     d3ddev->EndScene();  
  23.  
  24.     // визуализира създадената сцена на екрана
  25.     d3ddev->Present(NULL, NULL, NULL, NULL)
  26. }
Функцията притежава два основни цикъла for. При всяка итерация на външния цикъл се увеличава стойноста на променливата I и позицията на точката се премества съответно с 10 пиксела по оста Х. Вътрешния цикъл определя отместването по оста Y. Функцията DrawPoint изобразява точката на подадените и координата. Третия параметър на функцията определя цвета в който пиксела ще свети. След завършването на своето изпълнение функцията е изчертала мрежа от точки.



Линии
Правата линия е най късото разтояние между две точки в равнината. Отново ще променим функцията render_frame. Този път програмата ще изчертае 10 линии.

  1. void render_frame(void)
  2. {
  3.     // изчиства прозореца и го запълва със син цвят
  4.     d3ddev->Clear(0, NULL, D3DCLEAR_TARGET,
  5.                   D3DCOLOR_XRGB(0, 40, 100), 1.0f, 0);
  6.  
  7.     // маркира започването на изчертаването на сцената
  8.     d3ddev->BeginScene();  
  9.  
  10.     for(int j=0; j<20; j++)
  11.     {   
  12.         int y = j*12+10;
  13.         DrawLine(10, 10, 200, y, D3DCOLOR_XRGB(255, 255, 255));
  14.     }
  15.  
  16.     // маркира края на изчертаването на сцената
  17.     d3ddev->EndScene();  
  18.  
  19.     // визуализира създадената сцена на екрана
  20.     d3ddev->Present(NULL, NULL, NULL, NULL)
  21. }
Функцията DrawLine приема 5 параметъра. Първите два са x и y координатата на точката от която линията започва а следващите два са x и y координатите на точката в която линията завършва. Петия параметър на функцията определя цвета в който ще бъде оцветена линията. В нашия случай цвета е зададен чрез 3 стойности. Червено, Зелено и Синьо. Всяка от стойностите определя с каква яркост в съответния цвят ще свети пиксела. Например ако се зададе 255, 0, 0 то линията ще бъде оцветена в червен цвят тъйкато яркоста на червеното е максимална а на другите два цвята минимална. Функцията DrawLine не е стандартва за DirectX. Можете да видите нейния код във файла прикрепен в края на урока. Резултата от изпълнението на програмата можете да видите на фигурата по долу.


 


Основния цикъл for изменя единственно координатата y на втората точка. Края на всяка следваща линия се намира отместен с 12 пиксела надолу.

Многоъгълници
Многоъгалникът е съвкупност от точки наречени върхове свързани помеждуси с прави линии. Всички многоъгълници са затворини. Те могат да бъда изпъкнали или вдлъбнати. Програмата по долу изчертава триъгалник и квадрат.

  1. void render_frame(void)
  2. {
  3.     // изчиства прозореца и го запълва със син цвят
  4.     d3ddev->Clear(0, NULL, D3DCLEAR_TARGET,
  5.                   D3DCOLOR_XRGB(0, 40, 100), 1.0f, 0);
  6.  
  7.     // маркира започването на изчертаването на сцената
  8.     d3ddev->BeginScene();  
  9.  
  10.     DrawLine(10, 60, 130, 15, D3DCOLOR_XRGB(255, 255, 255));
  11.     DrawLine(130, 15, 130, 186, D3DCOLOR_XRGB(255, 255, 255));
  12.     DrawLine(130, 186, 10, 60, D3DCOLOR_XRGB(255, 255, 255));
  13.  
  14.     DrawLine(200, 10, 300, 10, D3DCOLOR_XRGB(255, 255, 255));
  15.     DrawLine(300, 10, 300, 100, D3DCOLOR_XRGB(255, 255, 255));
  16.     DrawLine(300, 100, 200, 100, D3DCOLOR_XRGB(255, 255, 255));
  17.     DrawLine(200, 100, 200, 10, D3DCOLOR_XRGB(255, 255, 255));
  18.  
  19.     // маркира края на изчертаването на сцената
  20.     d3ddev->EndScene();  
  21.  
  22.     // визуализира създадената сцена на екрана
  23.     d3ddev->Present(NULL, NULL, NULL, NULL)
  24. }


 


Графични обекти
Графичния обект представлява сложна фигура състояща се от множество линии, точки и т.н.. Най удобно графичните обекти се представят чрез структури пазещи необходимата информация.

  1. struct Vertex
  2. {
  3.     int x;
  4.     int y;
  5. }
  6.  
  7. sturct Polygon
  8. {
  9.     int x; //позиция на обекта
  10.     int y; //позиция на обекта
  11.  
  12.     int vectorSize;
  13.     Vertex vertices[16]; //максимално 16 върхове
  14. }
Координатите x и y в структурата Polygon задават позицията на която ще бъде изчертан графичния обект. Всички точки на обекта се изчисляват спрямо тези координати.


 


Можем да разгледаме получилата се ситуация от друга страна. Ако приемем че x и у координатата на обекта са начало на нова координатна система локална за самия обект то е необходимо единственно да дефинираме върховете на обекта в локолни координати и след това да ги прехвърлим в реални за да изобразим обекта на екрана.
 

Изходен код на програмата Points
Изходен код на програмата Lines
Изходен код на програмата Poly

Автор: Сергей Георгиев [adviser@cpp-examples.com]