Live prototype: https://archive-of-voices.glitch.me
Code: https://glitch.com/edit/#!/archive-of-voices
Background
The Archive of Voices is a passion project to build a database of plays and performance materials that highlight underrepresented voices in theater. Originally, it was simply a .csv document of Names of plays and playwrights. Then this document was updated and connected to Awesome Table to simulate a searchable system. Over the course of the semester, I have attempted to convert it into a searchable website. This current iteration extends my first Connections Lab project, particularly the features found under the “Rehearse” webpage.
Motivation
I wanted to add new opportunities for interactivity, and to create a tool with potential classroom learning usage. As a web experience, the AOV allows visitors to instantly see the plays in the library on a map showing where they originated and also the ability to easily find plays around topics of interest. For my final project, I wanted to integrate a live video/audio chat experience that could potentially be utilized as a Zoom alternative to rehearsing.
Context
The Archive of Voices was created as a response to the oversaturation of Cis/White/American stories and performance material used in theater education. While there are thousands of critically important works by minority creatives, it is a process to find, read, verify and widely distribute teachable materials about them all. Enter AOV. As a teaching tool at NYU Tisch Drama, it holds a library of peformances. In future iterations, there may be more precise information regarding each play, but for now, it offers an overview of verified contents of the featured plays in the archive.
The New chat feature is designed to connect a class or company of actors to rehearse together. While Zoom is already a great tool for this, Breakout rooms can be difficult and distracting to perform group readings, especially when teams or classes are performing AND critiquing. By utilizing this, a single class can potentially simultaneously engage in multiple scenes of two-character rehearsals.
Design and Development
Notes regarding initial project development
Considering the intention and goals, I began exploring a variety of Javascript libraries and ideas to create my resulting solution. I wish I had more time to really dig into React.js as it may have provided a great foundation to create this solution, but in the interest of time I focused on the following tools instead to construct my solution around:
- MapboxGL to provide a map api
- Mappa.js to create an overlay visualization of the data (using location and years of the performance
- P5.js to run the Mappa sketch
- D3.js to process the existing CSV file to load and display the searchable rows.
Notes about latest iteration
Using feedback from my first presentation, I spent more time on the overall appearance to optimize the experience of the index page. I continued to dive deeper into D3 in order to append and optimize the presentation of information, and to facilitate better use of CSS with D3. Overall, it felt like a multipage Website with some utility. Under the “Rehearse” tab, I used newly learned tools like:
- NeDB
- WebRTC
- jQuery
- Websocket.io
Key Challenges
The number one thing I must admit, this project is incomplete as of this writing. I found myself overwhelmed when attempting to implement two most critical features: 1 – When someone fills out the form and clicks “Submit”, the jQuery modal goes away, just like the “View all Rooms” 2 – When information is entered, the DOM’s title property becomes the name of the new room.
These look like fairly easy issues to fix but I kept getting errors when desiging the logic steps.
Errors and Discoveries
This project was fun extending and I feel its in a much better place visually. There were numerous issues with nedb integration and I’m still struggling with understanding how to best manipulate objects when moving between multiple app sheets. I’ve also read into D3 more and am excited about using it more in work, its still intimidating but its less frustrating than some of the other libraries we’ve explored this semester. My foundational understanding of JS has improved significantly and that fact excites me.
Recalling my conversation with Carrie Wang this summer, when prompted “What can we do with JS?”, her response was “Everything.” I agree.
Next Steps
I have mentioned this in the past, but absolutely plan to now – learn react and incorporate to create a simple page app! I would love to move this into a design and look that is more polished, professional and performant. I also think that, while the vision is there with the rehearsal feature, its quite limited right now. Gamifying performance rehearsals and practicing has always been an interst and I think that, if I’m able to incorporate webRTC with more visually interactive libraries like P5 would be awesome.