Archive for July, 2010

JavaScript: Broken as intended

Posted in open source on July 30, 2010 by scottdowne

This is in no way me bashing JavaScript; I love JavaScript. This is me, finding something that, despite being seemingly wrong, is there by design. Take this example:

var a = 100;
(function (){
alert(a); // alerts undefined
var a = 20;
alert(a); // alerts 20
}());

If you had experience in other languages, but little with JavaScript, you may think it would alert 100, then 20, but it does not. Because a variable “a” exists in the scope of the closure (inside the anonymous function) it won’t use the “a” further up the scope chain, it will instead use the a inside the closure, even if it’s not yet defined. I could see this getting very confusing for someone who doesn’t have experience in JavaScript, and even then, it will be confusing the first time you see it. To help understand this point, try removing the “var” from the “a” in the closure; it will now alert 100 and 20, respectively, using the first “a” it can see.It seems, the local scope is first checked (all of it, even what has not yet been defined) and if it’s not found, it looks to the next scope up. I am sure there is a more technical explanation, about closures and scope chains, but I wanted to keep this simple. I may elaborate more later when I understand more

processing.js, canvas, custom fonts and @font-face. Chapter 4

Posted in open source on July 29, 2010 by scottdowne

This may be my final chapter, depending on how the review process goes.

Not too long ago, I was working on loading custom fonts into a canvas using processing.js. I got it working, actually, I got it working about a week ago, and is up for review. Refer to my previous chapters on it to see what I am doing. I don’t think it’ll pass review, though. I feel like I am doing a lot of pretty back water hacks to make it work, but, I kinda hope it fails this review process as I will learn more, fix it, and have better code because of it, until then, it was best I move on to saveString, loadString textAscent, textDescent, and textLeading. More on those later.

processing.js, canvas, custom fonts and @font-face. Chapter 3

Posted in open source on July 22, 2010 by scottdowne

So I’ve been spending the last while learning about fonts on the web. The font types, restrictions, tricks.

One thing in particular is displaying custom fonts in the browser, without having to download the font; we can do this using the @font-face css rule, which I have discussed in chapter one of this font adventure.

The problem being that the font isn’t actually loaded by the css rule, but at the first use of the new font. This is not a huge deal in most normal, static webpages displaying a bit of unstyled text while it downloads the custom font, then updating the font, coined in this extremely helpful post, as FOUT(flash of unstyled text). Something dynamic, like canvas, is a bit more of an issue.

When canvas first tries to display the text, it is displayed for good, until it is drawn over, and displayed again, so there is no real time update of the new text once it is downloaded. This is not a problem if we write the text in a constant draw loop, which is probably the best way to do it anyway. However, that is not perfect, and we need a way to preload the text, so it is ready for the whole of the canvas. Fonts are not scannable by the browser, as it is an obvious security flaw. The first thing we need to do, is declare in our code that we want to preload a font. Luckily processing.js, the library I am making this for has a preloading directive (mentioned here) already created, I just have to plug into it. Now that I know what font I will be using, I have to create a hidden dom element and use this font, to start the loading, but I also have to stall the canvas code, to only begin after all my fonts are finished downloading, without checking which fonts are installed. I can do this with a pretty messy hack, which consists of creating two elements (one of which we just created) and writing some text to it, then compare the size of the text, in pixels, to each other. If they are the same, the custom font is still using the defaulted font, which means my custom font is not yet downloaded. I got this all working today, and I threw up a small demo of it here.

A few interesting things to note about the demo, is that I can load a font from a data uri, and not a filepath, but it was slow using it, because the data uri string, which was really long, was the only unique identifyer I had, so if I wanted to access it, I had to pass in this long string. I fixed this by allowing the font @pjs directive accept a valid JSON object, so I can define a fontName, and a url, and access the font by name, and not by url. Example(including the data uri):

/* @pjs font='{"fontFace": "ADamnMess", "url": "data:font/opentype..."}', 'yanone.ttf'; */

Then use it by name, if a JSON object is not provided, a string with a url is also acceptable, but must be referenced inside the processing code by the url as well.

And, to put it all together in a processing sketch, looks like this (link includes the data uri which is the top most super long line):

/* @pjs font='{"fontFace": "ADamnMess", "url": "data:font/opentype"}',
 'yanone.ttf'; */

PFont myFont;

void setup() {
 background(0);
 size(200, 200);

 myFont = createFont("ADamnMess", 32);
 textFont(myFont);
 text("hello", 52, 60);

 myFont = loadFont("yanone.ttf");
 textFont(myFont, 32);
 text("world!", 50, 100);
}

processing.js, canvas, custom fonts and @font-face. Chapter 2

Posted in open source on July 21, 2010 by scottdowne

Adding some work I did on my last post, which is now Chapter 1, of what will probably be a new home in working with fonts.

There are limitations to what we can and cannot do with fonts, but there is room for improvements, and things we can do that p5 cannot.

For starters, we cannot support the processing .vlw file type, but we can support .ttf, .otf, and any fonts defined in the browser/os.

We need to add custom fonts to the @pjs directive, containing a url to the font file, to preload the font file. This is not totally accurate, as there is no way to check if the font is loaded or not, so it’s not preloading, it’s just predefining, but we do need to know the name of the font, and it’s better to start loading it sooner rather than later (when you hit the createFont/loadFont functions).

I’m not going to get this perfect, but I will get it working, and we’ll go from there.

Processing.js will now be able to load custom fonts defined as a data uri, that’s passed as a string to the loadFont/createFont functions, and the @pjs directive.

Font types we support are listed here http://www.webfonts.info/wiki/index.php?title=@font-face_browser_su… and as they improve the @font-face support, we will also gain improvements. Some browsers support .svg fonts.

It seems the widest supported font type to use would be .ttf

createFont’s parameters smooth and charset are problematic. smooth is used to set antialiasing to true or false, and I don’t think we can support that at the moment. Not sure yet what charset is supposed to do, but I’m looking into that.

I was having problems with chrome, not rendering .otf or .ttf fonts, but loading a data uri of a font fine, but it turned out (after much fighting) that it was simply a crappy font file, as when I re downloaded it, and others like it, it worked; a problem I should watch out for.

Anyway, here is a demo using custom fonts in processing.js. It is still not preloading the font file, so if you try and use your font out side of the draw loop in processing.js, you will not see it after it loads, but inside the draw loop, your font will be updated after it loads. I do plan on doing preloading, and I have a crazy idea I’ve seen floating around google to preload fonts I was working on today, hopefully tomorrow, I will be able to talk about it, and show it. How it works is you get the size, in pixels, of a string using your custom font, and if the size is not equal to the same string using the default font face, your custom font is loaded. For obvious security reasons, there is no way for the browser to read a users computer to determine the fonts installed.

Expect chapter three tomorrow evening, along with a demo preloading the font file (I say this so I cannot back out).

processing.js, canvas, custom fonts and @font-face

Posted in open source on July 16, 2010 by scottdowne

So I’m fighting with what would seem to be a pretty trivial feature, but actually has very little support when it comes to web technologies. What I want to do is create a hack that allows custom fonts to be loaded into, and used inside, a processing.js canvas.

There is a CSS property called @font-face that has a lot of potential. You use @font-face is like so:

 @font-face {
 font-family: "name your font";
 src: url("url/to/your/font/file.ttf") format('truetype");
 }
 

Then later in your page, you just access it by it’s name in a css font-family tag, like so : “font-family: ‘name you defined in the @font-face’;” One note about this, it wasn’t working for me using firefox and ubuntu until after I added the format tag. The strings you want to put into the format tag depend on the format of the font, so .ttf = truetype, or for .otf, you use “opentype” those are the only two I know of at the moment, but it’s pretty self explanatory.

This works, and even can then be used in a canvas elements javascript by refering to it by name inside the element, like so:

 curElement.font = "32px 'name of font'";
 

The big flaw in all of this, is the font is never loaded until it is used, so I would need to load an element of some sort, and say “style=”font-family: ‘name of font’;”, which would start the loading process of the font. An even bigger problem is it’s only going to be loaded if it happen to be used before the webpage is finished loading, and this is what I am stuck on.

Trying to get this to work in processing.js requires the use of the @pjs to preload, and define the fonts to be loaded. We do this for images, and it’s done like this:

 /* @pjs preload="image/url.png"; */
 

Multiple images can be loaded using a comma before the semi-colon.

I am thinking something like this:

 /* @pjs preloadfont="image/url.ttf"; */
 

When this line gets compiled, the contenet has already been loaded, and I have not yet found a way to force the load, or wait until it is finished. We do this with images, but an image is an html element that also has an onload method, that can track when it’s done loaded. This on the other hand, is a css property, which isn’t very accessible from javascript.

javascript string.split on multiple characters

Posted in open source on July 13, 2010 by scottdowne

Today I was asked how to split an array, in javascript, on multiple characters, for example, a space or comma. I didn’t know, so I decided to think on it for a bit, then do some research. The three options that came to mind were, in the order I thought of, and oddly enough, worst to best.

The first was to simply split on a single character, then do it again, but that would require sending an array of strings into a splint function, each. For example, splittin “hello world,twice” on a space and comma, first being split on space, would produce an array of two strings, and you would need to loop through that, calling split on a comma. So an array that’s split into 8 items, would then need 8 more split calls, then the arrays would need to be merged into one single array, and that’s not ideal, but it works.

var string = "this is a string,and I have a comma";
var array = string.split(" ");
var finishedArray = [];
for (var i = 0, il = array.length; i < il; i++) {
  var temp = array[i].split(",");
  for (var j, jl = temp.length; i < jl; j++) {
    finishedArray.push(temp[j]);
  }
}

It works, but, no… it’s not good. Am I missing something with this?

Option number two, and my personal favorite, simply because it’s not so obvious, is to, taking the last example of space and comma, turn all comma’s into spaces using replace, then calling split on just space, something like this.

var string = "this is a string,and I have a comma";
var array = string.replace(",", " ").split(" ");

The final option, and the right option, is to simply just split on a regular expression.

var string = "this is a string,and I have a comma";
var array = string.split(/[\s,]+/);

The contents between the / / means this is a “regular expression”, and the [] means any one of the desired character, and best of all, the \s, means any space character, including tabs and newline.

I feel the bottom two are both perfectly acceptable.

popcorn.js + processing.js + box2d.js

Posted in open source, video, webmademovies on July 11, 2010 by scottdowne

I started a little demo Friday night, which is why I didn’t do a blog post yesterday even though I said I would do one a day.

A blog a day is just a bar I set, that even if I fall short of it, every other day is still pretty good, better than none at all, and I still plan on shooting for one a day.

What this demo is, is just a simple hack of processing.js, popcorn.js and box2d.js, and a previous demo made by Andor Salga, (which is currently broken) which I stole,  and a video made by filmmaker Brett Gaylor of WebMadeMovies who is working closely with me during the creation of popcorn.js.

I had to add a small hack into popcorn.js, and do some fixing to allow subtitles to load on a custom div, instead of generating a default one, but it still generates a default if no target is specified.

Not much else to say, so check out the demo, you might need to refresh if subtitles don’t appear the first time (best to let the page fully load before hitting play, it seems)

Follow

Get every new post delivered to your Inbox.