I design for the process, the people.

Oh, Shoot!

Oh, Shoot!

Screen Shot 2018-02-18 at 5.20.27 PM.png

Code (Java)

Student in Object Orientated Programing Class

Duration of Project
1 Month, Spring 2017

In this class we learned Object Orientated Programing using the application, Processing. Our final project of the semester was to build anything that solves a problem.

I built an interactive visualization of how a common DSLR camera works. I thought of this idea when my friend bought a new Nikon D3300 but had no idea how to work the settings. 

I decided that I could build a program that allows users to adjust aperture, shutter speed, and ISO settings of pictures in different times of the day and see how each setting affects the picture outcome.


Brainstorming & Research

The first two questions I asked myself to get started:

1. How does a camera work?
2. How can users learn how camera settings (shutter speed, aperture, ISO speed) work together in a visual and interactive way?

I asked a total of 10 people who I knew owned DSLRs about their experience using their camera. I found that 8/10 of them actually never look up how to use their camera settings, and that most of the time they just put it on auto. The 2 others said that they learned how the settings worked simply out of curiosity and the eagerness to become better photographers, but it was a still a challenge to get it right.


Initial Design

I first thought was to create a camera that you can rotate around and click inside, however I realized this wouldn't exactly teach anyone anything.

I decided to implement sliders. Sliders were a perfect way to show how images can change as you move a setting such as aperture, ISO, or shutter speed up or down. 


Establishing Photo Settings

I decided that I was physically going to go outside and take the pictures on my own DSLR because I wanted the experience to be as realistic as possible. I chose a low, medium, and high setting for aperture, ISO, and shutter speed. There were 27 combinations I could do with those settings and 81 pictures in total in my program.


Picture Process & Outcome

I wanted to shoot in all those setting combinations for the daylight, sunset, and nighttime in order to allow the users to practice adjusting settings in different times of the day. In total, I needed to take 81 pictures.

Correctly Adjusted Daytime Picture

Correctly Adjusted Daytime Picture

Correctly Adjusted Sunset Picture

Correctly Adjusted Sunset Picture

Correctly Adjusted Nighttime Picture

Correctly Adjusted Nighttime Picture



My first "slider" control was this yellow rectangle. I quickly realized that it was difficult to make the slider interactive without any outside help. I did some research to see if I could incorporate any outside libraries into my code in order to develop interactive sliders and buttons.


Incorporating Outside Graphic Library (Java Swing GUI)

I researched and used an outside graphics library to help me implement working sliders and buttons that I could connect to my pictures in my code. I labeled each picture with the settings I took it in and put them in organized folders with my code file. My code then called out any picture with the same settings as reflected in the slider bar. With this, my project came to fruition. 

Final Project Demo

I began with an introduction to how aperture, ISO speed, and shutter speed work together to determine the exposure of a picture. I then talked more in depth about each of the settings. I wanted to make sure the user knew the basics of the settings before they played around with it themselves. Each picture was given to them at a totally wrong setting, and the goal was to have them adjust it accordingly to what they thought was the best setting to show the picture. Here's the final project!