Simple Shapes - Lines

Rendering - Lines

A line is another simple graphics primitive that can be drawn on WOWCube device screens with WOWCube API.

In geometry, a line can be defined as a straight one-dimensional figure that has no thickness and extends endlessly in both directions.

In computer graphics, however, a line is a segment of a geometrical line that connects two points in a shortest way, i.e. straight.

So in order to draw a line, we would want to provide coordinates of two points A and B, line thickness and the color of a line.

The coordinates define screen positions of each point.

Despite the classical definition, lines in computer graphics have non-zero thickness. A line drawing algorithm approximates a line segment on a discrete grid of pixels which WOWCube screen is. So in order for a line to be visible, it must be at least 1 pixel thick. You may think of it as of a width of a brush you use to draw the line.

The color of a line is defined as RGB value.

The RGB color model is an additive color model in which the red, green and blue primary colors of light are added together in various ways to reproduce a broad spectrum of colors. The name of the model comes from the first letters of the three primary colors: Red, Green and Blue

Actual values of each primary color range from 0 to 255, the range that a single 8-bit byte can offer. Since higher value means brighter color, the (0,0,0) represents no color, or so-called transparent color, (1,1,1) gives solid black, while (255,255,255) gives white.

The example

In order to demonstrate line rendering, previous example - Rendering - Points will be slightly modified.

The algorithm stays the same, the only difference is that instead of rendering of stars as points, short line segments will be drawn.

First off, let's declare an array of 50 stars, almost exactly as in previous example, but with two extra properties, prevx and prevy. We need to points, A and B, to draw a line that connects them, so (prevx,prevy) will be a point A and (x, y) will be a point B.

1typedef struct
2{
3    int x;
4    int y;
5    int prevx;
6    int prevy;
7    float vx;
8    float vy;
9} Star_t;
10 
11int numStars;
12Star_t stars[50];
13 

Then, we need to initialize this array with initial values. To do that, we use addStar() function in the InitializeResources():

1void Lines::InitializeResources()
2{
3    ...
4 
5//Create starts
6for(int n=0;n<50;n++)
7{
8    this->addStar();
9}
10 
11    ...
12}
13 

The function that adds a start looks like this:

1void Lines::addStar()
2{
3    //Random probability from 0% to 100% 
4    int prob = Cubios::random(0,100);
5 
6    //Velocity vector components filled with random values 
7    float vx = (float)(400-Cubios::random(0,800))/(float)(Cubios::random(10,100));
8    float vy = (float)(400-Cubios::random(0,800))/(float)(Cubios::random(10,100));
9 
10    //Create 50 unique stars that have non-zero velocity
11    if(numStars<50 && prob<50 && vx!=0 && vy!=0)
12    {
13        stars[numStars].x = 0;
14        stars[numStars].y = 0;
15        stars[numStars].prevx = 0;
16        stars[numStars].prevy = 0;
17 
18        stars[numStars].vx = vx;
19        stars[numStars].vy = vy;
20 
21        numStars++;
22    }
23}
24 

In the function, we initialize initial velocity vector (vx,vy) with a random value to ensure that our stars will be shooting at random directions. Then we set initial positions of both points to (0,0) and add it to the array.

Pay attention at the numStars variable. It is used to make sure the array will never be overloaded, even if AddStar() function is called more than 50 times.

The last step is to animate the stars. See the renderStarfield() function that is called every time the screen is rendered:

1void Lines::renderStarfield()
2{
3    int x_from,x_to,y_from,y_to;
4 
5    for(int n=0;n<numStars;n++)
6    {
7        //Move the star
8        stars[n].prevx = stars[n].x;
9        stars[n].prevy = stars[n].y;
10 
11        stars[n].x = stars[n].x+(int)stars[n].vx;
12        stars[n].y = stars[n].y+(int)stars[n].vy;
13 
14        //If star is out of screen, reset its position
15        if(stars[n].x>120 || stars[n].x<-120)
16        {
17            stars[n].x = 0;
18            stars[n].y = 0;
19        }
20 
21        //Calculate star color
22        uint32_t color = (abs(stars[n].x)+abs(stars[n].y))*2;
23        if(color>255) color = 255;
24 
25        x_from = DISPLAY_CENTER_X+stars[n].prevx;
26        y_from = DISPLAY_CENTER_Y+stars[n].prevy;
27 
28        x_to = DISPLAY_CENTER_X+stars[n].x;
29        y_to = DISPLAY_CENTER_Y+stars[n].y;
30 
31        //Draw a line
32        Cubios::GFX_drawLine(x_from,y_from, x_to,y_to, 1, color|(color<<8)|(color<<16)|(255<<24));
33    }  
34}
35 

We iterate though the array of stars changing star position slightly outwards the center of a screen till the star is visible. Then we move it back to its initial position and repeat the process again.

In order to actually draw a line for each star, WOWCube API function GFX_drawLine is used:

1i32_t Cubios::GFX_drawLine(i32_t x0, i32_t y0, i32_t x1, i32_t y1, u32_t thickness, u32_t color);
2GFX_drawLine(from,to,thickness,color)
3 
4    Parameters:
5    x0,y0 - screen coordinate of a point A, [0, 256]
6    x1,y1 - screen coordinate of a point B, [0, 256]
7    thickness - a thickness of the line, [0,100]. Zero thickness means line is not visible
8    color - a hexadecimal representation of color of the line
9