No More Recursion

In my last post, I mentioned a bug I had where I was creating a processing.js instance from inside the processing library, in order to use it to measure the pixel in text drawn to a canvas, using createGraphics.

What was happening was when you change the processing text, you need to recalculate textLeading (which I was informed it’s lead, as in the metal, and not in what a leader does), which makes a call to textAscent, which sets up the new processing instance, which then reset textLeading, causing an infinite amount of recursion.

I fixed this by instead of calling create graphics, I setup a small class that does exactly what I needed it to do. In other words, I emulated the basic most text drawing functionality of processing. Here is my class:

    var thisStupidThing = function(fontFace, fontSize, baseLine, text) {
      this.canvas = document.createElement('canvas');
      this.canvas.setAttribute('width', fontSize + "px");
      this.canvas.setAttribute('height', fontSize + "px");
      this.ctx = this.canvas.getContext("2d");
      this.ctx.font = fontSize + "pt " + fontFace;
      this.ctx.fillStyle = "black";
      this.ctx.fillRect (0, 0, fontSize, fontSize);
      this.ctx.fillStyle = "white";
      this.ctx.fillText(text, 0, baseLine);
      this.imageData = this.ctx.getImageData(0, 0, fontSize, fontSize);
      this.get = function(x, y) {
        return this.imageData.data[((y*(this.imageData.width*4)) + (x*4))];
      };
    };

It went from being a about thirteen thousand lines(all of processing), to fifteen. This also happens to be faster, as we no longer have to load all of processing to do this one simple function.

I think my initial plan of using processing, at first was the right one. It was the quick and easy way to get it working, then I went back and shined it up once I had the rest working.

recursive problems

Ok, I have been fixing processing.js‘s textLeading function. I initially made a patch to implement this function, but it has some problems before it can be landed in the code.

Some short background info. I recently landed textAscent and textDescent. What these functions do are create an offscreen processing instance, write some text to it, then measure the pixels to get the true ascent and descent values.

textAscent is the number of pixels from the bottom of the letter “t”, to the top, and the textDescent is the bottom of the letter “t” to the bottom of the letter “j”. Text leading is the space between the letter “t” and the next line’s bottom of the letter “t”. So if you were to draw the words “text/ntext” in a processing sketch, the text Leading is the number of pixels used to separate the words on the newline(\n) character.

The way processing calculates the space between two lines is by adding ascent and descent then multiplying the sum by 1.275. There is a problem with this.

I will walk you through it. You want to write some text to the screen, so you give it a size. Size has changed, so textAscent and textDescent need to be recalculated. So we call ascent and descent, which draw an offscreen canvas on which to measure pixels, which calls size, which calculates textLeading, which calls ascent and descent, which creates an offscreen canvas, which calls size, which calculates textLeading, which… you get the idea…

TextSize -> textLeading -> ascent/descent -> textSize…

I need to brainstorm a solution to this.

No more exceptions!

Yesterday’s post, I was talking about an exception I was receiving while trying to change an HTML5 video’s current time. I ended up solving it by putting it into an event listener, which worked, and made me suspect it was a loading issue, as event listeneres either fire after a delay of some sort. In the case of my previous solution, I would fire during “ontimeudate”. Looked like this:

<script>
  var update = function() {
    if (document.getElementById("video").currentTime < 2)
    {
      document.getElementById("video").currentTime = 2;
    }
  };
  document.getElementById("video").setAttribute("ontimeupdate", "update();");
  document.getElementById("video").play();
</script>

This worked, but was not the best way.

After getting advice from a blog comment, a link from Dave, and a demo. The blog comment mentioned what I was suspecting, which had to do with loading. The link from Dave was the firefox source of what caused the error. This ended up saying a mDecoder was null, which would throw the error. The mDecoder was being set inside a function called “FinishDecoderSetup”, which may be called after something is loaded… ok, I will admit this code is too much to completely understand in one shot, but it does contain all my answers, so I will use it as a worst case scenario. For now, I will try the easier leads, and work my way down. Now, the demo’s source code basically was using currentTime while inside the ‘loadedmetadata’ event listener.

<script>
  document.getElementById("video").addEventListener('loadedmetadata', function() {
    this.currentTime = 3;
    this.play();
  }, false);
</script>

Oddly enough, I thought I tried this… but something external was probably mucking up the works. Lesson to be learned here is make reduced test cases to test, help you understand, and to help others understand you.

HTML5 mediaElement.currentTime error

Recently, while working on a html5 video demo, I ran into an exception I could not figure out.

What I am doing is simply trying to change the video’s current time, but kept receiving an INVALID_STATE_ERR exception… It’s hard to get info on this, but I found “Will throw an INVALID_STATE_ERR exception if there is no selected media resource” in this page. Not much help, as I knew for a fact the media resource existed, but whatever selected media meant, I don’t know yet.

Here is an example of the problem:

<script>
  document.getElementById("video").currentTime = 2;
  document.getElementById("video").play();
</script>

Something as simple as this causes the exception, and I still don’t know why… but I did fix it.

A fix looks like this:

<script>
  var update = function() {
    if (document.getElementById("video").currentTime < 2) 
    {
      document.getElementById("video").currentTime = 2;
    }
  };
  document.getElementById("video")
    .setAttribute("ontimeupdate", "update();");
  document.getElementById("video").play();
</script>

All I do here is modify the currentTime form inside an event listener, and it works…

I think this has to do with what parts of the video are not yet loaded.