Drape

Drawing Programming Environment

Written by Mark Overmars
Version 2.0, Apr 10, 1998

Introduction
Drape was written to teach people some basic aspects of programming. It has some resemblance to Logo but Drape is completely visually oriented. Like in Logo, programs in Drape create a drawing. A program in Drape consists of a number of commands. There are commands that draw lines and shapes, commands that move to a particular position, commands that set properties, like color, line width and size, and control commands, e.g. to repeat commands, to call procedures, and to test for mouse buttons. Each command is represented by a little picture. A program is a sequence of these pictures. You create a program by dragging the pictures to the appropriate place in the sequence. For example, the following sequence draws a square.

The first command indicates that a line must be drawn. (Ignore for the moment the diamond shape at the left. It is just an indication of the program) The next command rotates the direction with 90 degrees. Next a second line is drawn, etc. Here is another example. It draws 3 blue circles next to each other.

The first command sets the color to blue. Next a circle is drawn. The third command moves the position to the right. Another circle is drawn, and so on. Even though Drape is easy to use, it requires a little practice to get used to. Please read this documentation and look at the examples. Play with them and change them to get a feeling on how things work. Once you understand the ideas you can start creating your own designs. You can find a number of examples of Drape programs in the folder Examples. Much more information about Drape, including lessons and example programs, is available on the Drape web site: http://www.cs.ruu.nl/~markov/kids/drape/ HAVE FUN!!

System requirements
A modern PC (preferably a Pentium) running Windows95 or NT 4.0 (or later) is required. After installation the program uses less than 1 Megabytes disk space.

Installing and uninstalling

To install the program, simply unzip the file into a folder of your choice. Thats all. You can click on one of the Drape program files (with extension .DRP) and, when asked by which program to start it, choose

Drape. This will give all Drape program files a special icon and you can run them by clicking on them. To uninstall Drape, simply remove the folder. Drape does not install any system files.

Copyright
Drape may be used free of charge, in any way, for any purpose. In may be distributed by any means, provided that the original files as supplied by the author remain intact and no charge is made other than for reasonable distribution costs. Drape may be placed on any archive or BBS system. Drape may not be distributed as a component of any commercial product without a prior license agreement with the author.

Using Drape
This section gives a global overview of how to use Drape. It tells you what the screen looks like, How to create a program, how to run it, and how to do some file management. Drape was designed such that (almost) all tasks can be done with the mouse. If you dont know what a particular button does, simply place the mouse on it and wait. A little description will pop up.

The screen layout

Once you start Drape a large window appears. (Drape requires your screen to have a resolution of at least 800x600. You will be warned if your resolution is too low. Clicking the right mouse button somewhere on an empty space on your desktop and choosing Properties can change the screen resolution.) The window consists of the following parts: At the top there is a row of buttons for loading and saving programs, for running the program in different ways, and for quiting the program. Below it at the left there is a large number of little symbols. These are the different commands you can place in you program by dragging them there (see below). At the right there is an empty rectangle. This is the picture your program is creating. At the bottom you find the actual program you are creating. The program can consist of up to 6 procedures. Each procedure is shown by a long dark gray rectangle. You create the program by dragging the commands to these rectangles. Each procedure is represented by a diamond-like shape, which is shown at the left of the procedure. One of them has a black frame around it (normally the top one). This one will be executed when you run the program. To the left of the procedures you see the wastebasket. You can throw away commands by dragging them to the wastebasket.

Adding commands to programs

You add commands to your program using drag-and-drop. You pick up a command in the command area. Next, while keeping your mouse pressed, drag it to the correct place in the program, and then release the mouse button to drop it. If a command is at the wrong place, simply pick it up using the mouse and drag it to its new location. It will be moved there. If you want to remove a command, drag it to the wastebasket at the left. Finally, you can copy commands by holding the <Ctrl> key when you pick it up with the mouse. Many commands draw something. The position is indicated by the triangle in the picture, called the cursor. For example, if you draw a circle its center lies on the little cross in the triangle. There are commands to move the cursor. If you move it forwards it moves exactly to the place where the point of the triangle is. You can also change the angle of the cursor. Finally, you can change its size to draw smaller things or to move smaller distances. In Drape you have three collections of commands. When you start the program you only see the easy ones. These are particularly suited for young children. If you want to do more complicated things, press the tab labeled Normal above the commands. You now get a much larger number of commands to choose from. Once you are comfortable with these, you can use the tab labeled Advanced. This will add new

commands and replace a number of commands by more powerful ones. This will enable you to create very fancy programs; even complete computer games.

Running programs
Once you have created your Drape program, you of course want to see the result. There are different ways in which you can run the program. The first thing to do is to indicate which part of the program should be run. As you have seen, a program consists of six procedures. You can indicate the one to run by clicking with your mouse on the symbol in front of it. A black border will appear around it. The default procedure is the topmost one. If this is not the one you want to run, click on another one. (It is a good practice to make sure that always the top procedure is the one to run, but for testing purposes it is still useful to be able to run the others as well.) If you want to check whether it is correct you better run it slow, using the following button: Run the program slowly. It runs your program slowly. Note the small red triangle above your commands. It shows where the program is now. In the picture area you will see your picture appear. The black triangle is the cursor that tells you the current position, orientation and step size. If you want to run the program even slower, first press the pause button (see below). Now you can repeatedly use the following button to step through your program: Do a single step of your program. If the program seems to work fine you can run it fast using the button: Run the program fast. In this case you might want to switch off the triangular cursor using the button: Turn the cursor on or off. Finally, you can decide to run the program in a much bigger picture. For this press the button: Turn the picture big or small. Note that (almost) everything will be scaled in this case. During the running of the program you can temporarily pause the program using the button: Pause execution of the program. If something is going wrong you can stop the execution using: Stop execution of the program. (To stop the execution of the program you can also press the <Esc> key on the keyboard.) It is also possible to switch between fast and slow execution during the running, or to change the cursor. (It is not possible to change the picture size while the program is running.)

Loading, saving, and printing programs

Drape has the usual buttons for creating new programs, loaded existing programs, and saving the programs you created. All program files have the extension .DRP. (They are simple readable files, which you can easily give away to other people or send to me.) The following buttons exist: Create a new program, removing the existing one. Load a program from disk. You will be asked to indicate the file in the usual way. Save your program to disk. You will again be asked for a filename. It is also possible to print a textual version of your program. To this end press the following button: Print the program in textual form. You are shown a new form with the program in a readable form. You can scroll through it and decide to print it or not. Especially when you use advanced commands this is a very useful thing to do because you get a better picture of what the attributes are.

Saving the picture

Besides saving the program, it is also possible to save the picture created. For this use the button: Save the picture. You are asked for the filename. The picture is saved as a bitmap (.BMP format). You can now view or change the picture with any drawing program (like Paint). You can also use these programs to print it.

Ending Drape
To end Drape simply press the button: Ending Drape.

The different commands

Here follows a complete list of the different commands that are available, together with examples of their use. Actually, these are the commands you get in the normal mode. In the easy mode you get a subset of these. In the advanced mode you get a lot of extra commands that are described in the next section.

Moving and drawing

The basic idea in Drape is that your program controls a cursor displayed in the form of a triangle in the picture. You can move this cursor to different places, draw lines, etc. The cursor always points into a particular direction. If you move or draw a line, this is done in the direction of the cursor. To move in a

different direction you must first change the orientation of the cursor (see below). The following move and draw commands exist: Move one step in the direction of the cursor. Move one step in the opposite direction. Draw a line in the direction of the cursor. Draw a line backwards. The size of the step and the length of the line can be changed (see below). The following little program draws a line with a hole in it (because of the move in the middle).

It is sometimes useful to return to the center of the image: Move to the center. To change the orientation of the cursor the following commands exist: Rotate 90 degrees to the left (counterclockwise). Rotate 45 degrees to the left. Rotate 6 degrees to the left. Rotate 90 degrees to the right (clockwise). Rotate 45 degrees to the right. Rotate 6 degrees to the right. The small angles are especially suited for creating things like spirals (see below). Here is again the very basic example of drawing a square by four times drawing a line and making a 90-degree turn.

It is very important to start writing a number of small programs using just these commands. Getting a feeling of how to get the cursor to the places you want is essential in building more complicated programs.

Setting the color

Just drawing in red is a bit boring. Drape allows you to choose from six different colors: Change the current color to red. Change the current color to blue. Everything after such a command is drawn in the new color. The following example draws all four sides of the square in a different color.

Setting the line width

You can change the width of the lines that Drape uses: Thin line (1pixel). A bit thicker (3 pixels). Very thick (7 pixels). The following example draws the square with very thick lines:

Drawing shapes
Rather than just drawing lines it is also possible to draw circles, triangles, etc. These will be filled with the current color. (They get a black border.) They will be centered at the current cursor position. (Note that the orientation of the shape depends on the current orientation of the cursor. Draw a filled square. Draw a filled rectangle. Draw a filled thin rectangle. Draw a filled circle. Draw a filled triangle. Draw a filled flat triangle. The following example draws red triangle in a yellow circle in a blue square.

Filling and clearing

You can fill a region in the plane using the fill command. It fills pixels, starting at the current cursor position until a boundary is reached. Fill the region below the cursor. Here is a little example that draws a red square and fills it with yellow:

To clear the screen you use the following command: Clear the screen. To clear it to a different color, simply clear it and then fill it:

Changing the size of shapes and lines

You can change the size of the different shapes, or the length of the lines and moves, using the following commands: Double the size. Make it a bit larger. Make it a tiny bit larger. Halve the size. Make it a bit smaller. Make it a tiny bit smaller. For example, the following program draws a number of squares inside each other.

The following program draws a little spiral.

Note that this can be done a lot easier with the repeat commands described below.

Calling procedures
As you will have noticed there are six dark gray rectangles in Drape in which you can place commands but only one of them is executed. So why place commands in the others? The different parts are called procedures. And you can execute one procedure from within another procedure. This you do by placing the symbol corresponding to the procedure at the place where it should be executed. For example, you can define the second (green) procedure to draw a square. Now you can tell the top (purple) procedure to draw a red and a blue square by twice calling the green procedure. This leads to the following program:

The possibility to call procedures makes Drape very powerful. As you can see from the many example programs provided, almost every program uses procedures. Calling procedures can also be used when you run out of space in the first procedure. Simply place a call to the second procedure at the end of it and

continue there. The following procedure call commands are available: Call the first procedure. Call the second procedure. Call the third procedure. Call the fourth procedure. Call the fifth procedure. Call the last procedure. It is possible for a procedure to call itself. This is normally named a recursive call. Be careful though. It often means that the program turns into an infinite loop, repeatedly calling itself. This might cause an error after a while. Recursive calls are normally only useful in combination with conditional commands (see below).

Repeating commands
It is often necessary in a program to repeat a particular command (or group of commands) multiple times. It is of course possible to simply place a whole sequence of the same commands in the program but this is a lot of work (and eats up all the room for the program). To remedy this, Drape contains a number of repeat commands. Placing such a command in a program means that the next command is repeated a number of times. For example, the following program draws 5 lines.

Note that the repeat command only affects the next action. All actions after that are simply done once. The following repeat commands exist: Repeat the next command 2 times. Repeat the next command 3 times. Repeat the next command 4 times. Repeat the next command 5 times. Repeat the next command 10 times. Repeat the next command 100 times. If you need to repeat a command a different number of times you can combine the repeat commands. For example, the following program draws 50 horizontal lines.

Often it is required to repeat a sequence of actions a number of times. This can be achieved by putting this sequence in a block. For this you need the following commands: Start a block. End a block.

For example, drawing a square mean that four times you must draw a line and make a 90-degree turn. You can achieve this as follows:

Blocks and repeat statements can be nested, that is, one can occur in the other. For example, the following little program draws three squares next to each other.

Here is a nice little spiral, created with the repeat command:

Random positions and lines

To make some weird looking drawings it is sometimes nice to go to random positions, or to draw a line to a random position. For this the following commands exist: Move to a random position. Draw a line to a random position. For example, the following program draws 100 random squares on the screen:

The following draws 100 random line segments on the screen:

Following the mouse

It is possible to let the drawing position follow the mouse. The following two actions exist: Move to the current mouse position. Draw a line to the current mouse position. Here are some examples of their use:

This program continuously draws circles at the mouse position. Move the mouse around to create lots of circles. The following program follows the mouse while drawing lines.

10

Conditionals
An important aspect of any programming language is the conditional statement. In this way the program can do different actions depending on certain things. Drape contains some simple form of conditionals that is still pretty powerful. It is possible to change the action based on whether a particular mouse button is pressed or not. These conditionals are especially useful in combination with the actions to move the mouse. The following conditionals exist: Perform the next action only if the left mouse button is pressed. Perform the next action only if the right mouse button is pressed. Perform the next action only if no mouse button is pressed. Note that all conditionals have a special shape. The following program allows you to draw on the screen while you hold the left mouse button down.

There are also conditionals that check the color of the pixel at the current location. Perform the next action only if the color below the cursor is red. Perform the next action only if the color below the cursor is blue. Here is a little (stupid) program that draws 10 red circles in the pictures and next tries to turn them into blue.

Stopping the program

Sometimes it is useful to be able to stop the program from inside it. Stop the program. For example, here is a little (recursive) program that draws circles at every place you click with the left mouse button, and stops when you click the right mouse button.

11

Advanced Commands
If you want to make more complicated drawings you probably want some more control over issues like the color, the rotation angle, the position, etc. To show the advanced, press the tab labeled Advanced above the commands. This will add a number of new commands and changes a number of existing commands in more powerful version. Note that they all have a different shape, to show that they are advanced features. Most of these advanced commands require you to supply a value. When you place them in the program you are asked for this value. You can later change the value by clicking the command with your right mouse button. The following advanced commands are available:

Setting attributes
These advanced commands allow you much better control over the attributes. Set the color. With this command you can choose from a much larger collection of colors. Set the line width. Here you can set the line width to an arbitrary value. (0 means no line. This is useful for drawing shapes without a border.) Set the angle. Again you can specify the angle precisely. The angle you give should be in degrees, counter clockwise. So, e.g., a value of 90 means a right angle to the left. Normally the angle is taken with respect to the current Angle. If you for example put a 30-degree angle next to a 90-degree angle you get a 120-degree angle. You can avoid this by checking the box labeled absolute. In this case the actual angle becomes the value you type in. So this time putting a 30-degree angle next to a 90-degree angle does not result in a 120-degree angle but the angle simply becomes 30 degrees. Change the size. Here you can increase or decrease the size. The value you type in is the percentage change. For example, a value of 200 means that you double the size. A value of 50 means that you halve the size. Again the change is relative to the current size. If you want an absolute size check the box labeled absolute. For example, to set the size back to the starting size, simply type in a value of 100 and make it absolute.

12

Moving and drawing

These advanced commands extend the drawing possibilities of Drape. Move to a new position. You specify the distance to move along the current angle and the distance perpendicular. Note that this movement is relative to your current position. The value you give is the number of steps that must be taken. The size of the steps depends on the current size setting. (Note that you can specify values smaller than 1.) If you check the box labeled absolute you move to an absolute position rather than a relative one. The current angle, step size, and position are not taken into account. The center of the picture has position (0,0). So you can go to the center of the screen by specifying an absolute motion of (0,0). Draw a line to a new position. Same as above but this time drawing a line to the new position. There are also two new drawing commands, for drawing text and for drawing images: Draws a text at the current position. You will be asked to provide the text to draw. The text will be centered at the current location. The font size normally depends on the current value of the size. If you want the font size to be fixed check the box labeled absolute. Draw a rotated text at the current position. Same as above, but this time the text is rotated with the current angle. Draw an image at the current position. You will be asked for the filename of the image to draw. This can be .BMP, .ICO, .WMF and .EMF images. You can either type in the file name if you know it or (better) press the button labeled to search for the file. Normally, the image will be scaled, depending on the current size value. (Icon files cannot be scaled.) If you dont want it to be scaled, check the box labeled absolute. The image must be stored in the same folder as the program that uses it. Otherwise, when you run the program later, it wont be able to find the file.

Saving the picture

Sometimes it is useful that you can save the current image. For example, you temporarily want to display some help text. You could first save the image, show the text, wait a bit, and then load the image again. Save the image to a file. You must specify the file name under which to save the image. (It will by a .BMP file.)

13

Sound
It is also possible to add sound effects to your program: Play a sound effect. You will be asked to give the filename for the sound effect. You can either type in the file name if you know it or (better) press the button labeled to search for the file. The command can play both wave files and midi files. The sound must be stored in the same folder as the program that uses it. Otherwise, when you run the program later, it wont be able to find the file.

Control
Repeat the next command a given number of times. Can be used to specify a different number of repeats than the default values. Sleep for some time. You specify the number of milliseconds. Do next step if color below cursor matches. You specify a color. When the color at the current mouse position is this color the next step is executed (or the next block of steps). It is also possible to take certain action when the user pressed a certain key on the keyboard. This allows for all sorts of interactive programs. Drape maintains the last key pressed by the user. You can check it using the following command: Do the next step if the user pressed the specified key. You are asked to provide a character. Note that when you check for the correct character this is removed, that is, the next time you check for it, it will not be found unless the user pressed the key again. (This is normally the behavior you want.) Exit the current procedure. This command is useful in combination with some conditional. For example, a procedure can repeatedly do something until you press or release a mouse button.

Environments
The current environment consists of the current position, angle, and size. Whenever you add one of the commands to change these you change the current environment. Sometimes it is useful to return to a previous environment. For example, a part of the program might change a lot of settings to draw something. Rather than changing all the settings back, it would be easier to save the environment before calling the part and restoring it afterwards. For this the following commands exist:

14

Save the current environment. Restore the last environment. In both cases you are asked for a name to store the environment under. It can be useful to work with a number of different environments, each with its own name. For example, if your program needs to draw things at different places you can create an environment for each place and switch between them while drawing.

Calling other programs

It is sometimes useful to use programs you wrote before as part of your current program. For example, if you wrote a nice program that draws a spiral, and now you want to draw 10 spirals, it is easier to call the original program. For this the following command exists: Call a program. You will be asked to provide the filename of the program to be called. You can either type in the file name if you know it or (better) press the button labeled to search for the file. The program file must be stored in the same folder as the program that calls it. Otherwise, when you run the program later, it wont be able to find the file. Calls to programs can be nested; that is, one program can call another, which in turn calls another program, etc. There is though a limit on the depth of this nesting. You will be warned when you exceed this.

Variables and expressions

In many of the advanced commands you must provide a value, e.g. to indicate the distance to move, the angle to set, etc. Rather than providing a simple value, you can also type in an expression. For example, you can set the angle to 360/5 degrees. Expressions can be made as complicated as you like. You can use the standard operators (+,-,*,/), you can use brackets, and you can put an expression between | symbols to take the absolute value. For example, 3*(-4+8) - |12-16| is a valid expression (its value is 8). You can use the symbol # to round the value behind it. For example #(7/3) is equal to 2. There are also some predefined values you can use. For example, x, y, angle, size, linewidth, and color, give the current values of these parameter. For example, to mirror the current position, you can make an absolute move to position (-x,-y). Some other values are pwidth and pheight that give the width and height of the picture, xmouse and ymouse that give the current mouse position, ccolor that gives the color below the cursor position, and large that indicates whether the large pixel is visible (1) or not (0). The values lmouse and rmouse indicate whether the left or right mouse button is pressed. Finally, there are the values true (1) and false (0). Also, most colors exist (red, blue, green, yellow, white, black, lightblue, purple). A special value is random that gives a different random number between 0 and 1, every time you use it. You might wonder why you would want to use all these. We will see this below. You can also create your own variables, and give them values. For this you use the following command: Set a variable to a value. You will be asked to provide the name of the variable and the value (which can be any expression). You can also set the variables x, y, angle, size, linewidth, and color. The others you should not change. For example, to set the current color to the color below the cursor, set color to ccolor. (Soon you will realize that you actually dont need many of the advanced commands because you can use the setting of variables instead.)

15

Besides setting variable you can also test the value of a variable. Check whether a variable is true. You will be asked to provide an expression that is either true or false. For this you can use the well-known comparison operators. E.g. you can ask whether x>xmouse or whether color=red. The available operators are <, >, =, <=, >=, <> , the last meaning not equal. To take the or of two conditions, simply add them up. To take the and, simply multiply them. For example, (x>-pwidth/2)*(x<pwidth/2) tests whether the xposition is in the visible part of the picture. There is one important special variable that is very useful: frozen. When you set frozen to true, the picture is no longer updated. Only when you set frozen back to false are all the changes made visible. This has many possibilities. First of all, when drawing a lot of stuff, it is a lot faster. Also, it can be used for animation purposes. (Be careful though. While frozen is true also mouse clicks are no longer handled.)

Sharing your work

I want to build up a large collection of examples. If you created a nice program with Drape, please send it to me at markov@cs.ruu.nl. I will collect your work and make it available through the web-site: http://www.cs.ruu.nl/~markov/kids/drape/

16