No programming lesson is complete without starting with a "Hello World" example.

Once you've downloaded and launched DrawBot, you'll be welcomed with a three-paned window. The top right side of the window is where your code will be written, and the gray left half of the window is where your drawing will show up. The bottom right of the window is reserved for any text output from your code — the text won't make it into the final drawing, but it's always useful to print messages to yourself in the code as you go. Feel free to resize the window or the individual panes to give your code and image all the room it needs.

In the code editing area of DrawBot's window, let's start programming:

You'll notice that the code editor helpfully applies color to your code — the print function is in blue, and the text within quotes (otherwise known as a string in Python) shows up in magenta.

To run this program, either click the Run button at the top left of the window, or type Command-R from the keyboard. If all goes well, you should see some text show up in the output area below the code editor.

DrawBot does so much more than simply print out text, let's see if we can make an image. The image drawing area is solid gray — that's because we haven't even specified the size of the canvas that we want to draw into. Add this line of code to your program and run it:

And the canvas appears, 300 points wide by 200 points tall.

If it looks larger than 300 by 200 pixels, that's because you'll start out by drawing vector art into an infinitely scalable canvas without the limitations for screen resolution — right now the canvas is set to scale as large as it can be in the window, but when you save the image later you'll see it at its final size in pixels.

But now that we have a canvas to draw into let's add one more building block for now —

A rectangle appears! So what's really happening here?

Your first program in DrawBot is three lines long, each line containing what is known in Python as a function. A function is a command, which sometimes needs some additional information from us (but not always), which we provide as arguments in between a set of parenthesis ().

In the first line, you called the print() function, and provided it with the text that you wanted to print in quotes.

You then called the size() function in the second line to set the canvas size, followed by a width and height for the canvas. size(width, height)

Finally, you gave DrawBot the command to draw a rect, or a rectangle, along with four numbers for positioning: the horizontal starting position from the left side of the canvas, the vertical starting position starting from the bottom of the canvas, and then the width and height of the rectangle. rect(x, y, width, height)

Go ahead and try changing the numbers and run the script again — as long as you always set two numbers for size() and four numbers for rect() it should work just fine and you will see the rectangle move around and change size.

Before we get *too* far, let's cover some real Python basics in the next section.