| Lecture notes for Computer Science I by James Tam | Return to the course web page |
You will learn how to use the QuickDraw library for this assignment. This library is a collection of Java classes that allows you quickly and easily add graphics, simple animations or even sound to your Python programs. It doesn't require any direct knowledge of Object-Oriented programming or programming using the Java language (although you will need to know how to run pre-created Java programs). To use the library you need to download it into the folder or directory where your Python program resides. Your Python program needs to communicate with QuickDraw via a sub-process. Details about how to do this will be provided on the course web page under the section "Course topics and notes" and point number 7: introduction to graphical programs.
If you are running your program while logged onto one of the computers in the lab (you won't be able to run QuickDraw with a text-only connection like SSH) you don't need much to get set up. Just download the QuickDraw library (under this [link] and find the download link for the QuickDraw jar (zip compressed) file). The easiest approach is to save in the same directory where you are creating your Python programs e.g., if you have directory called "a3" then save the QuickDraw library to the Assignment 3 directory. Working at home is a bit trickier and isn't recommended for assignments that employ QuickDraw. You would first have to install the Python interpreter (v2.7) on your computer (and set the "path") so that your operating system can find it. Then you would have to install the Java interpreter if isn't already installed on your machine [link].
Because this isn't your first programming assignment it will also require you to do a little bit of problem solving in order to come up with parts of the solution as well as some program design: determining how to divide your program up into parts with each part eventually being implemented as a function.
Part I: Creating a string of blinking colored lights
You are to write a program that will draw [3 circles] each with a radius of 50 pixels. The first circle will be 100 pixels below and to the right of the top left corner of the window. The second circle will be 100 pixels below and to the right of the first one and the third circle will 100 pixels below and to the right of the second circle. At first the circles will appear in 'unlit' form outlined in white but not filled. After a short delay of a few seconds the first circle will 'light up' in red. A few seconds after that the second circle will light up blue and finally a few seconds after that the third circle will light up green. Another few seconds should pass and all three circles simultaneously appear back in outline form after which the cycle of lighting up and going dim should continue until either the QuickDraw window is closed or the program is interrupted and shut down.
An example of how your program should look: [Movie]
Part II: Making a simple animations
This program will animate a graphic: either a 50x50 rectangle, or in the full version a very small image of comparable size which will be loaded into your program (if you don't have anything handy here is a [sample image] that you can use in your assignment). There are different versions of the assignment but in all the completed versions the graphic will start in the very top left hand corner of the window and gradually make it's way to the bottom right corner. Because of the speed at which modern computers can draw such simple graphics you should implement a delay in your program so the animation of the moving graphic can be detected by the viewer. You will need to experiment to find a delay time that makes your animation look reasonably good but as long as your marker can clearly see the movement then you need not worry about getting a perfect time because there isn't one.
Animations showing how the different features of the program should look:
- Left to right, then a downward motion with the animation traversing most of the window. The graphic moves down at the rate of one pixel: [Movie: edited for length and doesn't show the entire animation]
- Left to right, then a downward motion but with the graphic moving downwards at a rate equal to the size of the small graphic (i.e., it moves downwards faster): [Movie]
- The graphic moves along the columns instead of along the rows (top to bottom and then left to right): [Movie]
- The graphic moves in a 'zigzag' fashion along the rows (ala the old Space Invaders it moves left-right, down, right-left and then it repeats the cycle [example version of Space Invaders] video game: [Movie, Assignment: edited for length I don't show the image getting to the bottom of the screen but it actually does eventually get there]
In all but one case all of the later features will override earlier features e.g., if you can move the object down at the rate of 50 pixels then it's assumed that you also know how to move it down by 1 pixel at a time. The only exception is #3 when the object moves in an up and down direction before moving left to right. That means for Part II if you hand in a version of the program with feature #3 & #4, completed then you can get full marks for functionality. (Feature #4 is similar to feature #1 and is harder than #3).
Both parts of your assignment (and any corresponding versions) must not only be implemented using functions but those functions should be implemented according to the principles of good design. Each function should have a well defined task and not implement multiple tasks. Also each function for this assignment should not be longer than computer one screen. Although most of your grade will be determined by getting a working program, a good portion of your mark will be determined by how well you decompose your solution into parts. In addition the other design principles that you learned from previous sections should also be applied in the creation of your solutions (e.g., good naming conventions, the appropriate use of named constants). To help you get started in the design of your assignment some of the actions that your program will likely be implementing could be:
Part I: initialization of variables, lighting up and dimming the circles.
Part II: initialization of variables and the animating of the graphic in the different ways that are required by the assignment.
Finally you need to submit a README text file with your assignment that lists out in point form: the features/versions of each part of the assignment that you have completed, a list of the data files required by your program to work, any special instructions or limitations that your marker needs to be aware of in order to run your program properly (e.g., assumptions about the location of the QuickDraw library with respect to your program).
