After having finished the Romeo & Juliet project there was still a big list of things I want to add and change. Starting with a complete rewrite in JavaScript to make it presentable via the web.

I used the p5 library as a substitute for Processing. This didn’t pose much of a problem since this library aims to use the same methods and general structure as Processing. Instead of a window it runs on a HTML canvas and void draw() is replaced by function draw().

To familiarise myself with this library I started working on little side project based on an idea I had about a year ago. It’s a timeline that reveals the moments during the course of a movie when its title is mentioned in dialog. This data is collected by analysing the .srt subtitle file of the particular movie. The structure of an .srt file is plain text with the subtitle index, plus the timecodes of when the text appears and disappears, followed by the text itself and an empty newline.



Using some regular expressions I managed to extract and parse the data into something displayable on canvas. Using the p5 DOM library I also learned a lot about making the canvas interact with HTML elements. This way I managed to change the search query, switch movies or upload a custom SRT. You can check out the prototype for yourself here.



At first I was a bit resistant to having to go back to JavaScript now I’m just starting to get really into Java. But then again, Java web applets have been dead for many years now and Java desktop applications aren’t as popular as they used to be. JavaScript is clearly the future, even though it isn’t as strict and orderly as “native” languages as Java or C#. Turns out that JavaScript can actually be quite elegant language. Its arrays can do basically all the things Java’s ArrayLists can do, including pushing items on the end with .push() instead of .add(). And the Underscore library basically replaces most of the things I used the java.util.Collections, java.util.LinkedHashMap and java.util.LinkedHashMap for. I don’t know about you, but I think characterList = _.uniq(characterAppearances) is a lot nicer syntax than characterList = new ArrayList<String>(new HashSet<String>(characterAppearances));.



Whilst the porting proces it became clear that a lot of restructuring was needed. I had to get rid of redundant loops, hardcoded colour values and calculate geometry before instead of during the draw loop. Doing this made it possible to properly animate each path separately, something that was lacking from the original.



Something else that was missing from the original was any relation with the dialog of the characters. After a long back and forth I managed to scale the length of vector arrays with that of the dialog. A dot is added on the character’s line each time he/she speaks.

