From CS 294-10 Visualization Sp10

Jump to: navigation, search



Being a photographer myself, I have a lot of photographs. However, I feel that sometimes the best way to view my collection of photographs and to select representative photographs for my portfolio is tedious and troublesome. I want to create a visualization that allows the photographer to find the best and most suitable image interactively by defining certain criteria that he is interested in. This tool will also allow the photographer to analyze his photographs, providing an statistical overview to his images and his style.


The user will be able to select (or design eventually) features that the images will be projected onto. The collection of images will be displayed in a 2-D space (maybe 3-D in the future) as points. As the user hovers over the points, the images are displayed. He will have sliders to control the range of axis displayed. He should be able to select and view images that have ratings within a certain range as well. I wish to also implement a function that allows the user to pick an image and find other images that are also similar to it based on some feature set.

Story Board

This is just a rough sketch File:Story1.jpg


I will use OpenGL to create this visualization. The UI might be a bit tough, but I will see what I can do.



In this visualization, users can load their own photographs into the respective folders for different ratings. ( I have yet to figure out how to embed and read ratings in the metadata. ) Once the visualization loads, the user can see their photographs displayed in a 2D space based on several features of the photograph. Currently, the features supported are: Aperture, Focal Length, Luminance Value, Hue and Saturation. More sophisticated features can be supported. File:sample1.jpg

Right now, the user can have a broad overview on the statistics of his photographs. He can see which are the most frequently used focal range/aperture and make a decision on the next lens he is going to purchase. He can also find trends in his preference for photograph as he explores the photograph rating filter system. One might discover that the images he tends to prefer are those that have high saturation.

The visualization also allows the user to zoom in and view thumbnails, allowing him to see the relationship between photographs for those that have similar feature values. Panning is also supported for exploring the feature space. File:sample2.jpg

Changes from story board

Although the idea did not evolve drastically, the way it was implemented did. In the story board, the selection for feature range was designed as a slider, allowing the user to choose the values that he wishes to see. However, I felt that since most of the values are not tangible ( saturation, hue, luminance values), there is less intuition on how the values are mapped to the images. A zoom feature on the other hand, allows the user to interact with the data, selecting groups of photographs that are of interest to him. In this way, the user controls the axis implicitly, which I believe is more user friendly.

The rating selection system also evolved, allowing the user to select disjoint sets of ratings instead of a range.

I wanted the images to be displayed as the user hovers over the point in a larger panel with more information. Turns out that this is not trivial to program. I might do this the next time.

Code + images + exe


This was tested in Windows XP 32 bit on a MacBook Pro. For best results run the full screen version ( 1440x900 ).


This took a long time to complete. A good estimate would probably be 48 hrs as I had to write the program from scratch. A significant amount of the time was spent extracting the data, jpgs + metadata. Most of time was spend getting the framework for zooming and panning with animation and displaying images in OpenGL including mouse interactions.

There is still a lot of room for improvement. For example, color coding of the Hue at the axis. Also, I would need to find a way to resolve conflicts as there might be many images that are mapped to the same point, or close to the same point. Overlapping images are not ideal.

[add comment]
Personal tools