Computer Science I: Media Computation

Extend our PageGenerator class to generate a web page of your personal design. Your generator must add at least two new features to the page. Here are some possible features you might add:

• Read a headline from a favorite news site, such as Reddit, Sports Illustrated, or ABC, and display it on your page. Use the same sort of "scavenger hunt" as I did to locate the day's cartoon on the FoxTrot home page.
• Display a list or table of all the sound files in a directory, as links that the user can follow to play the sound. (You can use a standard <A HREF=""></A> tag for the link.)
• Add thumbnails of all or some subset of the images in a given directory, with links to the full image.

If you have ideas of other features that you would like to add, just ask!!

Additionally, you may also modify the existing methods of the generator to rearrange the page, change its presentation, etc. (Such changes won't count toward your assigned quota of two unless they are substantial and I approve them as such in advance.)

This assignment is worth 20 points.

Extra Credit Opportunities

Add more than two new features... (2 points)

Any other ideas?

Deliverables

By the 4:00 PM on Saturday, December 9, submit a zip file of a directory that contains these files:

• PageGenerator.java
• two different web pages generated by your program, from two different days
• a short write-up of your additions to the generator

following the submission instructions for the course.

For this assignment, you do not need to submit a printout. We will grade from the electronic submission alone.

Write a class named GraphicsInterpreter that reads a sequence of graphics commands from a text file. The class should have a method named interpret that

• takes a filename as input,
• reads the commands contained in the file, and
• returns a Picture on which the commands have been executed.

The method should create a blank 640x480 picture on which to drwa.

There are at least three kinds of commands:

• line x1 y1 x2 y2
  

  The line command draws a straight line. For example, "line 10 20 300 400" draws a line from (10, 20) to (300, 400).

• circle x y d
  

  The circle command draws, yes, a circle. For example, "circle 100 200 50" draws a circle whose center point is (100, 200) and whose radius is 50.

• a command of your own design! It can draw a figure, write, text, ....

This assignment is worth 20 points.

You can use this main method for your class:

     public static void main( String[] args )
     {
       GraphicsInterpreter artist = new GraphicsInterpreter();
       String filename = FileChooser.getMediaPath( "commands.txt" );
       Picture p = artist.interpret( filename );
       p.show();
     }

Extra Credit Opportunities

Make it so that we can initialize a GraphicsInterpreter with a particular picture. If the object is created with a picture, then it draws on the given picture. If not, it uses a blank canvas. (1 point)

Create a commands.txt file that produces a picture that does something useful. For example, I could imagine a sequence of commands that create a poster to advertise a meeting. (1 point)

Deliverables

By the 4:00 PM on Friday, December 1, submit a zip file of a directory that contains these files:

• GraphicsInterpreter.java
• two different files that test your class, one named commands.txt
• a Picture created by your program from commands.txt

following the submission instructions for the course.

For this assignment, you need to submit only one printout -- GraphicsInterpreter.java.

Quick Overview

Your task this week is to write your first new class, one that represents simple slideshow objects. A slideshow consists of a collection of pictures to display and a collection of sounds to play. In the simplest form of slideshow, your program will play one sound file for each picture it displays.

Details, Details

• Create a class named Slideshow and save it to a file named Slideshow.java.
• A Slideshow keeps track of an array of Pictures and an array of Sounds. The class should have a constructor that lets users pass two arrays when creating a new Slideshow object.
• Slideshow should have a method named show() that plays the slideshow. It should display each picture in its array, one at a time.
• While a picture is showing, your object should play the corresponding sound file. In order to stop your program from proceeding while the sound is playing, be sure to use the blockingPlay() method of the Sound.
• To display the pictures, start with an empty "canvas", a blank picture into which you can copy each of the images. After copying the image to display onto the canvase, ask the canvas to repaint.
• You could use a large canvas, so that it is big enough to hold all of the images. If you do this, you could copy each pisture into the upper lefthand corner of the canvas or (better!) into the center of the canvas.
• Alternatively, you could use a canvas of some convenient fixed size, say, a square of 800x800 or a rectangle of 640x480. If you do this, you should scale the picture to be displayed, making it either larger or smaller. To do this, you can use the scaling code from class or textbook.
• Your class should have a main() method that creates a slideshow and shows it.
• Use helper methods whereever you think appropriate to make your code easier to write, read, or understand.
• Your function must retrieve the image files it uses from the directory specified by the media path. To do this you must use getMediaPath(). You must not use setMediaPath() or pickAFile() in your solution.
• Your Slideshow.show() will use the show() and repaint() methods from the Picture class.

How We Will Grade Your Assignment

This assignment is worth 20 points.

We will...

1. ... retrieve your submission from the submission system.
2. ... put your Slideshow, Picture, and Sound classes into the bookClasses directory and all of your images and sounds into another folder.
3. ... set the media path to the folder containing your images, using setMediaPath().
4. ... open your Slideshow class in Dr. Java and compile it.
5. ... execute your Slideshow class's main() method.
6. ... watch your demonstration slideshow.
7. ... use your Slideshow class to create and show a slideshow using our own images and sounds.

Extra Credit Opportunities

None yet. But I will appreciate demonstration slideshows that tell a nice story!

I am also inclined to consider extra credit for a slideshow that offers a second way to display a slideshow, where each sound is accompanied by multiple pictures, say, four pictures shown during a longer sound clip. A simple version of this would have n > 1 pictures for each sound, and each picture is shown for sound.length/n samples. If you want to give this a try, contact me!

Deliverables

By the 8:00 AM on Thursday, November 16, submit these files:

• Slideshow.java
• Picture.java
• Sound.java
• all of the images and sounds you use to in your demo slideshow

following the submission instructions for the course.

For this assignment, you need to submit only one printout -- Slideshow.java. You do not need to submit printouts of Picture.java or Sound.java (or of your images and sounds) -- but you must submit them all electronically.

You must submit your Picture and Sound classes, even if they don't contain any methods other than the original versions from your CD. This way, we don't have to worry about problems with different versions of those classes.

This assignment consists of two tasks. Put both methods in the same Sound class, along with any helper methods you create.

Task 1

In Program 74, Guzdial and Ericson splice the word "united" from later in the preamble to the Constitution into the earlier phrase "We the united people...". Let's emphasize that word by making it maximally loud for the sound file.

Modify the method to normalize the spliced-in "united" in "We the united people...".

Task 2

Compose a sentence that I never said using the sound clip of The Voice of CS I. That sound file has a lot of empty space and white noise in it, so there is plenty of room for you to rearrange words around, splice words in, and otherwise "doctor" the audio.

Write a method named doctorTheVoice() that loads that sound file using getMediaPath(), modifies it, and returns the modified sound as its result. Make at least three different changes to the sound. You may use words from the mediasources folder, the clipped but high-pitched version of my voice, or even words you record on your own. But the bulk of the result should be my words.

Be sure to include a pause between words so that we can hear them distinctly. (I suppose that running a couple of words together could for an interesting effect, so I'll give leeway where the sound is interesting!) 1/10 of a second is usually a reasonable pause. Recall that sample values of 0 generate silence.

For example, I applied....

How We Will Grade Your Assignment

This assignment is worth 20 points.

We will...

1. ... retrieve your submission from the submission system.
2. ... put your Sound class into the bookClasses directory and all of your sound files into another folder.
3. ... set the media path to the folder containing your images, using setMediaPath().
4. ... open your Sound class in Dr. Java.
5. ... execute these commands from the Interactions pane.

    String silence = FileChooser.getMediaPath( "sec3silence.wav" );
    Sound  target  = new Sound( silence );
    target.splicePreamble();
    target.play();

    Sound theDoctorsVoice = silence.doctorTheVoice();
    theDoctorsVoice.play();

6. ... listen to your sounds.
7. ... look at your sounds using the explorer.

Deliverables

By the 8:00 AM on Tuesday, October 31, submit these files:

• Sound.java
• any sounds you use to doctor my voice file
• the new sound file you created using splicePreamble().
• the new sound file you created using doctorTheVoice().

following the submission instructions for the course. You do not have to submit printouts of your sounds. :-)

Quick Overview

Your task this week is to write a method that creates a comic strip using pictures of your choosing. The strip must have at least four frames in it. Here is a sample, a two-frame comic strip from the authors of our textbook.

After deciding on images and a theme, you will want to plan ahead a bit, to design the layout of your comic strip. Here is an example of the planning that the authors did while creating their sample strip.

Details, Details

• Download and use the file ComicStrip.java for your assignment. Your job is to "fill in the blank" in the method named createStrip().
• Your createStrip() method should take NO arguments as input.
• You may make the strip as big as you would like, but try to keep it as small as possible in to eliminate excess white space in the background.
• Your comic strip must consist of at least four frames. You may lay them out as 4 in a row horizontally, or 2x2 in a square, or 3x3 -- however you. wish. The frames must be separated with lines.
• The strip must consist of at least two characters, whose images are taken from one or more files.
• At least one frame must have a caption, something that someone is "saying".
• At least one character must appear in two or more frames.
• The character that appears in two or more frames must be modified in some way in one of those frames:
• cropping the image (for example, showing just the eyes after showing the face)
• resizing the image
• rotating or mirroring
• manpulating the color values
• etc...
• You must write at least two helper methods that are called by "createStrip() to do its job. For example, you might have a method that copies an image to a location specified by (x,y) arguments, or you might have different methods for the various modifications you make to the characters' images.
• Your function must retrieve the image files it uses from the directory specified by the media path. To do this you must use getMediaPath(). You must not use setMediaPath() or pickAFile() in your solution.
• Do not use show() or repaint() inside your method. (If you want to do so while your are coding, fine, but be sure to remove those lines before you submit your program.)
• After you are done, use write( filename ) in the Dr. Java Interactions pane to save your comic strip as an image file. (Your createStrip() method must not use write( filename ).)

How We Will Grade Your Assignment

This assignment is worth 30 points.

We will...

1. ... retrieve your submission from the submission system.
2. ... put your ComicStrip class into the bookClasses directory and all of your images into another folder.
3. ... set the media path to the folder containing your images, using setMediaPath().
4. ... open your ComicStrip class in Dr. Java.
5. ... execute these commands from the Interactions pane, using the width and height specified in your class's header comment.

    ComicStrip comic = new ComicStrip( width, height );
    comic.createStrip();
    comic.show();

6. ... look at your picture.

Extra Credit Opportunities

If your comic strip makes sense -- that is, isn't just a bunch of pictures thrown together, but actually "tells a story" -- then you will eligible for two (2) extra-credit points.

If your comic strip uses a background picture from some image file in at least one of the frames, then you will be eligible for four (4) extra-credit points.

Deliverables

By the 8:00 AM on Tuesday, October 17, submit these files:

• ComicStrip.java
• all of the images you use to build your comic strip
• Picture.java, if you use one in your solution
• the comic strip that you created

following the submission instructions for the course. Note that you do not have to submit printouts of your images, but you must submit them electronically. Note that you must submit your program both electronically and as a print-out -- of the whole file!

This assignment consists of two tasks.

Task 1

Add a lakeEffect() method to the Picture class that takes no arguments. lakeEffect() makes a new Picture that is twice as tall as the original. Into the top half of this new picture it copies the original. Into the bottom half it mirrors the original, but with a twist... Each pixel is mirrored by the average of its left and right neighbors.

Pixel (x,y) will be mirrored by a pixel whose color is an average of pixels (x-1,y) and (x+1,y). Pixels on the end -- pixels (0,y) and (width-1,y) -- have only one neighbor, so they are mirrored by a pixel whose color is an average of pixel (x,y) and its one neigbor.

For example, I applied the lakeEffect() method to the sundial image used above and received this resultant image.

Apply your lakeEffect() method to an image or two of your choosing. Cool effects are appreciated!

Task 2

Add a fogEffect() method to the Picture class that takes one argument, an int named threshold that indicates a level of light. threshold must be in the range 0..255, inclusive. fogEffect() turns all pixels lighter than threshold to grayscale, to simulate fog.

For example, I applied a fogEffect(150) filter to the mediasources' beach image and received this resultant image. When I applied fogEffect(125) filter to the mediasources' church image, I received this image.

Apply your fogEffect() method to an image or two of your choosing. Do you notice anything about what images your method works best on?

Deliverables

Submit one Picture.java file containing your two new methods, plus whatever "helper" methods you create..

By the 8:00 AM on Tuesday, October 3, submit these files:

• Picture.java
• your various images from Task 1, both originals and creations

following the submission instructions for the course. You do not have to submit printouts of your images.

NOTE: The assignment is now complete. I decided to assign just one method to write, which cuts the assignment roughly in half. As a result, let's return to the originally-planned due date, Tuesday, September 26.

This assignment consists of a single task.

Add an embedImage() method to the Picture class, which takes four arguments:

• a Picture that is a source image
• an int that is an x-coordinate
• an int that is an y-coordinate
• an int that is the width of a square

embedImage() copies a square of that width from the source image, beginning at (x,y), into the lower righthand corner of the receiving image. It also draws a black border around the inset image that is three pixels wide. For example, I embedded a 185x185 region beginning at (70,15) from this image of a sundial into the mediasources' butterfly2 image and produced this resultant image.

Deliverables

By the 8:00 AM on Tuesday, September 26, submit these files:

• Picture.java
• two original images of your choosing
• an image produced by your method embedding one of the originals inside the other

following the submission instructions for the course.

You do not have to submit printouts of your images.

Some of you completed Homework 1 but had some trouble submitting your files.

Others of you had trouble completing part of the assignment and would benefit from some extra time to work on your loops.

So: Here is a second chance. You may submit files again, or make changes and additions to your files and submit.

By the 8:00 AM on Thursday, September 14, you may submit -- or re-submit -- any of these files:

• grayscale-experiment.txt
• Picture.java
• your various images from Task 1

Be sure to follow the homework submission instructions for the course! Because we do not have a regular class on Thursday, you may submit printouts of your grayscale-experiment.txt and Picture.java files in one of two ways:

• Deliver them to my office anytime before 12:30 PM on Thursday. (Louise will take them and place them in my mailbox.)
• Take them to class at the regular on Thursday and give them to Prof. Schafer. (He will be there for the optional Q-n-A session on Homework 1, Dr. Java, etc.)

I'll be available between now and Thursday at 8:30 AM or so, so please ask any questions you may have -- I'll do my best to help.

This assignment consists of two tasks.

Task 1

Use any color image of your choosing. You may select from the images in the textbook's mediasources/ folder, the images I've used in class, or an image you obtain from somewhere else. In any case, document the source of your image.

Create several different grayscale versions of your image, by experimenting with the intensity value you set each pixel to. One way to come up with some interesting combinations is to weight the red, green, and blue components of a pixel differently when creating the intensity value.

Write up a short description of your experiments in a text file (not a Word document!) named "grayscale-experiment.txt". Be sure to say which of the grayscale versions of your image seems to be the most faithful to the original -- and why you think that version looks better than the others.

Submit your "grayscale-experiment.txt" file and all of your images.

Task 2

Add a method to the Picture class that draws a black border around the inside of the image. For example,

Then write a method that adds some flourish of your own choosing to this idea, say, a different color for the border, or a thicker border. Remember -- this method should work for any picture!

Submit your modified "Picture.java" file.

Deliverables

By the 8:00 AM on Tuesday, September 12, submit these files:

• grayscale-experiment.txt
• Picture.java
• your various images from Task 1

following the submission instructions for the course. You do not have to submit printouts of your images.