GFX

Drawing a point on the screen is the first function that one may search in graphics programming. Plotting a pixel is the basic unit of all other graphical objects we see in everyday computing. In this article, we will take a look at how it is done using SDL's surface buffer.

Assuming you've already configured your SDL "includes" and 'libraries", we start the program by initializing the SDL libraries. Initializing SDL Video is the first step before using any of its graphic functions. You do this by:

With trigonometry functions such as sine and cosine, it is very easy to compute for the value of x and y for any given radius and teta.

We've all learned this from highschool and college class and it will not be tacked in this article. However, drawing a circle using these functions requires the usage of floating-point numbers which is slow, not to mention the typecasting from floating-point to integers as plotting a pixel requires such datatype.

The line equation represented by y = mx + b, is one of the most basic formulas in plotting a line. Where m represents the slope, x represents the value in horizontal coordinate and b represents the offset from y.

Suppose we have a line segment (x₁, y₁) to (x₂, y₂), the slope can be easily computed as (y₂ - y₁) / (x₂ - x₁) or to understand it better, we can read it as an increment in y for every step in x.

If you've ever worked with Adobe Photoshop or any image processing tool, you've probably resized an image to a certain frame or dimension. Suppose the original image dimension is 600x800 (3:4 aspect ratio) and you want to fit everything in a 500x750 (2:3 aspect ratio) frame. What you will do is to shrink the width from 600 to 500 and stretch the height from 800 to 750. This process of resizing is called image scaling in computer graphics.

Emulating paint fill is easy and can be done either iteratively or thru stacks. This demonstration is done using plain text, but the same idea could be implemented using your favorite graphics framework.

First, we're given a two-dimensional array of canvass of type char with size [N][M], where N is the number of rows and M is the number of columns.

Let's suppose N = 11 and M = 15, but of course, the values of these two may vary.

Noise is another special effect to emulate an old TV without a signal. A naive approach to do this graphic effect is to create a double for-loop and randomize the color of the pixel being placed on each of the coordinates of the screen.

for (y = 0; y < MAX_SCREEN_HEIGHT; ++y)
    for (x = 0; x < MAX_SCREEN_WIDTH; ++x)
        putPixel(x, y, RBGA(rand()%256, rand()%256, rand()%256, rand()%256));

This will work but not as fast as we would like it to be due to the following reasons:

Today's article brings us back to the time where you have to be imaginative and creative. The fire effect is a special technique to emulate a blazing fire that you may use in your next game application. Save each frame in a sprite and include it in your tile-based RPG games.

Melt is a technique I've been using when developing 2D games to demonstrate the illusion of melting objects. This effect is something that you cannot just do in Photoshop. Some things are better done the hard way giving you more control of the parameters and function behavior. This is another Throwback Thursday's article so I've written it using QBASIC.

The Technique is simple, you can apply it to any bitmap/canvass of any modern graphic libraries that you are using. The basic idea is, given an object you need to:

This article is about generating a Square Star Fractal using recursion (Although a triple for-loop implementation is much preferred, it will be discussed separately).

The logic of a Recursive Square Star Fractal Function is a simple Divide and Conquer algorithm. The program is subdivided into smaller tasks until it is solved. The function takes the (X, Y) middle coordinates of the square, R length, where 1 Side of Square = 1 Length = 2R length, and T as the number of times to generate 2R- sized squares. 

Today is Throwback Thursday and so I decided to create a simple graphic script using QBASIC - the first programming language I fell in love with in the 90s.

Sierpinski Triangle is a fractal equilateral triangle (60 degrees on each angle with equal length of sides) subdivided recursively into smaller triangles as shown in the figure above.

Although the pattern can be easily created using recursion, our demonstration uses the chaos game approach to construct the triangle.