JavaScript Exercises

The goal of today's lab is to understand the basic syntax and semantics of JavaScript and how to apply interactivity to a web page.

For this problem, instead of focusing on the static content (HTML and CSS), you will use JavaScript to computationally change images that are uploaded to the page. This means you will not need to edit the HTML or CSS files for this lab, but you will need to understand their contents to attach your JavaScript code to the events that can be generated.

Implement the green screen (also known as "chromakey") algorithm typically used in movies or news weather broadcasts to make the characters appear to be in a different location than they really are. It works by compositing a foreground image with a background image by replacing all the "green" pixels in the foreground image with the corresponding pixel from the background image. Green is the easiest color to match but you need to be a little forgiving in the amount of green you require since any real set has shadows or highlights so it is not a uniform shade of green. Of course, if you are too permissive, then you might match parts of the characters outfits making it appear like they are see through! Your version should let the user dynamically set the amount of green to look for.

The starting repository has some example images to start with but you can, of course, use your own images as well. You can even buy your own green screen so you can create your own green screen studio!

You are encouraged to explore JavaScript, and its effect on a page, using the Developer Tools and especially the JavaScript Console.

Getting Started

The basic files and site structure are already set up for you on GitHub. Start by accepting the lab repository to create your own version (you can find the link using the Resources tab on Piazza). If you are working with a partner, choose one person to do this and make sure that both people's NetIDs are in the comment at the top of the JavaScript file to ensure both people get credit for doing the lab.

To get started, look at the provided solarize.html example using the Developer Tools to add console.log() statements or by using the debugger to stop the page and step through the code.

Submission

At the end of class, push your changes to the JavaScript file to the lab-javascript-GIT_SCREEN_NAME repository on GitHub to submit your work. If you worked in a pair, make sure both people's NetIDs are in the comment at the top of the greenscreen.js file.