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.

1new stars[50][.x, .y, .vx, .vy];
2new numStars = 0;
3 

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

1public ON_Init(id, size, const pkt[])
2{
3    ...
4 
5    //Create starts
6    for(new n=0;n<50;n++)
7    {
8        AddStar();
9    }
10 
11    ...
12}
13 

The function that adds a start looks like this:

1AddStar()
2{
3    //Random probability from 0% to 100% 
4    new prob = RND_randomize(0,100);
5 
6    //Velocity vector components filled with random values 
7    new Fixed:vx = fdiv(fixed(400-RND_randomize(0,800)),fixed(RND_randomize(10,100)));
8    new Fixed:vy = fdiv(fixed(400-RND_randomize(0,800)),fixed(RND_randomize(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].vx = vx;
16        stars[numStars].vy = vy;
17 
18        numStars++;
19    }
20}
21 

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:

1RenderStarfield()
2{
3    for(new n=0;n<numStars;n++)
4    {
5        //Move the star
6        stars[n].x = stars[n].x+fint(stars[n].vx)/1000;
7        stars[n].y = stars[n].y+fint(stars[n].vy)/1000;
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        new color = (ABS(stars[n].x)+ABS(stars[n].y))*2;
18        if(color>255) color = 255;
19 
20        //Draw a point
21        GFX_drawPointXY(DISPLAY_CENTER_X+stars[n].x,DISPLAY_CENTER_Y+stars[n].y, GFX_fromARGB8888(255,color,color,color));
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_drawPointXY is used:

1GFX_drawPointXY(x,y,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