Simple Shapes - Circles

Rendering - Circles

This example demonstrates the use of WOWCube API circle rendering function for visualisation of a system of particles.

In geometry, a circle is a round shaped figure that has no corners or edges all points of which are at a given distance from a given point, the centre. The distance between any point of the circle and the centre is called the radius.

A circle with zero radius is called a dot

To draw a circle, we would want to provide a coordinate of a centre of the circle, its radius and the fill color.

In computer graphics, two types of circles are defined: a solid circle, which techically should be called a disc, and an outlined circle. The difference is in the way how these shapes are drawn. A solid circle is a shape filled with a color, while an outlined circle has visible edges, but no filling, i.e it is transparent from inside.

Current version of WOWCube API provides a function that allows rendering both solid and outlined circles.

Both fill and outline colors of a circle are 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.

Particles and Particle Systems

Is mentioned above, we will use a simple particle system to demonstrate the rendering of circles (and also make our example a little less boring too). But what is a particle system?

Well, a particle system is an computer graphics approach that uses many small objects - points, lines, sprites etc - to simulate certain kinds of fuzzy phenomena, which are otherwise hard to reproduce with conventional rendering techniques. We are talking here about rendering of natural phenomena, the processes that have an element of a chaos or complex systems with a lot of smaller elements that interact between each other following certain rules.

Sounds too complex? Not really!

Think of such things as fire, or explosion, or snow, or whirling dust on the wind, or a flock of birds, or even meteor trails and stars - and you'll figure it out.

Particle systems typically implement the following modules:

• An emission stage that provides a location and generates new particles.
• A simulation stage that updates particle parameters and simulates how particles behave and evolve.
• A rendering stage which defines the way particles are rendered on the screen.

So the application that implements a particle system first emits required amount of particles, then simulates their behaviour, and then renders the result of simulation.

At emission stage, the particles' initial positions and velocity vectors are set. Since particle position and velocily may not be the only parameters each particle has, other parameters are getting initialized as well. Particle's color,size, mass and lifetime are the most common ones.

During the simulation stage, all existing particles are checked to see if they have exceeded their lifetime, in which case they are removed from simulation. Otherwise, the particle's and other parameters are advanced based on rules of simulation, which can be as simple as just changing their current position, or as complex as performing physically accurate trajectory calculations which take into account external forces such as gravity, friction, wind and so forth. It is also common to perform collision detection between particles and other objects in the scene to make particles bounce off of or otherwise interact with obstacles in the environment. Collisions between particles are rarely used due to high computational complexitiy.

After the simulation is complete, each particle is drawn on the screen. Depending on a type of visual effect particle system used for, the way of rendering may vary from drawing of simple points to rendering of depth-sorted sprites. There are also methods of rendering of particle fields as a solid objects - isosurfaces - mostly used for simulation of cloth and liquids.

The example

In order to demonstrate circle rendering, we will create a cubeapp that visualizes a system of coloured particles affected by a force field of several sources of gravity, the attractors.

Physical aspects of particle simulation model used in the example are beyond the scope of this article and can be obtained by request.

Initially, we declare two arrays of objects: one is for particles, another one is for attractors:

1new Fixed:magnets[NUM_MAGNETS][Fixed:.x,Fixed:.y,Fixed:.size,Fixed:.orbit];
2 
3new Fixed:particles[NUM_MAGNETS*PARTICLES_PER_MAGNET][Fixed:.x,Fixed:.y,Fixed:.shx,Fixed:.shy,Fixed:.angle,Fixed:.size,Fixed:.speed,Fixed:.force,.magnet,Fixed:.orbit];
4 

Attractor object has the following properties:

• (x, y) - coordinate of the attractor;
• size - attractor size;
• orbit - a value that defines how far from the attractor does its field extend

Particle object, in turn, has different set of properties:

• (x, y) - coordinate of the particle;
• (shx, shy) - the "shift" vector, i.e. the value of the increment of coordinates for one simulation cycle;
• angle - particle spin angle;
• size - particle size;
• speed - particle speed;
• force - current value of a force that affects the particle;
• magnet - an index of an attractor that affects the particle at the moment;
• orbit - a value that defines how far from the current attractor does its field extend;

Then, we need to initialize initial values. The initialization is rather simple, we create four attractors in ON_Init() callback:

1public ON_Init(id, size, const pkt[])
2{
3    ...
4    createMagnet(40,40);
5    createMagnet(50,180);
6    createMagnet(150,80);
7    createMagnet(128,128);
8    ...
9}
10 

The funciton that is used looks like this:

1createMagnet(Fixed:x,Fixed:y)
2{
3    if(numMagnets<NUM_MAGNETS)
4    {
5        magnets[numMagnets].x = x;
6        magnets[numMagnets].y = y;
7        magnets[numMagnets].orbit = 100.0;
8        magnets[numMagnets].size = 1.0;
9 
10        createParticles(x,y,numMagnets);
11 
12        numMagnets++;
13    }
14}
15 

Pay attention for each attractor we automatically initialize an array of particles that "belong" to it. We set attractor's coordinates, its sizes and then add particles of random sizes and initial speeds with the following function:

1createParticles(Fixed:x,Fixed:y, magnet)
2{
3    for(new i=0;i<PARTICLES_PER_MAGNET;i++)
4    {
5        new Fixed:r1 = fixed(Randomize(0,100))/100.0;
6        new Fixed:r2 = fixed(Randomize(0,100))/100.0;
7 
8        particles[numParticles].x = x;    
9        particles[numParticles].y = y;
10        particles[numParticles].shx = x;
11        particles[numParticles].shy = y;
12 
13        particles[numParticles].angle = 0;
14        particles[numParticles].size = 0+r1*6.5;
15        particles[numParticles].speed = (0.001 + ((particles[numParticles].size+1)/40.0)*0.015);
16        particles[numParticles].force = 0.98 - r2*0.15;
17        particles[numParticles].orbit = 1.0;
18 
19        particles[numParticles].magnet = magnet;
20            
21        numParticles++;
22    }
23}
24 

At this point, the emission stage is finished, so we proceed to the next stage.

The next is to animate and render the particles. Or, to be more precise, to simulate and then render them.

The simulation and the follwing rendering is done in renderParticles() funciton; please see the source code of the example for detais.

The algorithm of simulation of our particle system is this:

1. Take each particle in the set
2. Find an index of the closest attractor, i.e the attractor which force field influences the particle the most
3. Assign the particle to this attractor
4. Increment particle angle (in order to make it spin around its attractor)
5. Apply forces and calculate new position of the particle
6. Render the particle at new position

For the drawing of each particle, GFX_drawSolidCircle function is used:

1GFX_drawSolidCircle(center,radius,color)
2 
3    Parameters:
4    center - screen coordinate of a center of the circle, GFX_POINT, [0, 240]
5    radius - a radius of the circle, [0, 240]
6    color - a hexadecimal representation of color of the circle
7 

Finally, the last stage completes with the standard call of ON_Render() callback we are very well familiar with:

1public ON_Render()
2{
3    for(new screenNumber = 0; screenNumber<3; screenNumber++)
4    {
5        GFX_setRenderTarget(screenNumber);
6        GFX_clear(Colors.marsh);
7 
8        //Render particles
9        renderParticles();
10 
11        GFX_render();
12    }
13}
14