SiMPAINT Instructions

(Best viewed in 1024x768 display mode)

SiMPAINT

(Version: 8.05.02)

(The SiMPAINT program is included as part of the SiMPLE package.
Or click here to download the latest version of the program.)

You are probably familiar with the PAINT program that can be found in the Windows "Accessories" folder. That program lets you draw circles, lines, rectangles, etc. just by pointing and clicking with your mouse. But when you are finished, the final product is merely an image. . . a dead static image. About the only thing you can do with such an image is just look at it.

SiMPAINT is a program similar to the PAINT program. However, instead of producing just images, SiMPAINT remembers all your drawing commands and uses them to generate the corresponding Ultra-SiMPLE source listings for your images. You can then incorporate those listings into your own programs!

To run SiMPAINT, merely double-click the "SiMPAINT" icon on your computer (after you've installed SiMPLE, of course ).

(On some versions of Windows,
the icon may look different.)

SiMPAINT consists of three different screens:

The Menu Screen
The Color Palette Screen
The Canvas Screen

We will now discuss each of these screens separately. (In these discussions, it is assumed that you are already familiar with Ultra-SiMPLE's graphics functions: "Linecolor", Solidcolor", etc.)

The Menu Screen

When SiMPAINT starts, you are presented with the menu screen (shown in the gray frame in the image below):

Select a shape:
The center-most portion of the menu consists of three rows of selectors. The top row of the set selects from the "line" shapes (Rectangle, Roundrectangle, Circle, Ellipse, and Triangle*). The middle row selects from the "Solid" shapes (Solidrectangle, Solidroundrectangle, Solidcircle, etc.). The bottom row selects from the "Filled" shapes (Filledrectangle, Filledroundrectangle, etc.). (The selector for the currently active shape will be illuminated.)
*(To draw any triangle shape, first hold down the mouse button and draw the
line for one of the sides. Then release the button, move the mouse to the desired
location for the vertex, and press the button again to complete the triangle.)

Select Linecolor, Solidcolor, Pointcolor:
Clicking any of these three selectors (located on the far-left side of the menu) will display the color palette screen. Left-click to select the desired color from anywhere on the screen. Or right-click a color, and then click a shade of gray to set the brightness of that color.

Select Linesize (n):
Clicking any of these three selectors (located on the far-right side of the menu) will set the thickness of all lines that are to be drawn. (The selector for the currently active Linesize will be illuminated.)

Toggle "line-drawing" mode On/Off:
Clicking this selector (located in the bottom-right corner of the menu) will toggle between "line-drawing" mode and "point-plotting" mode. (When "line-drawing" mode is set, the selector will be illuminated.)

Select Floodfill:
Clicking this selector (located near the bottom-right corner of the menu) will set "floodfill" mode. This mode will allow you to fill any area of the canvas with the current Solidcolor.

Toggle zoom On/Off:
Clicking this selector (located near the bottom-left corner of the menu) will toggle between "zooming" or "jumping" to a magnified view of the canvas when a magnified view is requested. (When zoom mode is enabled, this selector will be illuminated.)

[Note: Some computers may require "zooming" to be OFF at all
times. Otherwise, the magnified view might come up very slowly.]

(Picked color):
When you exit the canvas screen and return to the menu screen, whatever color was directly under the cursor is sampled and stored here. You can then drag this color to any of the three color selectors.

Barometer:
The barometer (located at the bottom-center of the menu) indicates how many drawing commands have been issued. (You have a maximum of almost 250 available.)

Click to exit:
Clicking the "QUIT" selector (located in the top-right corner of the menu) will terminate execution, and the source listing for your image will be generated.

Pressing the "Enter" key (or clicking the right mouse button) will take you to the canvas screen.

Pressing the "Esc" key at any time (except when selecting a color) will always take you back to the menu screen.

Pressing "Ctrl-Q" from the menu screen is an abort exit. It will terminate execution without generating any output.

The Color Palette Screen

The color palette screen is used for selecting the colors to be used for drawing lines, shapes, and points.

Whenever the color palette appears, left-click to select the desired color from anywhere on the screen. Or right-click a color, and then click a shade of gray to set the brightness of that color.

The Canvas Screen

The canvas screen is the one on which you "draw" your image.

Left-click to draw (using the current shape, colors, etc. as were selected on the menu screen). Right-click to magnify the portion of the screen at the current cursor location. Right-click again to un-magnify the screen.

When working on the canvas screen, a number of single-key keyboard commands are available:

Single-Key Commands

Delete: Delete the previously drawn item.

Insert: Un-delete the previously deleted item.

G: Toggle between displaying one of two different
reference grids, or no grid at all.*

V: Toggle between displaying either a black back-
ground (default), or a blue-green background.
(This feature is primarily intended to let
Vista users see their mouse cursor.)

A: View the image as it would actually appear if the
generated source listing was used to display it.
(Press the "A" key again to continue working.)

Esc: Return to the menu screen.

(Arrow keys): When viewing a magnified image of the canvas
screen, pressing an arrow key will scroll the
screen in the specified direction.

*[Note: Some computers may require a grid to be displayed at all times.
Otherwise, the drawing of shapes, etc. might occur very slowly.]

In addition to the single-key commands, there are a number of double-key commands available. (These commands provide a convenient way of changing shapes, colors, etc. without having to go back to the menu screen.)

Double-Key Commands

( Line ) Solid Filled

Rectangle LR SR FR

Roundrectangle LO SO FO

Circle LC SC FC

Ellipse LE SE FE

Triangle LT ST FT

L1: Select "Linesize (1)"

L2: Select "Linesize (2)"

L3: Select "Linesize (3)"

PK: Select "Pointcolor"

LK: Select "Linecolor"

SK: Select "Solidcolor"

PM: Select "point-plotting" mode

LM: Select "line-drawing" mode

FF: Select "Floodfill"

Note: All keys are indicated by their "labels" as they appear on the keyboard.
None of the actual commands are upper-case; they are all lower-case.

How To Use SiMPAINT

If you're a beginner, the easiest way of starting SiMPAINT is to merely double-click the "SiMPAINT" icon. Then, when you are finished creating your image, just click the "QUIT" selector. The source listing for your image will then appear in a "Notepad" window. From there, you can save it anywhere you like. (If the listing fails to appear, it can be easily retrieved from your root directory as a file named "IMAGE.TXT")

When you run the listing, it will simply display your image.

If you later decide that you would like to go back and continue working on your image, just drag and drop the "IMAGE.TXT" file onto the "SiMPAINT" icon. Everything will be restored to the state that existed just prior to your clicking the "QUIT" selector.

How To Use SiMPAINT (For Advanced Users)

The "IMAGE.TXT" file consists of a 3-statement main program, followed by the task listing ("image") which contains all of the drawing commands that were used to create your image.

The "image" task has four calling parameters: "x", "y", "mag", and "flag".

The first two calling parameters ("x" and "y") specify the location at which the image is to appear on your screen.
The third parameter ("mag") specifies the magnification factor to be used when displaying the image. (A magnification factor of 1.0 is normal size.)
The final parameter ("flag") specifies whether or not the magnification factor should also be applied to every "Linesize" command as well. (Zero = "No"; Non-zero = "Yes"). If you specify a non-zero value, the thickness of every line in the image will also increase as the size of the image increases.

In addition, the "image" task allows you to program in an optional "Brightness Factor". This factor, named "bf" (at the beginning of the task's listing), provides a handy way of letting you scale the brightness of the image as a whole. (For example, to help create an illusion of "distance", you might want the overall brightness of the image to be a function of its magnification.)

Since the main program portion of the "IMAGE.TXT" file consists of little more than a single "Call" statement, it can't do much of anything except display a single static image. (You could have just as well used the PAINT program if that's all you wanted to do. )

The real power of SiMPAINT lies in its ability to let you create longer programs incorporating multiple images. And SiMPAINT even provides you with the capability of easily creating libraries of your favorite images so that they can be used by many different programs!

A library is nothing more than a folder containing task listings that can be appended to your program listing by using the "Append" compiler directive.

Let's look at an example of how you would create and use an image library. (We will assume that you've already created a project folder somewhere and that you've named it "Workbook".)

Example: Creating a SiMPAINT Image Library

First, create a new folder named "Library" and place it inside your project folder.

Congratulations! You have now started an image library!

Let's assume that you want to create a new image named "teddy" and place it in the image library. To do so, first create a new (empty) text document and change its name to "teddy.txt".

You could also have named the file either "teddy.src" or simply "teddy". Any of those file names would work. Or you are free to choose some other name.*

*[Whatever name you choose must be no more than eight alpha-numeric
characters in length (not counting the extension), and the first char-
acter must be a letter. No spaces are allowed anywhere in the name.]

Next, drag and drop that empty text document onto the "SiMPAINT" icon. When SiMPAINT starts, create your image.

When you are finished creating your image, just exit the SiMPAINT program and move the "teddy" document (which is now no longer empty) into the "Library" folder . . . and you're done!

(When you finish working on an image for your library, the
source listing for that image does not show up in a "Notepad
window. This is because there is generally no need to view it.)

If you later decide that you would like to go back and continue working on your image, just drag and drop the "teddy" document back onto the "SiMPAINT" icon. Everything will be restored to the state that existed just prior to your clicking the "QUIT" selector.

Using a SiMPAINT Library Image

Now that you have your "teddy" image in your library, let's write a very short program that merely retrieves that image and displays a magnified view of it:

Source Listing

Ultra-SiMPLE xc=xpixels()/2; yc=ypixels()/2 Call teddy (xc, yc, 7.0, 1) @ Append L: teddy.txt

(Notice that the name of the "image" task is now "teddy". Also notice that the name "teddy" appears not only in the "Call" statement, but in the "Append" statement as well.)

As an example of how you might animate your "teddy" image, you might enjoy running the following short program:

Source Listing

Ultra-SiMPLE xc=xpixels()/2 yc=ypixels()/2 open screen (1) size=0.5; grow=1 Do select screen (1); cls teddy (xc, yc, size, 1) @ select screen (0) bitblt screen (1) If (grow) size=size*1.025 Else size=size/1.025 If (size<0.5) grow=1 If (size>10) grow=0 If readkey() Break delay (10) Loop close screen (1) quit Append L: teddy

(Hey . . . How come all the lines are so smooth? Where did all the "jagged" pixels go!?)