Introduction

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.

Download, Extracting, and Opening the Lab

Downloading the Lab

To get started, first download the ZIP file for Lab 3 here.

Extracting the Lab

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.

Opening the Lab

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".)

• If you see an orange bar span across the top of the screen, you extracted the file correctly! Awesome!
• If you only see a white background with no orange bar, you did not extract the file. Try carefully repeating the steps for extracting the lab.

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++:

1. Open the Start Menu on the lab computer
2. Choose All Programs
3. Choose Word Processing
4. Choose 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++.

Completing the Lab

SimpleImage API

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.

Part 1: Find an Image

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.

Part 1: Creating an X-Ray Filter

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:

• Take the pixel's red value and invert it. Inverting it can be done by taking pixel.r = 255 - pixel.r.
• Take the pixel's green value and invert it.
• Take the pixel's blue value and invert it.

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.

Part 2: Illinify an Image

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:

• What all hue values do you want to convert to orange?
• What all hue values do you want to convert to blue?
• Hint: Maybe take the average of the orange and blue values, everything above/below that average is converted to the appropriate color?

Write a new function that implements that algorithm:

• Copy the filter_xray function and rename it to filter_illinify.
• Write the code the code to update the hue of the pixel based on the value of the pixel
• Remember: you will want to use the 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.

Part 3: Illinify an Image Even More!

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:

• If the saturation of the pixel is greater than or equal to 0.5, make the saturation 1.0.
• If the saturation of the pixel is less than 0.5, add 0.5 to the saturation.

Just like Part 2, add your new filter to the filters variable at the bottom.

Submission

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!