13. Beginning with Graphics <<< Contents >>> 15. Fill Your Own Colors
If you don't like the word "mishmash" in the chapter title, you can replace it with anything else, but it is probably the best designation for what we are going to do.
First, we will try the basic graphical commands for drawing. Create a new program called Graphic or open the sample program.
We won't need Peter in our program, and so
we will turn his visibility off by the visible 
command with the no 
parameter in the beginning of our program. The program will be
based on a conditional
repeating of commands 
cycle that can be
ended by pressing the Esc 
key. Put this command behind the one that turns Peter's
visibility off, and add a wait command into it.
Another very important task is making the
squares in the item layer transparent. Edit the empty square 
item. In the color picker, choose the top left color (purple). It
is a transparent
color, which will enable us to
see through the square with an item. Choose filled box 
as
the drawing tool, and redraw the whole item with the transparent
color.
If you will run the program now, you won't see anything but a black sheet. You see the graphic layer, which will be the basis for our next programs. Later, we will use both items and graphics together. After you try the first graphical command, you can draw something into the empty square item. You will see the graphic and a net of empty square pictures over it.
In the Basic Elements group, find the graphic 
group, drawing 
subgroup. It contains commands for drawing graphical elements.
Drag the point 
command into the main program loop. It contains another four
elements that specify the parameters of the point rendered.
The first parameter, pen color 
,
specifies the color of the point. Color is a number, which can be
kept in a numeric variable. We are not interested in its value so
far, as we can use special functions to specify color. In a new
command, the pen
color element contains a color 
element. This is a color
constant, which passes the
selected color to the command. You can select a new color by
double-clicking the color constant element. The color selection
window appears. The selected color is indicated by the elevation
of its field. Clicking selects a different color. The color will
also appear in the color constant element.
In our program, we will render points with
a random color. For this reason, we will discard the color
constant element, and use the compound color components to color 
element (from the graphic
group) instead of it. This component contains another three
elements, red
component (0 to 1) 
, green component (0 to 1) 
and
blue component
(0 to 1) 
. The components
specify the level of individual colors in the resulting color.
The closer is the value to 1, the brighter the component is. For
example, yellow has the values of 1/1/0. A random color can be
created by inserting random
number (0 <= x < 1) 
components into the
color components (the range for a random number is 0 to 1 as
well).
Another parameter for the point command is
the pen width 
element. It is a numeric value, which specifies how many
graphical points wide will the point be. The point size will be
generated randomly, and so we will insert a random number with
the parameter of 9 here, which will create random points with the size
of 1 to 9 graphical points (we don't have to care about zero, the
point command modifies it to 1).
The last two elements of the command, horizontal X coordinate of
point 
and vertical Y coordinate of point 
,
specify the position, where the point will appear. The previous
picture shows how graphical coordinates are numbered. It is the
same as the numbering of squares, as we know it from previous
chapters. The basic unit of Peter's coordinates is a unitary step. The length of the step is the same as a square
width. The beginning of the coordinates is in the bottom left
corner. As the coordinates are expressed by decimal numbers, we
can specify the coordinates for squares, graphics and sprites in
the same way, without any conversions.
The coordinates for the point will be
specified randomly, as we know it from previous chapters, by
using random numbers with the parameters of the width 
and height 
of the sheet. The
resulting command for the random point will look like this:
Run the program. Color points of different sizes start appearing on the sheet. The rendering is not very quick. After each point in the loop, the program waits a little moment (55 ms), which means that the speed of rendering is 18 points per second.
This is a good time for discussing the
program timing. As we already said, the wait 
command has, besides the waiting function, also a function for
cooperation with other programs (and with the core of Windows).
An advanced user can use the System Monitor program to verify that the Graphic program is a minimum load for the computer, and
that the program speed is independent of the computer speed. To
be accurate — the wait command does not represent an actual
pause of a given length; it represents synchronization with the
inner clock of the computer. For this reason, the program speed
does not depend on the speed at which the commands between two
wait commands are executed.
Try to fill a value of 0 into the wait command. The program will now produce very many points. It does not wait for the interval now; it runs at maximum speed. Yet, it ensures that the window sheet is rendered on the display at each pass through the loop. This is another function of the wait command — it ensures rendering. The program does not know when all graphical operations are finished, and so when it is a good time to render the window on the display. If the program rendered the window itself, the background of a game could appear, but not the characters in it. As a result, the background would show through the characters. For this reason, rendering is performed during the waiting, when all graphical operations are probably finished.
A tip for program optimization: The program redraws a rectangular part of the window, where changes were made. If you want to increase the program speed, render only the changed area of the graphic. On the other hand, this could lead to rendering many small parts of the graphic, which could be more demanding than rendering the whole window at a time.
Timing with the value of 0 is useful in situations, when you need higher program performance, or when the timing after 0.055 seconds is too rough. It ensures fluent redrawing of the window, maximum program speed, and sufficient cooperation with Windows. The program speed is dependent on the computer speed now. We could use System Monitor to see that the program consumes most of the computer performance, even if it seems to be in a relatively quiet state.
You can also try to disable timing
completely by using the Turn
Off 
button. If you run the program now, you
see a noise of colors instead of points. Now, the program really
runs at maximum speed, without any pauses. You may notice that
the color noise is not fluent; the image is a bit choppy. It is
so because the program ensures at least a minimum redrawing of
the window to the display. If there is no wait command for about
0.2 seconds, the program redraws the window itself.
Let us get back to graphical commands. Add
other graphical commands to the main program loop — line 
, box 
, filled box 
, circle 
, filled circle 
, sphere 
, triangle 
— and try to render them randomly. Use a random radius of 2 with circle, filled circle and sphere. Skip Filling 
, as
it would not have much effect here.
The text display 
command is also interesting. It has more parameters than you may
be used to, but don't worry. You don't have to set the parameters
that don't interest you. Their default values will be used then.
It is probably clear what the text to be displayed 
, pen color , horizontal X coordinate of
text 
and vertical Y coordinate of text 
parameters mean.
A new element is the angle orientation of text 
. It
is the angle, at which the text is turned around the bottom left
corner. It is specified in radians, just like other angles in
Peter. We can use the direction constants that we know from
setting the directions of Peter and Lucy. If not specified, a
direction of 0 is used (horizontally from left to right).
The height of characters 
element specifies the height of the characters in the text. It is
specified in unitary steps. If not specified, the height of 0.5 will be used (half of the square height).
The relative width of characters (1 = usual) 
element represents a relative number indicating the width of the
characters when compared to the normal width. A value of 1 is the normal width. Numbers higher than 1 specify wider characters, smaller numbers specify
narrower characters. A special value is the number 0. This sets the recommended width for the type of
characters used. It is similar to the normal width, but may
differ slightly. If not specified, the default value of 0 is used (the recommended width).
The bold 
, italic 
, underline 
and
strike out 
elements are logical switches that turn on special effects for
the text. By default, all of these are turned off. The serifs 
switch turns on serif characters. By default, it is also turned
off. The typewriter 
switch turns on characters with the same spacing and width. When
it is turned off, characters have different widths (I is narrower than M).
Unless specified otherwise, this switch is off as well.
The whole command for a random text is on the previous picture. It is quite long, and so the picture is separated into two parts. Test the program after you create the command.
One of the most powerful aspects of graphics are pictures. You can use pictures for anything that is not predefined in Peter. You can create moving characters, a window with animated buttons, a moving background for a game, or snapshots.
The commands and functions for pictures are
in the graphic
group, pictures 
subgroup. The basic command is draw picture 
.
Besides obvious parameters, such as the picture to be rendered
and its coordinates, the command also has more parameters that
make it possible to draw only a specific part of the picture.
In our test program, we will try to render a picture randomly. Before you start drawing, you can look at the Library of Variables and Functions. With Peter, you also get many pictures. Open the [examples]\Drawing group. You will surely find a picture that you will like. When browsing, click to select the first picture in the group, and then scroll the selection cursor up and down by using the arrow keys. The editing window will show previews of the pictures.
Drag the selected picture into the Global Variables and
Functions window. If the
picture has a one-color background, you can fill the background
with the transparent color (by using the Filler 
function) to display the picture without any background.
The command for random drawing of the
picture is shown above. If you want to draw a picture with a
random size, you can use the change picture size 
function. The new picture width will be random, and will be based
on the original size shrunk to approximately one half. It is not
necessary to specify a new height; it will be adjusted to the new
width automatically.
Note: It is better to use a larger picture and a higher level of reduction. This ensures a higher quality of the resulting picture than using a smaller picture.
13. Beginning with Graphics <<< Contents >>> 15. Fill Your Own Colors