Introduction to Quickdraw, CPSC 217 (L02), Winter 2010

Introduction to Quickdraw

QuickDraw

Normally, creating a graphical program requires knowledge of several topics that we won't cover in CPSC 217. As a result, a tool has been provided which hides these details, allowing you to create a graphical program using the material that is covered. The tool, called QuickDraw, can be downloaded here. This link also provides you with access to QuickDraw's documentation and tutorials.

QuickDraw is written in the Java programming language. To run it, make sure that the quickdraw.jar file is in your current working directory and then enter the command
       java -jar quickdraw.jar
at the linux command prompt. This will display a black window where the graphical components of your application will be displayed.

QuickDraw commands can be entered into the window that you originally used to start the application. For example, entering the command
       line 0 0 799 599
will draw a line diagonally across the screen. Use the quit command to exit QuickDraw.

QuickDraw with Python

While QuickDraw can be used to draw images by entering commands directly, its true power is revealed when we use it in conjunction with a program you have written. Many operating systems include pipes which can be used to connect two applications together. In their simplest form, pipes allow the output from one program to automatically become the input for another program.

Setting up such a pipe does not require either program to be aware that the pipe is being used. The pipe is created by using the vertical bar character, |, normally located on the right side of the keyboard, as part of the command to run your program. For example, if you have a Python program named scene.py, and you want to pipe its output into QuickDraw, you would use the command:
       python scene.py | java -jar quickdraw.jar
Now, everything that is generated as output by your program will become the input for QuickDraw. Thus, your program can generate a graphical result by including print statements that display valid QuickDraw commands. Using this technique, you can create a Python program which generates an image as output.

Storing Images in Python

The Python module ppm.py contains functions that will help you load and display images in ppm format, so you do not need to perform this task. The loaded image will be stored as a list of lists of lists in the same format as discussed during the Topic 7 lectures. Namely, the images are loaded and stored in a python variable that is a list of lists of lists. The outer list is a list of columns. Each item in a column list is a list of three integers, which represent the red, green and blue components of the pixel’s color. By representing the image in this way, individual pixels can be accessed in an intuitive way. Assuming that our image is stored in a variable named img, we can read the red component of the pixel at location (x,y) with the expression img[x][y][0]. Similarly, the green and blue components can be accessed as img[x][y][1] and img[x][y][2] respectively. Note that in your code you should avoid the use of the magic numbers 0, 1 and 2.

In order to use this code, you will need to download it and place it in the same directory as your assignment. You do not need to edit ppm.py. The ppm module can be imported just like the math and random modules that you have used previously. It provides several functions that you will find useful.

• ppm.loadPPM
  • Takes 1 parameter which is the name of the file to load
  • Returns the image as a list of lists of lists
• ppm.displayImage
  • Takes 3 parameters which are the x,y location where the image will be displayed followed by a list of lists of lists representing the image
  • Returns nothing

Using these functions, one can load and display DonaldDuck.ppm with the following lines of code:
       imgVariable = ppm.loadPPM("DonaldDuck.ppm")
       ppm.displayImage(0,0,imgVariable)

The following functions are also useful:

• ppm.createImage(width, height): a function that returns a blank image with the width and height specified. Sample usage:
         newImage = ppm.createImage(800, 600)
  After this, newImage exists and its pixels can be changed using their indices like this: newImage[x][y] = [255,0,0]
• ppm.height(image): a function that computes the height of the image and returns it as an integer
• ppm.width(image): a function that computes the width of the image and returns it as an integer

---

This page last modified: http://www.cpsc.ucalgary.ca/~jacobs/cpsc217/W10/code/quickdraw_intro.html