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)

Hello world

Posted in open source on July 11, 2010 by scottdowne

my infinite wisdom and coolness is now on twitter, but I’m still not quite used to the idea, so we’ll see how it goes (I felt the same way about blogging when I first started it)

Google translate translates itself

Posted in open source on July 9, 2010 by scottdowne

Today, my curiosity got the best of me. I have been using google translate with popcorn.js, to translate subtitles, and I was curious how good it really was, but I didn’t expect it to be this much fun!

Anyway, I made a small demo. It translates a message into multiple languages, then back to English, to view the results. Warning, it can get quite silly!

What you have to do is:

  • Type some text.
  • Select your languages,
  • and hit “translate me” up to four times, one click for each new language that has been selected.
  • Then view the results, in English.

Anyway, before I go I would like to point out I am trying to get back into more blogging, so for the next ten days, starting yesterday, I will be doing a blog a day, so it becomes habit again.

Updated, Nick has made my simple demo pretty, and not as simple, you can check out his additions here.

Popcorn.js

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

A project I have been working on is an HTML video library called Popcorn.js. A demo that was put together, this is the demo that is being shown tomorrow at Mozilla summit 2010, so if you are an attendee, you might want to hold off on spoiling the demo ;)

What this is, at heart, is an XML grammar, that defines various “commands” that can be used with the video, based on the video’s current time. So you can load a google news article about whatever you define in the xml tag, at a certain time in the video. For example: &lt;googlenews in=”00:00:05:02″ out=”00:00:10:07″ target=”googlenewsdiv” topic=”Village Telco”/&gt; googlenews is the keyword for the command type, in is when the news articles can be loaded, and out is when it should leave. Target is where you want to put the article, and topic is the search topic to be used in the article. Currently we have 11 “commands”, including:

  • subtitles
  • foot note
  • flickr
  • twitter
  • google maps
  • google news
  • wikipedia
  • attribution
  • lower third
  • credits
  • tag this video (like tag this photo from facebook)

Some of my favorites are:

  • Subtitles, which can be translated to any language real time using google translate, which is pretty awesome.
  • Flickr, which despite being quite simple, was made purely by me, and not a third party script + widget I am hooking into, so I will always like it ;)
  • Credits, they are just awesome, and quite fun. Also, it is unique from all other commands, in that it’s only loaded once at the end.
  • twitter, I still don’t have twitter, but I am warming up to the idea. I like this command though, as it’s probably going to be the most popular, and allows real time chat about a topic in the video using hastags.

Some tags, like the example above is self closing &lt; /&gt and others, like subtitle, contains the text between &lt; &gt;&lt;/ &gt.

Some things I think we did wrong, concerns, things I want to add and that we plan on changing in 0.2 is:

  • Using jquery right in the library is my number one concern. We did this because we were making the library while making the demo, and some of it got blurred, but that’s ok, because these things are never right the first time.
  • Similar to the last one, but we need to think more in terms of using data and functionality, and not about graphics and putting data right inside the library, again, blurring the lines between library and demo. Our library should be more customizable, and less flashy, and we put the flashy in the demo on one of many ways you can use this library.
  • Something that was mentioned to me by the chair of computer studies are Seneca college Evan Weaver is that we should make a way for new commands to be plugged in, so anyone can add functionality as they wish, and distribute additional features in the form of addons.
  • Really break the video out of it’s little tv some more. So many websites display the video as a self contained element, and that’s what we want to blur, and ultimately break. One way I want to do this, is to make the video one element, a new command, and the webpage itself is the video. So you could go so far as to using this library, and never even use a video, and we can also have an audio command.  :)
  • Breaking the video’s time bar also helps to do that last idea, and this way, you can display two videos, and change them based on a toggle on the website somewhere, if you say, want to display a video with two separate views, in real time.
  • Further down the line, is to make a website that can generate this xml, from some GUI interface, so you don’t have to make all these xml tags, which can be very very time consuming. I know from experience ;)

If you want to get involved, we use lighthouse to track bugs, and you can find us on irc under irc.mozilla.org/popcorn. Come and share your ideas.

One final note, while adding subtitles to the top most demo, we got into an argument about what was being said. If you want to help the cause, you can check out 1:48 of the demo, and give me your opinion on what he’s actually saying.

Check out what another developer on this project is saying here.

Follow

Get every new post delivered to your Inbox.