CPSC 120: Assignment 1

Due at 2:59 pm on Monday, 09/09/2013

Home | Announcements | Assignments | Example Code


This short assignment is designed to give you some practice with the basic event-driven programming techniques we have learned, but its primary goal is to acquaint you with the Math/CS department's Linux system.


To Do:

The English phrase "seeing through rose-colored glasses" denotes a tendency to be overly optimistic in one's understanding of a situation. Your job in this project is to build a program that will support this tendency.

Specifically, your program should:

  1. Load an image file as the background of the program's window.

  2. Draw on this image a pair of "rose-colored glasses", which are centered on the mouse cursor and follow it around the screen. They must be transparent enough for the background image to be visible, and they must be tinted some shade of "rose" (i.e. a dark, pinkish tint). As you can see in the sample images, mine have reddish "frames", as well. The specifics of the color choices are up to you.


Save your work in a sketch name "hw1".

How to load an image file

We'll work with image files in some detail later in the semester, and you can read a more detailed tutorial in Chapter 15 of our text. For now, however, all you need to know is how to load a file and display it:

  1. Choose an image that will serve as your background image. The image must be one that you have made yourself—no logos, stock photographs, or other copyrighted material (unless you hold the copyright). Place this image file in the same folder as your Processing sketch.

  2. Declare a variable, of type PImage. As with other variables we have seen so far, this one should be "global" (i.e. outside of the definitions of setup(), draw() or other event handlers). Here, we'll call the variable "bkg", though your own naming choice is up to you:

    PImage bkg;
    void setup() { ... }
    void draw() { ... }
  3. In the setup() definition, include an initial assignment, using the built-in loadImage() command:

    void setup() {
       bkg  = loadImage("myImage.jpg");
       // other statements here ...

    where "myImage.jpg" is the name of your image file.

  4. Display the image, with top left corner at coordinate (x,y). For example, to place your image (stored in variable bkg) at the top left corner, you'd use the command

  5. Like the display of shapes (ellipse(), rect(), etc.), you can control the way the (x,y) arguments determine position by using the imageMode() command. Supported modes include CENTER and CORNER, which have the expected behavior, except that the full image is displayed (c.f. ellipse() and rect(), where you can control the width and height).

Turn In:

Submit the folder containing your Processing sketch and the image file used for the program. You do not need to submit a paper printout of anything.

First-time setup

For most of you, it's likely that turning in this assignment will be probably harder than building the actual project, since you'll be working with the CS/Math department's Linux system. Begin by reading the tutorial notes referred to at the start of this assignment. Once you have a bit of familiarity with the core concepts, you'll need to do some initial setup work (this will likely be the only time you have to complete this task for the semester):

  1. Each of you has an account on our Linux system. See me for your username and your temporary password.

  2. Be sure to read the instructions from IT on connecting to HWS services (at the top of the "SSH" section). In particular, if you are connecting via wifi, you must use the "HWSPrivate" network.

  3. If you have a Mac, open the Terminal application (in the Applications -> Utilities folder). If you are running Windows, you'll need to download Putty (or another SSH client application). See the "SSH" web page in our Linux tutorial

  4. Connect to one of the CS machines, by typing at the command prompt:

    ssh -X username@csfacXX.hws.edu

    Where username is your username on our system, and csfacXX is one of csfac0, csfac1, csfac2, csfac3, csfac4, csfac5, csfac6, or csfac7.

  5. You may be given a cryptic "warning" along the following lines:

    The authenticity of host 'csfac1.hws.edu (' can't be established.
    RSA key fingerprint is cb:7b:41:c4:e6:79:6a:de:e6:82:6d:47:88:3f:6e:f1.
    Are you sure you want to continue connecting (yes/no)? 

    (If you don't get this, don't worry, and go on to the next step.) Type yes and hit ENTER. You should see the message

    Warning: Permanently added 'csfac1.hws.edu,' (RSA) to the list of known hosts.
  6. You'll be prompted for a password. Type the temporary one that was given to you, and hit ENTER. Note that none of the characters you type will be displayed: that's normal when you're prompted for sensitive information. The system isn't frozen, it's just hiding what you type. If successful, you'll see something this:

    lasseter@csfac1.hws.edu's password: 
    Welcome to Linux Mint 13 Maya (GNU/Linux 3.2.0-23-generic x86_64)
    Welcome to Linux Mint
     * Documentation:  http://www.linuxmint.com
  8. Change your temporary password to something secure that you'll remember by typing the passwd command at the prompt:

    lasseter@csfac1:~$ passwd
    Current Kerberos password: 
    Enter new Kerberos password: 
    Retype new Kerberos password: 

    As before, you won't see anything you type in response to the password prompts.

  10. See the "Command Line" section of our tutorial, if you want to familiarize your with other aspects of the Linux command line. When you're doen exploring, type the command exit:

    lasseter@csfac1:~$ exit
    Connection to csfac1.hws.edu closed.

Submitting your work

To submit your work, you'll need to upload it to your personal turn-in directory for this class. This directory is


Naturally, "username" is your login ID. The "~" above means that you'll find my home directory inside the folder tat also encloses your home directory. The "/" separators indicate folder nesting. See the discussion of folder navigation, below.

For this task you need to have an SFTP client application. Begin by studying the "SFTP" section of our tutorial. For Windows, you can use WinSCP, while Mac users have a choice of either Fugu of CyberDuck (there are also several commercial choices, but for our purposes, the free versions all do what you need.)

The details of how you submit your files vary slightly according to the client application you choose, but all of them require these fundamental steps:

  1. Open an SFTP connection to the server at math.hws.edu. Make sure that you choose "SFTP" for your "connection protocol, and that the "port" is set to 22. You will need to provide both your user name and your password.

  2. When you've successfully logged in, your home folder will be displayed by default. Navigate to your turn-in directory, within the folder for this class. To find my folder, navigate first the to folder containing your home directory: this "parent" folder is named "home". From there, you should be able to open my folder, then classes, then cpsc120, then your personal folder.

  3. Copy your Processing sketch folder, hw1, into your turn-in folder. The folder, the Processing sketch, and your image file will be copied over.

  4. You may re-submit this work as many times as you like, up to the due date/time. Anything submitted after 2:59 pm on Monday will be considered late (and every file contains a time stamp).


John H. E. Lasseter