AN-00060 Designer or ViSi How to Draw Triangles and Polygons

Description This application note shows how to program a 4D display module in the Designer environment to make it draw triangles and polygons on the screen.
Supported Processor PICASO, GOLDELOX, DIABLO16
Supported Environment Designer, ViSi
Difficulty Easy

 

File Downloads
Files

Description

This application note shows how to program a 4D display module in the Designer environment to make it draw triangles and polygons on the screen. The 4DGL code of the Designer project can be copied and pasted to an empty ViSi project and it will compile normally. The code can also be integrated to that of an existing ViSi project.

Before getting started, the following are required:

When downloading an application note, a list of recommended application notes is shown. It is assumed that the user has read or has a working knowledge of the topics presented in these recommended application notes.

 

Note: The attached Designer project and the discussions in this application note make use of a uLCD-32PTU, which is a 320-pixel-by-240-pixel display. Goldelox displays, however, are usually smaller. The uOLED-96-G2, for instance, is a 96-pixel-by-64-pixel display. For Goldelox display users, the discussions are still relevant and there should be no difficulty in editing the simple project.

 

Application Overview

The Designer environment enables the user to write 4DGL code in its natural form to program the display module. 4DGL is a graphics oriented language allowing rapid application development, and the syntax structure was designed using elements of popular languages such as C, Basic, Pascal and others. Programmers familiar with these languages will feel right at home with 4DGL.

The purpose of this application note is, besides showing the user how to draw triangles and polygons, to introduce the basics of 4DGL through examples.

 

Setup Procedure

For instructions on how to launch Workshop 4, how to open a Designer project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note

Designer Getting Started - First Project

 

Create a New Project

For instructions on how to create a new Designer project, please refer to the section “Create a New Project” of the application note

Designer Getting Started - First Project

 

For instructions on how to create a new ViSi project, please refer to the section “Create a New Project” of the application note

ViSi Getting Started - First Project for Goldelox

or

ViSi Getting Started - First Project for Picaso and Diablo16

 

For instructions on how to launch Workshop 4, how to open a ViSi project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note

ViSi Getting Started - First Project for Picaso and Diablo16

 

Design the Project

Display Resolution and Coordinate System

 

Before starting to draw, it is necessary to know how positions of points on the display screen are determined. 4D Systems offers display screens of various resolutions and sizes. When the user opens a new project, the Choose Your Product window shows the screen resolutions and sizes of different display modules.

For the uLCD-32PTU screen:

 

For all modules, positions of points are determined starting from the origin, which is always located at the left-top corner. The location of this reference point is common to all orientations – the portrait, landscape, portrait rotated, and landscape rotated. Two most commonly used orientations are portrait and landscape.

 

Landscape orientation:

 

Portrait orientation:

 

Observe the similarity of the above to the Cartesian coordinate system. The y axis points downward only here, however. This system applies to all display modules and all orientations.

 

Start Drawing

The user is advised to use the Designer program skeleton provided by Workshop as a starting code. Just place additional codes before line 11. If repetitive operation is desired, the programmer can also insert additional codes between lines 11 and 12 instead.

 

Draw a Triangle

gfx_Triangle(x1, y1, x2, y2, x3, y3, colour)

This function draws a triangle outline between vertices point1(x1, y1), point2(x2, y2), and point3(x3, y3) using the specified colour.

Example:

 

The screen (uLCD-32PTU, portrait orientation in this example) will look like as shown below.

 

gfx_TriangleFilled(x1, y1, x2, y2, x3, y3, colour)

This function draws a solid triangle outline between vertices point1(x1, y1), point2(x2, y2), and point3(x3, y3) using the specified colour.

Example:

 

 

The screen (uLCD-32PTU, portrait orientation in this example) will look like as shown below.

 

Clear the Screen

Often times it is necessary to clear the screen to remove unwanted graphics, create a flashing effect, or do animation. Clear the screen using the function gfx_Cls(). To illustrate:

 

The code above repetitively draws a yellow triangle and a red triangle.

Note that in the code a new function is introduced – pause(time). This function adds a time delay, the unit of which is in milliseconds. Adding a delay is necessary for the observer to see the triangles since instructions are executed so fast. Try, for example, removing line 19 of the code.

 

Using the For/Next Loop

Using loops is one way to shorten a code. Again, a loop is a part of a program used to perform repetitive operations. For example, the programmer can use a for/next loop to draw multiple triangles. To illustrate:

 

The figure above shows a code for drawing triangles from top to bottom of the screen. The figure below shows the result.

 

A line-by-line discussion of the code now follows. Lines previously discussed are bypassed.

In line 32, y is declared as a variable.

 

Values of variables, as opposed to constants, may change during the course of program execution. Here the incrementing value of y is used in drawing the triangles. Also, the programmer must declare a variable first before using it. To learn more about variables in 4DGL, consult the 4DGL Programmers Reference Manual.

 

The statements from lines 34 to 38 make up the for/next loop.

 

The instructions inside the loop are executed repetitively while a certain condition is true. Below is the syntax or format for declaring a for/next loop.

 

Applying the syntax above, we analyse line 34.

 

The statement y := 0 is the variable initialisation. Here the variable y is initialised to its value at the start of the loop (zero). The variable y is used for controlling the loop and drawing the triangles.

The statement y <= 220 is the condition. The statements inside the for loop are executed over and over again as long as the value of the variable y is less than or equal to 220.

The statement y := y + 50 is the variable update.  This sets the amount by which the variable is changed each time through the loop. Here the value of y is increased by 50 after each iteration or cycle of the loop. 

 

The line below now draws an orange triangle.

 

Note that for each vertex, the y coordinate uses the variable y. Further analysis will show that as the loop iterates, a series of triangles are drawn from top to bottom, with a vertical spacing of 50 pixels.

 

There other kinds of loops besides the for loop. These are discussed in the 4DGL Programmers Reference Manual

Line 36 adds a delay so that the observer can see the triangle. Line 37 is a comment and is ignored by the compiler.

Line 38 terminates the for/next loop.

 

Animation

To make the triangle appear to move from top to bottom of the screen, uncomment (remove the double forward slash symbol) the statement in line 37. Compile and download the program. The user can also try creating a triangle with a changing size and colour.

 

Arrays

It is necessary that the user has an understanding of the concept of arrays prior to drawing polygons. An array can be thought of as a variable containing many values. In the previous section the user was introduced to the use of variables. Variables are simply names used to refer to some location in memory – a location that holds a value. In the for loop code presented in the previous section, the variable y has a value that changes as the loop repeats.

It is also possible for the user to store many values under a variable by making it an array. For example, to create an array y that contains five values or that has five elements, declare it first as:

 

Then assign a value to each element of the array using the format:

 

Here the symbol n inside the brackets is called the index. Note that declaring an array (line 8) is different from assigning values to array elements (line 14). The programmer cannot assign values to elements of an array without having declared it first. In other words, the array must be declared before its elements are initialised. It is also possible to declare an array and initialise its elements in a single line, as will be shown later. Now to assign values to each element:

 

Note that there are a total of five elements and that the index starts at zero and ends at four.

 

To print the value of the third element:

 

To print the value of the fifth element:

 

Observe that the first index number, which corresponds to the first element, is zero.  The last index number is the number of elements minus one.  A five-element array, therefore, has the index numbers 0 to 4.

To declare an array and initialise its elements in a single line:

 

Draw a Polygon

gfx_Polygon(n, vx, vy, colour)

This function plots lines between points specified by a pair of arrays using the specified colour. The last point is drawn back to the first point, completing the polygon.

 

Example:

 

The screen (uLCD-32PTU, portrait orientation in this example) will look like as shown below.

 

gfx_PolygonFilled(n, vx, vy, colour)

This function draws a solid polygon by plotting lines between points specified by a pair of arrays and using the specified colour. The last point is drawn back to the first point, completing the polygon. Replace the command in line 54 of the code with

 

The screen (uLCD-32PTU, portrait orientation in this example) will look like as shown below.

 

More Functions

There are other functions for drawing graphics and for setting colours and patterns. Learning how to use these functions is relatively easy after having been acquainted with how points are addressed in 4D display screens and how triangles and polygons are drawn. Users who want to experiment with these functions may refer to section 2.6 Graphics Functions of any of the following documents:

Goldelox Internal Functions Manual

Picaso Internal Functions Manual

Diablo16 Internal Functions Manual

 

Run the Program

For instructions on how to save a Designer project, how to connect the target display to the PC, how to select the program destination, and how to compile and download a program, please refer to the section “Run the Program” of the application note

Designer Getting Started - First Project

 

For instructions on how to save a ViSi project, how to connect the target display to the PC, how to select the program destination, and how to compile and download a program, please refer to the section “Run the Program” of the application note

ViSi Getting Started - First Project for Goldelox

or

ViSi Getting Started - First Project for Picaso and Diablo16

 

The uLCD-32PTU, uLCD-35DT, uOLED-96-G2, and/or uOLED-160-G2 display modules are commonly used as examples, but the procedure is the same for other displays.

Share: