[ 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.



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.