Using the Framework

This section explains how to use the framework that automates the generation of renderers, display windows, and other setup tasks.

A Framework That Handles Tedious Setup for You

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.

Defining Functions to Draw on the Framework's Screen

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:

List of Available Callback Functions

void onStart ( int rendererID )

Called once at the beginning of the program (e.g., for setup or loading images)

void onPaint ( int rendererID )

Called every frame to perform drawing

void onUpdate ( int rendererID )

Called every frame to update state (e.g., for animation)

void onResize ( int rendererID )

Called when the window is resized

void onExit ( int rendererID )

Called once when the program ends

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:

onStart / onExit Functions

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.

onPaint / onUpdate Functions

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.

Example Program

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 );
}

When you run this program, a gray window will appear with a single blue dot drawn on it.

Execution Result

A blue dot appears on the gray window.

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;
}

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.

Execution Result

The blue dot gradually moves across the screen as an animation.