Mine Project 3 – Part 2: Interactive Letter Images

For the keyboard project me and Lydia Odai originally went out and took pictures of images which resembled letters. I had been working on the idea of using a keyboard and was trying to work out how I could make the letters interactive in some way. I originally drew inspiration from an Alphabet Photography website (http://www.alphabetphotography.co.uk/) which was shown to us in a lecture. What I liked about this website was that there were a number of different selections for each letter and you could change the letter if you didn’t like the look of one of the images. This is what inspired me for my project and I originally wanted to do something where I could have different selections of letters and then be able to manipulate them or ‘call’ them at the press of a key.

This website was my original inspiration and lead to me formulating my idea around interactive type.

Screen shot 2014-03-26 at 16.15.44

After we presented our work in one of the seminars I noted that I might like to explore this idea of somehow using a keyboard and having numerous different versions of each letter and somehow making the user able to interact with the letters and change the selections. I was given some useful feedback and ideas which helped me in moving forward with the project. At this stage however I hadn’t yet formulated a solid idea and as I have limited experience with programming languages I wasn’t sure how to do certain things and I knew that it was going to take a lot of research and time to do something too complex. I eventually dropped the part of the idea where there would be more than one selection for each letter and focused on trying to make the letters responsive to a keypress. The reason for this was because I didn’t have enough letters to have replacements for each one. I also wasn’t sure how difficult it would have been to randomise each letter at the press of a key so that different ones showed up each time.

This eventually made me come up with the idea of making the letters appear on the screen after a key had been pressed. The reason why I wanted to do this was because I felt that although the letters by themselves looked nice I wanted them to be more recognisable. I wanted to try and find a way to make the images that resemble the letters be recognisable quicker. If there was an association to the letter by pressing a key first I felt that this would make a person already have the symbol of the letter visualised in their head before the letter appeared on the screen. To me this was a much more playful way to present the letters than just simply showing them in my blog or using them to spell out a word.

Due to my limited knowledge in Javascript I discussed the idea with a number of people as to how I would actually go about writing the code for this project. Because me and Lydia had worked together in taking the pictures for the project and previously in group projects on the course we decided to work together. Because Lydia had previous experiencing in programming I found that the task was made easier as I wasn’t trying to figure out how to do it alone. The first thing that we did was create the html and CSS for the project, this was a very simple task and all I had to do was format each image to same size in Adobe Photoshop and then put each image in a div in a html document. I then put all the divs inside another div named ‘letters’ so that there was a containing div for all of the images. What I did next was assign the z-index attribute to each div that contained the image in css so that each letter was displayed ‘under’ one another. This meant that when we went to write the code in javascript all the images would be in the same space on the webpage but just on top of each other, we would then have to specify which letter we would want to be shown depending on what key was pressed.

This is what the website looked like before any javascript was added, because the z image has the highest z index it is on the ‘top’ of the ‘stack’.

Screen shot 2014-03-26 at 19.02.14

Fundamentally what we did was make the image display as ‘block’ in css depending on what key was pressed and then change the image back to style.display=”none” when the key wasn’t being pressed. To do this we firstly had to add an event listener so that javascript was ‘listening’ for the onkeydown event. If there was no event listener then javascript wouldn’t know what it was looking for. After this, Lydia put all of the divs into an array with the variable ‘letterArr’. We then created a function that assigned a keycode to each div and would search the array for the correct number, for example if the keycode was 65 then the function would match that to the div called “a” in the array. By creating a variable which assigned the keycode to minus 65 of what it originally was we were able to tell javascript that the first element in the array was equal to keycode 65. Because all the keycodes are in alphabetical order this meant that the order of the array would match the letters starting from 0. To make the image disappear after the onkeydown event we used the setTimeout method to call an anonymous function which set the variable ‘letterArr’ back to ‘display:none;” in css after half a second.

This is what our project looked like before we added sound.

What we then did was add some notes to each letter, my idea was to assign a note of the alphabet song to each letter so that when they were pressed in the correct sequence they would play the song correctly, this introduced an aural element into the project as well as visual, and because it was a song that is familiar with the alphabet I considered that it might further help in associating the images to the letters. I created the notes on Garageband by playing the song and then ‘slicing’ each note and exporting each note as a separate mp3, what me and Lydia then did was used the audio tag in html to add the sound clips to each div that we had previously put the images in. Then all we needed to do was create another function that would call the sounds on the keydown event as well as display the image.

Here is the final version of the project with the audio added to the clips, the code still has problems, for example if two keys are pressed at the same time display=”none” doesn’t execute and the image stays on the screen. Though if you press the same key again then the image disappears. Although this is not a massive problem and could probably have been fixed quite easily if we had more time to work on the project.


This is the Javascript code, for the audio we added another array for the audio. and assigned a new id to each audio element in html. We then used document.getElementById to call the array of audio ids and then used the play() method to make the audio play on the onkeydown event.

Screen shot 2014-03-26 at 18.38.24

Although I understand what the code is doing in Javascript I would have found it hard to achieve making the code actually work if I was doing it by myself. Before this project I didn’t understand things such as event listeners and event handlers so this project has helped me to understand Javascript better which is one of the main reasons why I wanted to do this project in the first place. I found Libby easy to work with and although I’m not as familiar to programming languages as her she was very helpful in making me understand the processes that we went through to make the code work. I think me and Libby worked well together and this project is a good example of people combining ideas and knowledge to achieve a common goal.


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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