Carolyn Baum

Interactive Multimedia


Photo Puzzle
Watch the changing montage and when you see a match, click on the montage to reveal the whole image. After the image is revealed, you can click on the image again to have the montage continue.

This idea stemmed from the montage demo and one of Stuart's projects on his website. Joseph helped me with the game and I borrowed a small portion of his code that uses an Array to select images from a text document with the image names on it so that I didn't have to enter each image name in the code. This allows me to add as many photos as I want without having to alter the code. There are three classes: a DocClass, an ImageSlice class, and a Mask class. I used a mask to create the slices instead of slicing the images in photoshop and bringing them into the code. I learned a neat trick called a Conditional Operator that is like an if/else statement but with less code and it uses a question mark and a colon instead of "if" and "else." Functions were added to check for pairs. If no pairs are found, the montage continues. When pairs are found and there is a mouse click, the whole image is revealed by removing the event listener, resetting it, and adding the original event listener back in so that you can get back to the regular montage with another mouse click.