Animation Project: Interactive Picture Keyboard Website


Following on from the photography assignment, Luke Monet decided to continue developing the project and asked me to collaborate with him. The idea is an interactive website where the user would press a keyboard key and a photograph corresponding to that letter would appear on the site. Luke worked on the design and idea of the website and I helped him with the code to make it work.

As I had not coded a program like this before I started by creating a flow chart to help visualise how the program would work:

First step: User presses key

Second step: Key code pressed is logged

Third step: Key code is linked to photograph

Fourth step: Photograph is displayed

As each keyboard key relates to a keycode this can be used by the computer to relate to another event. However first the script must have an event listener to check when a key is pressed. I also added all the photographs into an array to store them. The photographs are hiden initally in css (display: none;) and arranged on top of one another using z-indexing. The function alphabet then listens for the window event. If it finds one it takes the key code  (luckily key codes are in alphabetical order or this method wouldnt work, I was being lazy and I should have used a more transferrable method to do this) and minuses 65 to get the array number of the photograph of the letter of the pressed key. It then changes the css display to block to show the letter. I realised after this there needed to be a timeout to this function to allow other letters to be pressed afterwards. I added one set to 500 which makes the photograph display for half a second.

Here is the code I came up with:


And here’s a link to the website:

There are a few bugs with the program, such as only the “top” letter being shown when two keys are pressed at the same time and the bottom one “sticking” and not disappearing till pressed again. I am not quite sure what causes this bug however I am pretty certain that the problem can’t be fully fixed without changing the method that the letters are hidden and displayed using css styles.

The next idea we would like to try is extending the typing feature to allow more letters to be shown, allowing sentences to be written. However the code for this would be completely different to the one above and the layout could be quite complicated, especially if the typing were to be done in real time and not direct the user to another page for the outcome. I can predict it would probably need to store the photographs a library of sorts and a grid system would have to be used to “put” the photographs onto space on the website whilst the user is typing, however I would need to do a lot of research and development before I could sucessfully realize this idea. Although the time scale of this project is probably too short to fully develop this, I would like to try this idea to furthern my programming skills and might work on it over the Easter break.

Another idea we had, which can be done on a much smaller timeframe is adding a sound that would be played each time a key is pressed. As this would probably only add a line or two of code to the one above, this should be quite easy to add in.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s