Part 1 – Sepia Filter
For this part, you will create a function that takes a picture myPicture as input, and returns a new image that is myPicture but applied to a sepia filter. To quote Wikipedia, it is “a reddishbrown colour, named after the rich brown pigment derived from the ink sac of the common cuttlefish Sepia [a genus of cuttlefish]”. A sepia tone is applied often to digital images and video to create an effect of old age on an artefact or a nostalgic look. Below are two examples of images (left) and their resulting sepia-tone images (right).
Cuttlefish, source https://commons.wikimedia.org/wiki/File:Sepia_ officinalis_(aquarium).jpg
Morrison Hall, St. Francis Xavier University, source https://commons.wikimedia. org/wiki/File:Sepia_officinalis_(aquarium).jpg
Complete the following: 1. You will create a function called sepia that takes as input a picture. Its function header must be the following: def sepia(myPicture): 2. First, the function sepia must duplicate the provided picture (myPicture) so as to not modify the original picture. Use the JES function duplicatePicture to accomplish this; duplicatePicture takes one input (a picture) and returns a picture object with the same image as the original. Only modify the pixels of the duplicated picture, as otherwise you will modify the original picture, which the user may use with other filters.
2
3. For each pixel of the (duplicated) picture, let redComp, greenComp, and blueComp be the red, green, and blue colour components of the pixel, respectively. Set the colour components of each pixel to be the following: • Red: 0.393 * redComp + 0.769 * greenComp + 0.189 * blueComp. • Green: 0.349 * redComp + 0.686 * greenComp + 0.168 * blueComp. • Blue: 0.272 * redComp + 0.534 * greenComp + 0.131 * blueComp. 4. Return the filtered picture, e.g. if the duplicated picture is named newPicture, then return it using: return newPicture
Part 2 – “Box” Blur Filter
Here we will implement a linear filter called a box blur. At the heart of this filter is taking the average of a pixel’s colours with its neighbours (adjacent pixels) together. It creates a simple blurring effect, for more information if you are curious check out https://en.wikipedia.org/ wiki/Box_blur. A box blur can be repeatedly used to make a picture more blurry (see below), or one can increase the window size of the window/box; in this assignment you will implement box blur with window size 3 (a 3×3-box blur filter). It is an example of an algorithm that employs a sliding window; that is, for each pixel a window is “slid” across each pixel in the picture.
Complete the following:
For this part, you will implement a function called blur that, given a picture myPicture, it will return a new picture (that is a duplicate of the original) with a 3×3-box blur filter applied to it. The function header is the following: def blur(myPicture): You will find the following function useful, I require you to use it. Try to understand what the code does, and type it into JES:
3
It is important to observe that the function isOutsidePixels(myPicture,coordX,coordY) returns 1 if there is a pixel at position (coordX,coordY), and returns 0 otherwise.
posX −1, posY −1
posX,posY
posX, posY −1
posX + 1, posY −1
posX + 1, posY
posX −1, posY
posX −1, posY + 1
posX, posY + 1
posX + 1, posY + 1
3
3
Figure 1: 3×3-Box Window at position (posX,posY ). Like with previous parts, you will create a duplicate picture newPicture of myPicture so it does not modify the original picture. The algorithm will consider every pixel in newPicture, and will compute its colour by referencing colours of pixels from myPicture. To set the colour of each individual pixel at position (posX,posY ), please follow the instructions in the next section for Steps 2(b)–(c). After every pixel is considered, return newPicture. Do not modify the colours of pixels in myPicture, only set the colours of pixels in newPicture.
High-Level Description of the Algorithm (your program may not exactly follow this):
1. Duplicate myPicture, set this duplicate to be newPicture. 2. For posX = 0,1,2,...,getWidth(myPicture)−1: For posY = 0,1,2,...,getHeight(myPicture)−1: (a) Set sumRed = 0, sumGreen = 0, sumBlue = 0. Perhaps include a variable borderCount=0 that keeps track of the number of non-existent pixels. (b) For winX = −1,0,1: For winY = −1,0,1: i. If a pixel exists at position (posX+winX,posY+winY) in myPicture then: • Add its red, green, and blue values to sumRed, sumGreen, and sumBlue, respectively. ii. Else: • Increment by 1 the number of non-existent pixels borderCount. (c) Set the new red, green, and blue values for the pixel in newPicture at (posX,posY).
3. Return newPicture.
4
...
...
...
...
...
...
...
...
...
...
...
0 1 2 3 w−1
0
1
2
3
h−1
h - height
w - width
1,1
Figure 2: The pixels considered when updating the colour of the pixel at position (1,1). When considering the pixel at coordinates (1,1) (where (posX,posY ) is the position of the pixel, when posX = 1 and posY = 1. To compute the colour of this pixel, we sum each of the neighbouring pixels and itself’s colour components (separately) and divide each sum by the number of existing pixels in the window. Here we consider the pixels at positions (0,0), (1,0), (2,0), (0,1), (1,1), (2,1), (0,2), (1,2), (2,2), 9 pixels. For example, to set the red component, sum the red values of these pixels and divide it by the number of existing pixels we considered, 9 pixels.
Computing the colour for a pixel at (posX,posY ) :
To compute the colour of a pixel at position (posX,posY ), the program should compute the “average colour” of its neighbouring pixels including itself. You must consider all existing pixels in the window, see Figure 1. That is, sum together the red components of existing pixels at positions (posX−1,posY −1), (posX,posY −1), (posX+1,posY −1), (posX−1,posY ), (posX,posY ), (posX + 1,posY ), (posX −1,posY + 1), (posX,posY + 1), (posX + 1,posY + 1), then set the red component to this sum divided by the number of pixels part of the sum. Similarily, the same is to be done respectively with the green and blue components. See Figure 2. That is, if sumRed, sumGreen, sumBlue are the sums of the red, green, and blue components, respectively, and borderCount is the number of non-existent pixels in the window, then the new colour avgCol = sumRed 9−borderCount , sumGreen 9−borderCount , sumBlue 9−borderCount. Some tips: • If isOutsidePixels(myPicture,neighX,neighY), where (neighX,neighY) are coordinates, returns the value 1, then there is a pixel at this position. Perhaps use an if statement block to consider each pixel if the test hinted at is true, and an else block whenever there is no pixel at the given position. • Ensure you keep track of the number of non-existent pixels/existing pixels when considering all the pixels in the window of a pixel at (posX,posY ). If you just divide by 9 and not the total number of existent pixels in the window 9−borderCount, you will notice a white/gray border along the boundary of the image. Be wary of edge cases as seen in Figure 3.
5
...
...
...
...
...
...
...
...
...
...
...
0 1 2 3 w−1
0
1
2
3
h−1
h - height
w - width
1,0
...
...
...
...
...
...
...
...
...
...
...
0 1 2 3 w−1
0
1
2
3
h−1
h - height
w - width
0,0
Figure 3: Two examples of boundary cases. When computing the colour of a pixel, you cannot guarantee that 8 neighbouring pixels exist (total 9 pixels) as seen above. On the left, when the pixel at position (1,0) is considered, there are only six pixels to consider (not 9 pixels). For example, if one were computing the green component of the pixels here, the only pixels that should be included in computing the new colour will be at positions (0,0), (1,0), (2,0), (0,1), (1,1), (1,2), and when set it should be the sum of their green values divided by 9 − 3 = 6; this is because there are 3 non-existent pixels (0,-1), (1,-1), and (2,-1). Likewise, consider position (0,0). There are no pixels at positions (-1,-1), (0,-1), (1,-1), (-1,0), (-1,1) so there are only 9−5 = 4 pixels to consider in the computation of the new red, green, and blue values for the pixel at position (0,0).
Part 3 – A Little Bit of the Blue Tint, Checker, and Negate For this part, you will be required to create a filter that is as described below called checker, its function header is: def checker(myPicture): The function checker will take as input a picture called myPicture and returns a new picture that is filtered in a way described by the below high-level description of the algorithm. Like with previous parts, ensure you do not modify the original picture. Below is an example of the filter being applied to an image of the Canadian flag. Notice that the filter treats different quarters (top-left, top-right, bottom-left, bottom-right) of the picture differently.
Complete the following:
Implement the function checker as described, the description of the filtering process is given below.
6
High-Level Description of Algorithm
1. Duplicate myPicture, set this duplicate to be newPicture. 2. For posX = 0,1,2,...,getWidth(myPicture)−1: For posY = 0,1,2,...,getHeight(myPicture)−1: (a) Get the pixel at position (posX,posY) from newPicture. (b) Compute the luminance of the pixel using a basic averaging (like regular grayscale); if red, green, and blue are the colour components of the colour of pixel, then
luminance =
(red + green + blue) 3
.
(c) If the pixel is at an even position in the picture (i.e. posX and posY are even) then: • Set the colour of pixel to blue. (d) Else if pixel is in the upper-left quarter of the picture or pixel is in the bottom-right quarter of the picture then: • Set the colour of the pixel as per the following (where red, green, and blue are the corresponding colour components of pixel): – Red: 1.2∗luminance – Green: 1.2∗luminance – Blue: 1.2∗blue. (e) Else: • Set the colour of the pixel as per the following (where red, green, and blue are the corresponding colour components of pixel): – Red: 255−1.5∗luminance – Green: 255−1.5∗luminance – Blue: 255−1.5∗luminance. 3. Return newPicture.
Some Tips: • Let w and h be the width and height of a picture, respectively. Pixels in the upper-left quarter must satisfy the following relationship, given posX and posY: posX
7
Assignment Submission
As you work on your assignment, you will likely create test code in your program that opens a file, creates a picture from it, and shows or saves the picture. Do not include this test code in your submission. You will only be submitting code required for sepia,blur, and checker.
You will submit one Python file, with a file name as per the naming convention given in point (3) on Page 1. You can work on each part of the assignment in pieces, but you will ultimately be required to put all the code together in a single Python file. This Python file will only contain functions written or provided in Parts through 3. No other (test) code should be present, so that the TA can run their own function that uses your functions to check if they are functioning properly.
• Make sure you include your name, student id (the first part of your e-mail suffices), and state which assignment it is, the course, and the term. This type of documentation should be at the top of any Python files you submit this point forward in the course. • Above each part of the Python code add a Python comment indicating the start of that part’s code. Clearly label using comments the code associated with each part:
1. Part 1 should have at least one function: sepia. 2. Part 2 should have at least two functions: isOutsidePixels (provided to you) and blur.3. Part 3 should have at least one function: checker. • Use meaningful variable names, and document your code (write comments), see Page 1 for more details about this. • Submit your assignment on the Moodle website by the deadline