[ Prev | Index | Next ]
Japanese English

Using the Framework

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

Sponsored Link


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:

import graphics2d.Graphics2DFramework;

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 );
}
Framework.vcssl

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

Execution Result
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;
}
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.

実行結果、グレーの画面に青い点の図。
Execution Result
The blue dot gradually moves across the screen as an animation.



Sponsored Link



Japanese English
Index
News From RINEARN
* VCSSL is developed by RINEARN.

VCSSL 3.4.52 Released: Enhanced Integration with External Programs and More
2025-05-25 - This update introduces enhancements to the external program integration features (e.g., for running C-language executables). Several other improvements and fixes are also included. Details inside.

Released: Latest Version of VCSSL with Fixes for Behavioral Changes on Java 24
2025-04-22 - VCSSL 3.4.50 released with a fix for a subtle behavioral change in absolute path resolution on network drives, introduced in Java 24. Details inside.

Released the Latest Versions of RINEARN Graph and VCSSL - Now Supporting Customizable Tick Positions and Labels!
2024-11-24 - Starting with this update, a new "MANUAL" tick mode is now supported, allowing users to freely specify the positions and labels of ticks on the graph. We'll explain the details and how to use it.

Released Exevalator 2.2: Now Compatible with TypeScript and Usable in Web Browsers
2024-10-22 - The open-source expression evaluation library, Exevalator, has been updated to version 2.2. It now supports TypeScript and can be used for evaluating expressions directly in web browsers. Explains the details.

Behind the Scenes of Creating an Assistant AI (Part 1: Fundamental Knowledge)
2024-10-07 - The first part of a series on how to create an Assistant AI. In this article, we introduce the essential knowledge you need to grasp before building an Assistant AI. What exactly is an LLM-based AI? What is RAG? And more.

Launching an Assistant AI to Support Software Usage!
2024-09-20 - We've launched an Assistant AI that answers questions about how to use RINEARN software and helps with certain tasks. Anyone with a ChatGPT account can use it for free. We'll explain how to use it.

Software Updates: Command Expansion in RINEARN Graph, and English Support in VCSSL
2024-02-05 - We updated our apps. This updates include "Enhancing the Command-Line Features of RINEARN Graph" and "Adding English Support to VCSSL." Dives into each of them!

Inside the Repetitive Execution Speedup Impremented in Vnano Ver.1.1
2024-01-17 - Delves into the update in Vnano 1.1 from a developer's viewpoint, providing detailed insights into the specific improvements made to the internal structure of the script engine.