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.
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.
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.