Saint Louis University |
Computer Science 144
|
Dept. of Math & Computer Science |
This assignment is more technical in nature. Therefore, we are going to use a common development style known as "pair programming" in which you are asked to work with one other student in developing a single piece of software to submit. If any student wishes to have a partner but has not been able to locate one, please let the instructor know so that we can match up partners.
It is vital that both students contribute to the development of the project. Please make sure you adhere to the policies on academic integrity in this regard.
The goal for this project is to develop something akin to a "cutting tool" that might be found in professional photo-editing software. You are to allow the user to indicate a polygon or curve in a photo, and then to create a mask to either isolate or remove the enclosed area of the picture.
Before giving the technical requirements for your software, we begin by providing a demonstration of our own software. Please note that you are not required to mimic our exact interface, nor are you required to include all features of our version. But it should give you some ideas of what is possible.
Our software has the following interface. You can indicate an enclosed area of the picture in one of two ways.
Using a series of mouse clicks to indicate vertices of a closed polygon. (The polygon is completed by selecting a point that is reasonably near to the first point.)
Using a single "press-drag-release" gesture to outline an enclosed area. (We automatically close the shape as soon as the mouse is released, even if the mouse did not return to the starting position.)
Once a shape has been indicated, you have the following choices:
Press '+' to crop the photo so that only what is inside that shape remains.
Press '-' to crop the photo so that everything inside the shape is removed.
Press the backspace/delete key to unselect the current shape (without altering the image)
At anytime, you may also do either of the following:
Press 'r' to reset the image back to the original.
Press 's' to save a copy of the current image to a PNG file.
Image courtesy of blogger.com.
As mentioned above, you do not have to recreate the exact demo above. Instead, we wish to outline some minimum functionality that must exist, and then leave it to you to explore adding extra features or improving on a convenient user interface. The minimum functionality for a complete project includes:
You must give the user a way to select an area of the screen for editing, using either the point-to-point polygon approach in the above demo, or the mouse-dragging approach in the above demo. (Of course, you're welcome to do both if you wish.)
You must visually display the selected shape as it is being drawn (i.e., akin to the use of red lines in the above demo).
Once selected, you must provide a means for the user to crop the entire image down to include only the area within the selected shape (akin to use of the '+' key in our demo).
You must provide some means for allowing the user to save an edited image to a PNG file.
Very importantly, you must submit a clear User's Guide for your interface as part of the submitted "readme" file outlined below.
Beyond the minimum requirements, there should be ample opportunity to have fun with this project and expand the functionality and usability of this tool. Possibilities include (but are not limited to):
There are some distinct challenges in this project that build upon techniques we have seen earlier in this course.
Using arrays to represent an arbitrary polygon
Whether you allow the point-to-point or mouse-dragging for a
user to define a shape, the underlying shape should be
represented as a sequence of (x,y) points that define vertices
of a polygon. (It's just for the mouse-dragging interface, there
are many intermediate points on the polygon.) You should use
arrays to store the ordered sequence of x- and y-coordinates
along the polygon.
Keep a count of the current number of points on the polygon, and add a new point for each mouse-click or mouse-drag, depending on your interface.
Standard arrays in Processing must have a predefined size. While there are more advanced techniques for dynamically-sized containers, we are content with having you assume a reasonable maximum number of points that will ever be on a polygon. (Our software uses 10000 as the maximum.)
Feel free to review our earlier examples of array usage.
Using a mask to crop an image
Once a polygon has been selected, to use it to crop or mask the
image, you will need to create a custom PGraphics instance with
a polygon drawn as a mask.
Feel free to review our
earlier examples regarding masking.
Making an interactive sketch
One of the challenge aspects will be monitoring the user's
interactions to control the software. To be successful, you will
likely need to keep track of several various "state variables"
to denote the current status of the
software. For example, a key-press may have different effect if
pressed whether it is before, during, or after the user's
defining of a shape. You may want similar distinctions in the
way your software reacts to mouse gestures, depending on the
current state.
To track these changes in states and vary behavior based on them, you will likely want to have one or more boolean variables or integer variables used to represent current status.
Using PImages and PGraphics
While you will likely need to use a PGraphics instance to
achieve the masking effects, you may also find more general use
of PImage and PGraphics instances to effectively keep
"off-screen" versions of various artifacts of the imagery.
Equally important, this project simply has more complexity than anything we've done so far. The key is to stay organized, and to break down the task into many more managable subtasks. We offer some general for good software design techniques that are often used to manage the complexity of a project.
Do not write long pieces of interrupted code. Make aggressive use of defining your own functions in order to compartmentalize various subtasks. Ideally, any one function should have perhaps at most 20 lines or so.
Develop the program in stages, working on separate functionality. For example, a good first task has nothing to do with image manipulation, rather in allowing an interface for the user to select a polygonal shape on a blank canvas (whether by mouse clicks or mouse dragging). So it might make sense to work on a smaller program first that only does that portion (as with the following).
Once you have that stage complete, you can separately consider the goal of how to turn the polygon into a mask that can be used to alter the original imagery.
If you have some portion of the functionality working, make sure to save a copy of your sourcecode separately, so that if you later break the functionality in your current version, you can go back and reference the older version. (Professional software developers generally take advantage of software that provides what is known as "version control", keeping track of all past versions of the source code for later reference, but I don't want to add too much extraneous technology to our workflow for this course.)
The assignment is worth 70 points, which will be assessed as follows:
In addition to the above points, we will happily award extra credit points to those who go significantly beyond the minimal project requirements.
For this project, only one member of a partnership needs to submit the work, but both members of the team should be clearly identified within the header of the source code and the readme file. We ask that you submit the following three files:
The .pde file that contains the actual Processing source code you've written
A separate 'readme' text file, as outlined in the general webpage on programming projects. Of particular note for this project, your readme file must include:
A .png image of an edited image that was created with your program. Note well that we ask for the png file format because it provides support for transparent layers within an image. (jpg format does not support transparency.)
Please see details regarding the submission process from the general programming web page, as well as a discussion of the late policy.