Yesterday, I loaded up an old demo I made and blogged about a few months? back, and decided to add to it, and do some profiling and optimization.
This is what I ended up with.
Second thing was add the translation feature. Which went as expected, by that I mean, I thought it would be easy, and there was in fact an unexpected problem, which I expect at this point. The problem ended up being a typo in the div name ><. Also, a little quirk with this is the word sizes change, and, if you select Japanese as your language, you get the whole subtitle as one giant word.
The third and most important addition is optimization. The old demo was pretty slow, and I knew this, but at the time I wasn’t so worried about optimization yet.
First thing I did for optimization was profile, and found that I was spending 80%!! of my time in a processing.js function; a function that I have spent time working in called text$line. It’s just a little internal function. I then proceeded to comment out code in text$line until I started to see a difference in framerate and time spent in text$line. What was happening was every time we drew text onto the screen, we would reset the current context’s font and size, when it makes more sense to only set those when the font or size change. So I moved one line out of text$line, and into textFont() and textSize(), then filed a ticket here. This fix was able to lower my time spent in text$line from 80% of total program usage, to 30%. Still not perfect, but a HUGE improvement, and I am sure the number of times I am redrawing text in this demo has a lot to do with the high number of text calls. I also lowered my framerate from about 20 to 40.