Result of Execution
Overlapping colorful rectangles will be displayed.
In this chapter, we'll explore the most low-level method of rendering graphics: pixel-level drawing.
In the previous chapters, we've used direct drawing and sprite-based drawing, both of which rely on high-level paint tools provided by the renderer to draw shapes or images.
In contrast, pixel-level drawing works by directly manipulating the pixel data contained in a graphics resource, without using such advanced features. You edit the raw color values of each pixel yourself to render an image.
Pixel data represents the color of every pixel in an image. Each pixel has four components:
In VCSSL, these components are stored separately as 2D arrays with dimensions [height][width]. The array index format is [vertical][horizontal], where vertical indices count from top to bottom, and horizontal from left to right.
Each array is of type "int", and the values range from 0 to 255, representing the color intensity.
For example:
To draw using pixel data, use the "setPixel" function of the renderer.
- Function Format -Arguments:
Each value in the arrays represents the color intensity (0-255) for that pixel, indexed by [vertical][horizontal].
When this function is called, the renderer updates the image based on the provided pixel data.
You can also provide all four color components in a single 3D array:
- Function Format -Arguments:
where:
You can retrieve the current pixel data from the renderer's graphics using the following functions, depending on the color component:
- Function Format -Each function returns a 2D int array corresponding to the specified color component.
The array is indexed as [vertical][horizontal], with vertical indices starting from the top and horizontal from the left.
Note: To retrieve pixel data from an existing image file, it's more convenient to use functions from the Graphics library to access the data directly from the graphics resource, rather than using the renderer functions described above.
For example, after loading an image file using the "newGraphics(string filePath)" function, you can retrieve the red channel of the pixel data from the resulting graphics resource using:
You can retrieve other color components in the same way.
For details, please refer to the Graphics Library Specification.
Let's try creating and drawing a colorful pattern using pixel data.
import Graphics;
import Graphics2D;
import GUI;
// Create graphics data and renderer
int graphicsID = newGraphics( );
int rendererID = newGraphics2DRenderer( 800, 500, graphicsID );
// Create display window
int windowID = newWindow( 0, 0, 800, 500, "Hello 2DCG !" );
int labelID = newImageLabel( 0, 0, 800, 500, graphicsID );
mountComponent( labelID, windowID );
// Prepare pixel data arrays
int red[ 500 ][ 800 ];
int green[ 500 ][ 800 ];
int blue[ 500 ][ 800 ];
int alpha[ 500 ][ 800 ];
// Set colors for each pixel
for( int i=0; i<500; i++ ){
for( int j=0; j<800; j++ ){
// Red region: top-left area
if( j < 500 && i < 300 ){
red[ i ][ j ] = 255;
} else {
red[ i ][ j ] = 0;
}
// Green region: central band
if( 200 < j && j < 600 && 100 < i && i < 400 ){
green[ i ][ j ] = 255;
} else {
green[ i ][ j ] = 0;
}
// Blue region: bottom-right area
if( 300 < j && 200 < i ){
blue[ i ][ j ] = 255;
} else {
blue[ i ][ j ] = 0;
}
// Fully opaque for all pixels
alpha[ i ][ j ] = 255;
}
}
// Apply pixel data to the renderer
setPixel( rendererID, red, green, blue, alpha );
// Render GUI
paintComponent( labelID );
paintComponent( windowID );
When you run this program, a white window will appear, displaying overlapping colorful rectangles.