http://104.236.52.219:3000/final_networked_media/Marblehead_screenplay_viz_demo.html
This is a demo of a screenplay visualization program for the web. The idea is to provide writers, readers, studio executives, producers, talent and other crew the ability to quickly scan an entire screenplay to visually get a feel for tone or to assess how much of an element or talent a particular story involves.
I feel strongly about this coming from the film industry. Screenwriters rarely get the chance to see an entire screenplay come to visual fruition. This is a valuable tool for directors and producers looking for a script to option with limited time and attention span.
Currently it is front-end/client-side only but ideally it will be expanded to server-side. In the next iteration FinalDraft native XML files can be used to neatly reformat for HTML/CSS with JQuery JSON or XML parsing.
This was my first foray into using JQuery with CSS and HTML. I avoided using p5.js because it seemed like treading old ground. I struggled with the selector logic & syntax - do I use (this) or ('*') or the '#div id tag'? I had difficulty with the CSS style placement but eventually figured it out with help. Another issue I ran into was using a span class to get screenplay character names for their own hover function. This caused formatting issues. I ended up using (body) in my hover() methods. Another nice CSS discovery was the background-size:cover argument which made sizing my differntly sized images a snap.