This section explains how to use the framework that automates the generation of renderers, display windows, and other setup tasks.
Up to now, you've been manually writing code to create the renderer, graphics resource, display window, and GUI drawing. But since these steps are usually the same every time, writing them repeatedly can be tedious.
To simplify this, VCSSL provides a built-in framework called Graphics2DFramework, which handles these routine tasks automatically. When using this framework, you only need to write the actual drawing logic inside a few specific functions that are called automatically at the appropriate times.
Using the framework is extremely simple -- just import it in your program like this:
That's it! When the program runs, the renderer, graphics resource, and window are automatically created and displayed. At this point, you already have a functioning 2D graphics program. However, the screen will still be blank until you define what to draw.
To draw something on the screen, define a function named "onPaint" in your program and write the drawing logic inside it. This function will be automatically called by the framework at regular intervals, and the result will appear on the screen.
Previously, the flow of execution simply followed the order in which you wrote the code -- from top to bottom. But in a program that uses a framework, the framework controls the flow, and your role is to define and add functions to it. Besides "onPaint", you can define several other functions like the following:
In each of these functions, the "rendererID" parameter is automatically passed by the framework and represents the ID of the 2D graphics renderer.
You don't need to define all of these functions. Just define the ones you want to use, and write the corresponding logic. Here are some common examples:
Use "onStart" to write code that should run only once at the beginning -- for example, loading image files.
Use "onExit" to write cleanup logic -- for example, saving images when the window is closed. This function runs only once, just before the program exits.
The "onPaint" function is repeatedly called at a rate of several times per second (typically around 30 times per second, depending on system performance). Use this function to write drawing logic.
The "onUpdate" function is called in alternation with onPaint. For example, if you want to perform animations, write logic here to gradually update values like object positions. Then, in onPaint, draw the updated scene based on those values.
Alternatively, you can write both the drawing and updating logic in either function -- it still works fine. However, separating drawing (onPaint) and updating (onUpdate) makes your code easier to maintain and understand.
Let's try drawing something simple using the framework. Write the following code and run it:
import Graphics2D;
import graphics2d.Graphics2DFramework;
// Called repeatedly at screen refresh intervals
// (several times per second)
void onPaint ( int rendererID ) {
// Set the background color to gray
setGraphics2DColor( rendererID, 200, 200, 200, 255 );
// Set the drawing color to blue
setDrawColor( rendererID, 0, 0, 255, 255 );
// Draw a point
drawPoint( rendererID, 100, 100, 20, true );
}
Framework.vcssl
When you run this program, a gray window will appear with a single blue dot drawn on it.
Next, here's an example with animation. Try running the following:
import Graphics2D;
import graphics2d.Graphics2DFramework;
// Variables to store the point's position
int x = 0;
int y = 0;
// Called repeatedly at screen refresh intervals
// (several times per second)
void onPaint ( int rendererID ) {
// Set the background color to gray
setGraphics2DColor( rendererID, 200, 200, 200, 255 );
// Set the drawing color to blue
setDrawColor( rendererID, 0, 0, 255, 255 );
// Draw a point
drawPoint( rendererID, x, y, 20, true );
}
// Called repeatedly to update state for animation
void onUpdate ( int rendererID ) {
// Gradually move the point
x += 2;
y += 1;
}
FrameworkAnimation.vcssl
When you run this program, the gray window will appear just like before -- but this time, the blue dot will slowly move across the screen as an animation.