Feb. 11 - Feb. 13
In lecture this week, you learned about looping in JavaScript. On Wednesday, Wade presented an overview of the content you will be working with for both this lab and the MP: image filters.
To get started, first download the ZIP file for Lab 3 here.
Because this is a ZIP file, you must extract it in order to work on the files inside of the ZIP file. If you are unsure how to do this, you can refer back to the instructions as part of Lab 2.
Inside of the folder with the extracted file, open the myInstagram.html file using either Chrome or Firefox. (It may be necessary to right-click the file and choose "Open With".)
After getting the HTML open, you need to also open up the JavaScript file in a plain text editor. On a lab machine, Notepad++ is an ideal text editor for this class. To open Notepad++:
Finally, open up filters.js inside of Notepad++. You can either drop-and-drag the file from Windows to open it or use File->Open inside of Notepad++.
Throughout this lab and your MP, you will be using variables that are of SimpleImage data type. These variables are not Numbers or Strings, but instead are images that can be manipulated through methods that you can call on the variable.
If you have a variable img
of data type SimpleImage, it has the following properties and methods:
img.width
, contains the width of the image (a Number)
img.height
, contains the height of the image (a Number)
var pixel = img.getRGB(x, y)
, returns the color of the pixel, in RGB, as the location (x
, y
).
The returned object has three parameters:
pixel.r
, the red value of the pixel (a Number in the inclusive range 0-255)pixel.g
, the green value of the pixel (a Number in the inclusive range 0-255)pixel.b
, the blue value of the pixel (a Number in the inclusive range 0-255)img.setRGB(x, y, pixel)
, sets the value of the pixel at location (x
, y
).
The pixel
function parameter must be of the same type returned by the getRGB
function.
var pixel = img.getHSL(x, y)
, returns the color of the pixel, in HSL, as the location (x
, y
).
The returned object has three parameters:
pixel.h
, the hue of the pixel (a Number in the inclusive range 0-360)pixel.s
, the saturation percentage of the pixel (a Number in the inclusive range 0-1)pixel.l
, the luminosity percentage of the pixel (a Number in the inclusive range 0-1)img.setHSL(x, y, pixel)
, sets the value of the pixel at location (x
, y
).
The pixel
function parameter must be of the same type returned by the getHSL
function.
Grab an image from your photos, the Internet, or anywhere to use as part of this lab. Save it to your desktop or somewhere you can easily access. This photo should not be black and white as we will be playing with the hues of colors, so black and white photos don't really work.
In fliters.js, an empty function called filter_xray
has been defined for you.
To complete this function, you should create an X-Ray Filter. To do that, for every pixel:
pixel.r = 255 - pixel.r
.
Not sure how to loop through each pixel? The last few slides from Wednesday's lecture is a great source as well as the TA lecture notes.
In this part, we will explore the pixels by their HSL color. To "Illinify" an image, we will convert the image to be only hues of blue and orange, leaving the shading, saturation, and luminosity of each pixel the same.
First, go to http://hslpicker.com/ and find a good value for the hue of an Illini colored orange and blue (the top-most slider). Make sure to write down the hue values for both orange and blue.
Next, come up with an algorithm:
Write a new function that implements that algorithm:
filter_xray
function and rename it to filter_illinify
.getHSL
and setHSL
functions instead of the RGB functions
Finally, add your new filter to the list of filters. Find the filters
variable at the bottom of your filters.js
and copy and paste the line of code for the X-Ray filter. Update the fields to call your new filter (this includes updating both
the name
value and the func
value with the name of your new funciton.
While our second filter did a great job turning the images to shades of orange and blue, we want more orange and blue!
Copy the entirety of the function (make sure to rename the name of the variable that you are assigning the function as you cannot have the same variable twice) you used to complete Part 2 and add the following logic for every pixel:
Just like Part 2, add your new filter to the filters
variable at the bottom.
To submit your lab, you must submit your filters.js to the CS 105 website. You should submit ONLY .js file. You do not need to submit the other files in the folder. Click here to submit the lab!