Image-9 Exercises

< CS101

To play around with the bluescreen code, we'll use a few more images, including these:

paris.jpg -- incomparable Eiffel tower in Paris

yosemite.jpg -- Half Dome in Yosemite California, an amazing place to visit

redwood.jpg -- Redwood tree. Redwood trees are typical of the northern California coast where Stanford is located. (This tree is actually in Nick's front yard)

1.

Here is the striped-fish-green.jpg image:

Write bluescreen code to place this fish in front of the yosemite.jpg background. The fish has bits of blue on it, but that's ok since we're using a green background in this case. Adjust the code so that all of the green towel below the fish disappears. Little flecks of white will appear in the blue middle section of the fish; we're stuck with those with our current technique.

2.

For this problem, we'll accomplish a sort of artistic effect, working with the redwood.jpg image:

And the pebbles.jpg image:

Write bluescreen code to modify the redwood.jpg image, replacing the trunk and some of the branches of the tree with pixels from pebbles.jpg. The result is a sort of fanciful looking stone-tree image. Adjust the code so that the pebbles are on the trunk and some of the branches; don't put pebbles all over the bottom of the image.

3.

For this problem we'll edit the fence-ivy.jpg image

And the old leaves.jpg

Write code to detect the non-ivy parts of the fence-ivy image by detecting pixels with a low green value. (You could look for high-red values, but low-green works better in this case).

Bluescreen the non-ivy parts of the fence-ivy image to be pixels from the leaves.jpg image. None of the red fence should be left showing. The result should show the small leaves in back with the large ivy leaves in front of them.

4.

This problem is titled "Fish Dreams of Paris". This problem will use paris.jpg:

And striped-fish-blue.jpg:

Here the striped fish is facing right in front of a blue background. Parts of the fish itself are blue -- the eye and the vertical stripe in the middle. For this problem, we'll let the background image replace those two blue areas as well.

Write bluescreen code to place striped-fish-blue.jpg in front of paris.jpg. In particular, adjust the code so that the blue background, the blue middle stripe, and blue eye of the fish all show the paris.jpg pixels. Adjust the code so the blue towel background below the fish is almost completely replaced.

5.

For this problem, you'll do blend, not a bluescreen. Write code to blend the fish of striped-fish-green.jpg into the stanford.jpg image. The background of striped-fish-green.jpg is green:

The result should look mostly like the stanford.jpg image, but with a fish hovering in the middle. Adjust the factor so the fish but not its green background is in the result. Divide the fish pixels by 2.

Each click of a Run button saves that code on the computer running the browser. The button below retrieves the all code exercises listed to the right of the button.

count 5 : image-9-ex1 image-9-ex2 image-9-ex3 image-9-ex4 image-9-ex5

(code appears here)