The idea behind this final project was to create media with Java script that could be used by or for audience members in a media based improvisation show. Part of the problem with introducing new media to a new audience is that if the technology is clunky in anyway you will quickly lose the audiences focus. They will be polite but will kindly tell others it was not their up of tea and never return. The goal for these programs, therefore was to make them as simple and straightforward as possible. Another aspect of this design is to make the media integral to the improv. game itself. The media designed for a show like this should not be simple ornamentation but necessary to the storytelling process. All of the original ideas for this project were taken from java script that was written by Wes Bos on his site: https://javascript30.com/. From there I altered indexes, style.css pages and scripts.js pages in order to make the program suit my needs.
1. Kevin McCalister Orders a Pizza
This program started as a drum kit program pictured here.
As soon as I played with it a bit the idea came pretty quickly to create a movie clip sampler that would play the famous movie quotes of my choosing. The area that I spent the most time with here was the method for archiving and retrieving the media clips, as well as creating an alternate style.css page that could be used as a template for the rest of the html programs. The following is a screen shot from the final product.
There was one more feature that I didn’t accomplish and just ran out of time to get done. The television seen above, should have the mp4 clip from the movie quote playing at the same time the audio runs. The indexing and retrieval of the mp4’s is what gave me the most trouble. I was able to get individual clips to play in the spot where I wanted them, but struck the idea when I couldn’t play each selection. The audio, however, would be enough to pull off the improv. sketch.
2. Picture This!
This app was one of the most straightforward to applying to using as an audience participatory technology. It is a simple drawing program that had a few cute features. Some of these needed to be toned down actually to turn this into a drawing based program. Below is a screen shot of what the original drawings looked like with the original script.
The first feature that I toned down was the thickness of the lines. Bos wrote a script that made the line vary in thickness from a variable between 1 & 100 in the following “if” statement: if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1). In order to make out a more precise line for drawing I changed the # 1oo to 30.
It still left this feel of a had drawn/painted line. The second feature I changed was making sure the line always started with a dark stroke then blended into a color that would keep cycling through the color spectrum yet at a slower rate.
I do like the final product because is still captures colorful change but keeps the drawing a bit more precise so more intricate illustrations can be made. Finally, I also inserted the text at the top using an additional style sheet. I am aware this was not completely necessary but I knew I’d want to come back later and make other stylistic changes to this program.
3. Dance Like Kevin Bacon
The main functions of the video player here were left in tact. But I had the desire to make the design a bit more kitsch in its 80’s nostalgia, foreshadowing the comedy of the improv. scene. Below are the original and the final product side by side.
Obviously the signature yellow text was created for a headline. Also, below the controls is a list of descriptive text about what each control does (i.e. play, volume, speed, skip back and forward). Finally the background was changed to show one of Mr. Bacon’s most iconic moments.
4. Real Time FX
Of all my programs this is the loosest toy for improv. companies to play with. There is nothing to show for the original picture because the script simply left options open to change. I created 4 different filters for the video feed which are listed below.
The program does also allow for the user to take a snapshot of the screen whenever they choose. The following is a shot taken by the “take photo” button.
I think this application base has the most potential for use in a variety of improv. scenes. Any time there is a need for environmental changes, new characters and other diegetic media sources within the scene this would make a great delivery device. Right now the only way to use the different effects is to load the individual index page for that effect. Before using it in a show I would like to create a simple interface to change all of the effects.
Another annoying aspect of this program which would need to be remedied before use in performance is the permissions needed to use the computer’s camera. Currently, I do all my work on a downloaded version of the app as opposed to the online version because of this permission issue. This is why, on my webpage for this project, I give the user the option to download the entire script package for both this and the next work.
5. Real Time Subtitles
When I first ran across this app I didn’t think of its possible use for theatre so I passed it by for another program. When my creativity felt like it was drying up I went back to this program and realized it could be used to create a real time sub-titler. The original app is shown below.
There would need to be a few changes made in order for this to work as a real time subtitler in theatre. I first removed the yellow background and shifted the text to the bottom of the page. This was to mimic the way subtitles are used in movies at the bottom of the screen but it could easily be put above the actors head’s in the future as well. One important aspect I needed to change was the lines that would remain on the page as more talking occurs. When watching anything with subtitles the standard is one or two characters lines, at the most, are put up at one time, then deleted. I made it so every pause in speaking results in an erasing of the previous line. Also, just for fun, I saw to it that saying “happy, joy, or smile” would result in a “😀 ” emoji. This way I could learn to insert any text item when certain words are spoken.
Overall, I did learn that the speech recognition plugins do work pretty well for standard, everyday speech, but if you throw some Shakespeare at it, watch out. Also, in the future I would like to attach a sound pressure level (spl, the technical and more accurate term for volume), so that words under a certain threshold would be italicized (as a whisper) and others would be in bold (as in yelling).
