[ Prev | Index | Next ]
Japanese English

Clearing the Screen and Setting the Background Color

Now that you're all set up to use 2DCG, it's time to start drawing.

As your first step, let's look at how to clear the drawing area and set the background color.

Clearing the Contents

To clear the contents of a graphics resource that already has something drawn on it, use the "clearGraphics2D" function.

- Function Format -
void clearGraphics2D ( int rendererID )

Arguments:

  • rendererID: The ID of the renderer to operate on.

When you call this function, the renderer will clear the contents of the associated graphics resource, filling it entirely with the background color.

By default, the background color is transparent, which means the base layer of the window will show through.

Depending on your environment, this base layer may appear white, gray, or some other color. So if you plan to display the graphics resource in a window, it's recommended to set the background to an opaque color in advance.

You can set the background color using the function explained below.

Setting the Background Color

To set the background color, use the "setGraphics2DColor" function.

- Function Format -
void setGraphics2DColor (
  int rendererID, int red, int green, int blue, int alpha
)

Arguments:

  • rendererID: The ID of the renderer to configure.
  • red, green, blue, alpha: The color components for the background, each specified in the range from 0 to 255. These components use the RGBA format, which is explained below.

What Is RGBA Format?

RGBA stands for Red, Green, Blue, and Alpha -- the three primary colors of light, plus an alpha value that represents transparency.

The alpha value controls how transparent the color is: 0 means fully transparent, and higher values move toward full opacity.

The color is produced using additive color mixing, which is the same principle as how light is blended -- not like mixing paints (which uses subtractive color mixing). For example:

  • (red, green, blue) = (255, 255, 255) gives white, not black.
  • (red, green, blue) = (255, 255, 0) gives yellow.
  • (red, green, blue) = (0, 255, 255) gives cyan.
  • (red, green, blue) = (255, 0, 255) gives magenta.

Example Program

Let's try setting the background color to blue. Write and run the following code:


import Graphics;
import Graphics2D;
import GUI;

// Create a graphics resource and a renderer
int graphicsID = newGraphics( );
int rendererID = newGraphics2DRenderer( 800, 600, graphicsID );

// Create a display window
int windowID = newWindow( 0, 0, 800, 600, " Hello 2DCG ! " );
int labelID = newImageLabel( 0, 0, 800, 600, graphicsID );
mountComponent( labelID, windowID );

// Set the background color to blue
setGraphics2DColor( rendererID, 0, 0, 255, 255 );

// Clear the graphics using the background color
clearGraphics2D( rendererID );

// Paint the GUI components
paintComponent( labelID );
paintComponent( windowID );
Sample.vcssl

When you run this program, a window filled with a solid blue color will appear on the screen.

Program Output
A window filled entirely with blue will be displayed.


Author of This Article

Fumihiro Matsui
[ Founder of RINEARN, Doctor of Science (Physics), Applied Info Tech Engineer ]
Develops VCSSL, RINEARN Graph 3D and more. Also writes guides and articles.

Translation Cooperator

ChatGPT AIs
[ GPT-3.5, 4, 5, 5.1 ]
We greatly appreciate the cooperation of ChatGPT AIs in translating this article.


Sponsored Link



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

Exevalator v2.4 Released — MCP Support Added, Now Usable as an AI Calculation Tool
2025-11-15 - We've released Exevalator v2.4, our expression-evaluation library. Starting with this version, it supports MCP, making it usable as a calculation tool for AI assistants.

Exevalator v2.3 Released — Now Usable from Python
2025-11-04 - We've released Exevalator v2.3. Starting with this version, you can now use it from Python! With growing demand around AI tool development in mind, we share the details here.

Exevalator Updated — Easy Japanese Localization for Error Messages
2025-10-31 - Exevalator 2.2.2 is out. You can now localize error messages to Japanese with a simple copy-and-paste, and we've included several bug fixes and minor parser adjustments.

Inside RINPn Online: Architecture Overview
2025-10-22 - An inside look at the architecture of the recently launched online version of the RINPn scientific calculator. It's open source, so you can freely modify and reuse it to build your own web calculator (maybe!).

Meet RINPn Online: Use the Scientific Calculator Anywhere, Instantly
2025-10-21 - RINPn, the free scientific calculator, now has an online version you can use instantly in your browser — on both PC and smartphones. Read the announcement for details.

The VCSSL Support AI is Here! — Requires a ChatGPT Plus Account for Practical Performance
2025-08-19 - A new AI assistant for the VCSSL programming language is here to answer your questions and help with coding. This article explains how to use it and showcases plenty of real Q&A and generated code examples.

English Documentation for Our Software and VCSSL Is Now Nearly Complete
2025-06-30 - We're happy to announce that the large-scale expansion of our English documentation with the support of AI — a project that began two years ago — has now reached its initial target milestone.

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.