Simple Shapes - Points

Rendering - Points

The simplest graphics primitive that can be drawn on WOWCube device screens with WOWCube API is a point

In classical Euclidian geometry, a point is a primitive notion that models an exact location in space, and has no length, nor width or thickess.

So in order to draw a point, we would want to provide three parameters - the pair of (X,Y) coordinates, which define point screen position and the color of a point.

As we know, each WOWCube module has three screens of 240 x 240 pixels. This means, the valid coordinates of a point to draw range from (0,0) to (239,239), while the coordinate of a center of the screen is at (120, 120).

The color of a point 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 point rendering, let's create a small cubeapp that implements a starfield effect.

The actual algorithm is rather simple: we take an array of points and shoot them from the center of the screen towards the edges at random speeds and random directions. We would also want to dim the points slightly to create an impression of depth.

First off, let's declare an array of 50 stars. Each start will be drawn as a point.

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

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

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

The function that adds a start looks like this:

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

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 position of the star 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 Points::renderStarfield()
2{
3    for(int n=0;n<numStars;n++)
4    {
5        //Move the star
6        stars[n].x = stars[n].x+(int)stars[n].vx;
7        stars[n].y = stars[n].y+(int)stars[n].vy;
8 
9        //If star is out of screen, reset its position
10        if(stars[n].x>120 || stars[n].x<-120)
11        {
12            stars[n].x = 0;
13            stars[n].y = 0;
14        }
15 
16        //Calculate star color
17        uint32_t color = (abs(stars[n].x)+abs(stars[n].y))*2;
18        if(color>255) color = 255;
19 
20        //Draw a point
21        Cubios::GFX_drawPoint(DISPLAY_CENTER_X+stars[n].x,DISPLAY_CENTER_Y+stars[n].y, color|(color<<8)|(color<<16)|(255<<24));
22    }  
23}
24 

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 the star, WOWCube API function GFX_drawPoint is used:

1i32_t Cubios::GFX_drawPoint(i32_t x, i32_t y, u32_t color)
2 
3    Parameters:
4    x - X screen coordinate of a point to draw, [0, 240]
5    y - Y screen coordinate of a point to draw, [0, 240]
6    color - a hexadecimal representation of color of the point
7