ImageProcessorProjectDescription2021_Nov14
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 1 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
CMPT 120 Fall 2021 Project: Yet Another Image Processor
Due: December 6, 2021, 11:59p Points: 15 points from Common Marking Scheme, 50 points from here
Introduction
Have you ever used any image processing software like Adobe Photoshop, GIMP, or CorelDRAW
to modify an image? Maybe apply a filter, or simply rotate the image? In this project you are
going to create your own image processing software!
It is an expansion of your Week 9 Coding Exercise with
more functionalities, including rotation, scaling, and
applying filters, all presented in a nice stand-alone
interface. Plus, you will add a computer vision feature to
“detect” a fish in water for your cat. If you thought the
coding exercise was fun, this might be the project for you.
Here are some of the topics you’ll use to complete this
project:
• Loops to continue asking for user input to determine
which functionality to use
• Lists and Dictionaries to store the available
functionalities and state of the program
• Functions to process user input and generate
instruction menus
• Nested for-loop to access pixels of images to perform
the modifications
• Using modules either defined for you or by you
• Utilize the event-loop of Pygame to accept user input
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 2 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
Components
There are two main components that you have to complete in this project.
Component 1: User Interface (10 out of 50 points)
The User Interface controls how information is being presented to the user, and how the program
receives and processes user input. It uses some of the functions provided in the
cmpt120imageProjHelper module. The most notable ones are:
• getImage – loads an image from the computer into the program as a 2D R/G/B array
• saveImage – saves an image represented as a 2D R/G/B array to the computer
• showInterface – displays the image represented as a 2D R/G/B array to a window (user
interface), together with the caption and the instruction text
At any point in time the user interface shows all possible options the user can choose from. There
are two parts in the options:
1. The “system” options – these options include Quit, Open Image, Save Current Image, and
Reload Original Image. They are always available to the user and are selected by the
characters Q/O/S/R.
2. The “manipulation” options – these options vary depending on which mode the user is at:
Basic and Advanced. See below for which options are available to the user. They are
selected by numbers.
Component 2: Image Manipulation Module (40 out of 50 points)
The Image Manipulation Module contains all the functions that perform a certain image
manipulation functionality to an image represented by a 2D R/G/B array (details of each function
are provided below). All functions return a newly created image represented by a 2D R/G/B array.
Points will be allocated to successful implementation according to level of difficulty.
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 3 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
System and Manipulation Options
This list of options is represented as a list of strings in the program and is passed as the third
parameter to the function cmpt120imageProjHelper.showInterface.
This section describes what each option does and provides some hints on how to implement it.
System Options
Q: Quit – Quit the program. In the code this user input updates the control variable that keeps
the while-loop running to False so it no longer repeats itself
O: Open Image – Open an image from the computer. This option uses a module called
tkinter.filedialog that allows the program to show a file open dialog and capture the filename of
the image to be opened. The required “tkinter.filedialog” has been imported for you, so just call:
tkinter.Tk().withdraw()
openFilename = tkinter.filedialog.askopenfilename()
# call the cmpt120imageProjHelper.getImage with openFilename to get the pixels
S: Save Current Image – Save the image currently shown to the computer. This option uses the
same module as the Open Image option and allows the program to show a file save dialog and
capture the filename of the image to be saved. To use it, call the following methods:
tkinter.Tk().withdraw()
saveFilename = tkinter.filedialog.asksaveasfilename()
# call the cmpt120imageProjHelper.saveImage with saveFilename to save the pixels
R: Reload Original Image – Reload the original image (last opened). This essentially resets the
image to its original state. Note that the program does not have to ask the user again with the
file open dialog, as achieved by storing the filename in a dictionary (appStateValues).
Event Loop
The Pygame package expects a specific piece of code called “event-loop” so it can constantly take
user inputs directed to the display window. Without this piece the window will appear
unresponsive.
The provided main.py file has this set up for you. It is written as a while-loop and looks like this:
while keepRunning:
for event in pygame.event.get():
#…rest of code
When you set the Pygame window in focus and press keys, this loop will read the input and put
it to a dictionary (appStateValues). Depending on this input the loop will either prepare itself
to quit, or call handleUserInput, which returns the 2D R/G/B pixel array as a result of the
operation. You can keep this section of the code as-is.
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 4 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
Manipulation Options (Basic) (20 points)
This mode has 7 operations: apply red filter, apply green filter, apply blue filter, apply sepia filter,
apply warm filter, apply cold filter, and switch to advanced functions.
1: Apply Red Filter – Retains the R values of all pixels in the image, and sets G and B to zero.
Before
After
2: Apply Green Filter – Retains the G values of all pixels in the image, and sets R and B to zero.
Before
After
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 5 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
3: Apply Blue Filter – Retains the B values of all pixels in the image, and sets R and G to zero.
Before
After
4: Apply Sepia Filter – Gives all colours with warm brownish tone. The sepia colour for a pixel is
calculated by a weighted average of the original R/G/B values using this formula:
SepiaRed = (Red * .393) + (Green *.769) + (Blue * .189)
SepiaGreen = (Red * .349) + (Green *.686) + (Blue * .168)
SepiaBlue = (Red * .272) + (Green *.534) + (Blue * .131)
For example, if a pixel has [100, 255, 200] as its R/G/B colour, the sepia colour of this pixel will be
[255, 243, 189]. Note that since the formula contains float numbers, you need to convert the
results into integers. Also, the SepiaRed actually has the value 273, but since the maximum value
for each R/G/B value is 255, it needs to be changed to 255 (hint: use the min function).
Before
After
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 6 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
5: Apply Warm Filter – Gives all colours with a warm tone. The warm colour of a pixel is calculated
by scaling the original R value up and B value down using this formula:
Scale up:
if the value is less than 64, the scaled-up value is value/64*80
if the value is 64 or above but less than 128, the scaled-up value is
(value-64)/(128-64) * (160-80) + 80
otherwise, the scaled-up value is
(value-128)/(255-128) * (255-160) + 160
Scale down:
if the value is less than 64, the scaled-down value is value/64*50
if the value is 64 or above but less than 128, the scaled-down value is
(value-64)/(128-64) * (100-50) + 50
otherwise, the scaled-up value is
(value-128)/(255-128) * (255-100) + 100
For example, if a pixel has [100, 255, 200] as its R/G/B colour, the warm colour of this pixel will
be [125, 255, 187], where the R value is scaled-up and the B value is scaled-down. Note that the
scaling might result in a float number, so you need to convert it into an integer. To make things
easier, consider first defining a function that does the scale up calculation and a function that
does the scale down calculation.
Before
After (applied 2 times)
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 7 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
6: Apply Cold Filter – Gives all colours with a cold tone. The cold colour of a pixel is calculated by
scaling the original R value down and B value up using the same formula for the warm filter.
For example, if a pixel has [100, 255, 200] as its R/G/B colour, the cold colour of this pixel will be
[78, 255, 213], where the R value is scaled-down and the B value is scaled-up. If you have defined
the functions for scaling for the warm filter, you can reuse them here.
Before
After (applied 2 times)
Manipulation Options (Advanced) (20 points)
This mode has 6 operations: rotate left, rotate right, double-size, half-size, locate fish and
switch back to Basic functions.
1: Rotate left – Rotates the image counter-clockwise by 90 degrees. This operation requires
creating a new image with width equal to the original’s height and height equal to the original’s
width. (Hint: use the nested for-loop structure to copy a row of pixels into a column of pixels).
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 8 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
Before
After
2: Rotate Right – Rotates the image clockwise by 90 degrees. This operation requires creating a
new image with width equals to the original’s height and height equals to the original’s width.
Before
After
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 9 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
3: Double size – Double both width and height (so the size is actually 4 times as before). This
operation requires creating a new image with width equal to 2*the original’s width and height
equal to 2* the original’s height. To “build” a bigger image, each pixel from the original image
becomes a 2×2 block of pixels in the result image. For example, the pixels at result[0][0],
result[0][1], result[1][0], and result[1][1] will have the same R/G/B values of the pixel at
original[0][0].
Before
After
4: Half Size – Half both width and height (so the size is actually 1/4 as before). This operation
requires creating a new image with width equal to the original’s width/2 and height equal to the
original’s height/2. To “build” a smaller image, the average of each 2×2 block of pixels from the
original image becomes one pixel in the result image. For example, the R/G/B values of the pixel
at result[0][0] with have the average-R/average-G/average-B values of the pixels at original[0][0],
original[0][1], original[1][0], and original[1][1]. You can ignore the last row/column if the
height/width is an odd number.
Before
After
5: Locate Fish – The cat in your photo is hungry! Using the provided fish.jpg, detect the yellow
colour of the fish and draw a green (0,255,0) bounding box around the fish. The line should be 1
pixel wide and surround the yellow areas of the fish. You may import the copy module and use
its deepcopy() function for this operation. To detect the yellow colour, you must use the provided
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 10 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
cmpt120imageProjHelper.rgb_to_hsv(r,g,b) function, which returns 3 values for a Hue,
Saturation and Value representation, given an R,G, and B color. Read about tuples* in your
textbook to understand how to receive a tuple as a return value. You may refer to a HSV color
picker online to help you define a good range for hue, saturation, and value to detect the fish.
Debugging hints: (1) You can set the yellow pixels to a different color to understand what your
algorithm has detected. (2) You can try to create a function to draw a green box in a specified
location, and with a specified height/width. This will help you understand if your drawing function
works, independently of the fish detection.
Note: This feature only needs to work for the provided image’s fish and background. However,
you may not hardcode the values of the box (e.g., location, width, height); they must be
calculated by inspecting the image (the fish might be in a different location in the image used to
test your program!)
*https://runestone.academy/runestone/books/published/thinkcspy/Lists/TuplesasReturnValues.html
Before
After
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 11 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
Submission
Submit a .zip file called cmpt120YAIP.zip containing your main.py, cmpt120imageProjHelper.py,
cmpt120imageManip.py, project-photo.jpg, and fish.jpg. We will be marking your main.py and
cmpt120imageMainip.py. The rest are just to help us to run your program and we might replace
them with our copies.
Notes
• You must only import the pygame, numpy, copy, and tkinter packages, and the provided
cmpt120imageProjHelper.py module. All other functions you use can only either be built-
in or defined by you.
• The Pygame package has a module called transform that can do some of the
manipulations in this project. You are welcome to explore those functions, but you are
not allowed to use them. You must implement it by yourself using nested for-loops as
taught in the class.
• The changes are accumulative, that is, the operations will persist as you apply multiple
functionalities, until the user selects “Reload Original Image”. For example, applying
rotate-left and then again will produce an image that is rotated twice (upside down).
• For this project you will be using a few libraries which are not natively available in IDLE.
You can choose to use Replit (https://replit.com/) to do this project, or use another
Python code editor called Mu (https://codewith.mu/). Both have the libraries needed
installed and are ready for use.
• You must put all your function definitions for the manipulation options in the Python
module file named cmpt120imageManip.py. Each function takes in one parameter (a 2D
R/G/B array containing all the pixels). Refer to our lectures for details. This file should
begin with the lines import cmpt120ProjHelper and import numpy.
• You must put your code for the interactive program (asking for user input) in the Python
file named main.py. This file is what we called a “driver file” that calls functions from
other modules including getImage, showInterface, apply red filter, …etc.
• Code that does not run will receive a significant penalty. Make sure your submitted code
runs!
References & Resources
Some of the function documentation and algorithms can be found in these resources:
Formula used to create the sepia filter:
https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created
Documentation for using the open and save file dialog
https://docs.python.org/3/library/dialog.html
Algorithm for finding the formula for the warm and cold filter:
https://towardsdatascience.com/python-opencv-building-instagram-like-image-filters-
5c482c1c5079
CMPT 120, Fall 2021, Project Project Developers: Victor Cheung, Angelica Lim Page 12 of 12
Version 1.0 © Victor Cheung & Angelica Lim, 2021
Understanding the Provided Code
A few files are provided to you to start your project. You should take a look at the comments in
those files and understand what the provided code does. Here are the details of some of them:
cmpt120imageProjectHelper.showInterface(pixels, title, textList)
This function displays both an image and the available options to the user interface, while setting
the caption of the window.
The pixel parameter is the 2D R/G/B array representing the image to be displayed to the user
interface, the title parameter is a string that determine what the caption of the window is, and
the textList is a list of strings containing all the text displayed – each string represents one line.
This function will adjust the interface window to accommodate all the lines in the testList without
text wrapping and the actual width of the image, for example, if the image is shorter than the
text, the window will still be wide enough to contain that text in one single line.
Do not modify this function.
generateMenu(state)
This function creates a list of strings representing the available options to the user interface. The
list varies depending on which mode the application is in and is determined by looking at the
mode attribute of the state parameter. The function is primarily used by the showInterface
function.
You need to update this function.
handleUserInput(state, img)
This function examines the last user input (available in the state dictionary variable) and performs
operation on the image (available in the img variable) accordingly. It might also update the state
dictionary variable. When done, it returns the result image as a 2D R/G/B pixel array.
You need to update this function.
Readability Guidelines
Please check that your code follows the guidelines here:
https://canvas.sfu.ca/courses/64360/pages/readability-guidelines