Badass JavaScript

Seriously.js: A Realtime, Node-Based Video Compositor for the Web

We covered a demo earlier this week showing real time video processing with WebGL, but Seriously.js taking this concept even further: seriously!

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

It features an optimized rendering path that is built with WebGL making it entirely hardware accelerated at 60 frames per second.  You can use videos, images, canvases and pixel arrays as input sources to the compositor and then apply various video effects to the resulting image, and apply 2d transforms to any layer (3d is coming).  The available effects are numerous ranging from chroma key and night vision to edge detection and other common effects.  Additionally, and perhaps the best feature of the library is that you can add your own effects as plugins and use them just as you would the built in effects… In fact, the built in effects are actually just plugins themselves!

The demo combines a number of different effects and sources.  The video is chroma-keyed so that you can actually change the background as it’s playing in real time, and then various effects are applied on top of everything changing the feel of the music video dramatically.  There is a underwater scene, a night vision scene, and a creepy black one.  I think this idea of user modifiable music videos is a very neat one indeed!

So want to get started with Seriously.js yourself?  Luckily for you, there is a tutorial to help you out and even some documentation!  So how easy is it to apply effects to an HTML5 video?  This easy:

var seriously = new Seriously(),
    video = seriously.source('#myvideo'), // get video element by CSS selector
    target = seriously.target('#canvas'), // output canvas
    vignette = seriously.effect('vignette');

// connect all our nodes in the right order
vignette.source = video;
target.source = vignette;
seriously.go();

Obviously you can connect multiple nodes together in a chain-like fashion, adjust effect parameters and more, so check out the tutorial for all of that!

Who knew that JavaScript was going to be doing realtime video compositing and effects even a few years ago?  Seriously.js is seriously impressive, it is open source on Github, and you should check it out… seriously!

Weekly Badass JS Roundup #6

Welcome back to the weekly Badass JS roundup!  Lots of JavaScript news this week, so lets dive in.

1. Adobe proposes events for monitoring the downloading of Image resources which could be quite useful in many circumstances.
2. ES6, the next version of the EcmaScript standard that defines the JavaScript language has support for various types of collections beyond the standard Array and Object types.   ES6 adds support for Maps, WeakMaps and Sets to the language.  They aren’t available for use yet, but luckily Andrea Giammarchi has taken the time to shim them so you can use them today.
3. Drumkit.js looks like an interesting new framework for Node.js that allows you to share pieces of code between the server and client as well.  Neat idea!
4. If you didn’t hear about it already, WebRTC has landed in Chrome!  WebRTC is a new technology that brings realtime voice and video communication technologies to the web.  Ever imagined building the next Skype without any plugins?  Well now you can!  You can enable it in the latest Chrome Canary builds in about:flags and then check out this demo!
5. We’ve been watching Mozilla’s PDF.js project with much interest, and they continue to pump out the Badass JavaScript.  This time, it’s support for JPEG 2000 images using a handwritten JPEG 2000 decoder written in JavaScript.  Very cool!
6. There are a couple of new slide decks for you to check out relating to new HTML5 features.  Check out “The Edge of HTML5” by Eric Bidelman and “What’s New in HTML5 Media” by Paul Kinlan both of the Chrome dev relations team.
7. Zip.js is a JavaScript library that allows you to zip and unzip files in modern browsers (Chrome and Firefox).
8. Jed brings gettext style i18n localization support to JavaScript applications.
9. Ember.js 0.9.4 and Node.js 0.7.1 were released.
10. Mikeal Rogers of Node.js fame writes on “A new direction for web applications”, covering the history of the dynamic web and looking to the future of applications built with Node and other platforms.
11. Jens Nockert wrote two blog posts about various upcoming features of browsers that will make your computationally intensive apps much faster. The first, “Accelerating Javascript via SIMD”, covers a pet feature of his that may go into Firefox at some point.  The second is an introduction to a series called “Tools for the next generation of Web Applications” and it covers lots of different technologies including SIMD, WebCL, RiverTrail and more.
12. Enyo, the application framework behind webOS has been open sourced!
13. The State of HTML5 Video is a nice site with various statistics about HTML5 video’s availability across devices and browsers that details some sub-features as well.  Check it out if you do anything with HTML5 video!
14. Finally, JavaScript Jabber is a new podcast about everyone’s favorite language.  I haven’t listened to it yet myself, but I’ve heard good things and the first episode has an all star cast!

That’s it for this week!  As always if you have something you’d like to tell us about - something you think is Badass JS worthy - don’t hesitate to let us know!

Fabric.js: An Interactive Object Model and SVG Parser for the Canvas Element

Kangax has released Fabric.js, a library that aims to make interacting with objects drawn on the canvas element easier.

Fabric.js started as a foundation for design editor on printio.ru — interactive online store with ability to create your own designs. The idea was to create Javascript-based editor, which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it’s not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). Fabric.js was heavily inspired by Ernest Delgado’s canvas experiment. In fact, code from Ernest’s experiment was the foundation of an entire framework. Later, Fabric.js grew into a collection of distinct object types and got an SVG-to-canvas parser.

Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

As you can see in the demo, Fabric.js is fast and produces a great user experience for manipulating a design - right in the browser.  It is also simple to use from your own code:

var canvas = new fabric.Element('canvas');

var rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red'
});

canvas.add(rect);

Because Fabric.js has a SVG parser, you can import complex shapes from a vector editor like Adobe Illustrator or Inkscape into your canvas element very easily.

You can check out the demo here, and get the code on Github.  Great work!

PaintbrushJS: Client Side Image Filtering For The Masses

Dave Shea, who you might remember as the guy behind the CSS Zen Garden, has written an interesting JavaScript library that makes it easy to apply Photoshop-like image filters on the client side using the magic of the canvas element.  Once you’ve included the script on the page, all you need to do to get the effects working is apply some classes and HTML5 data attributes to the images that you want effects applied to.  PaintbrushJS automatically takes care of rendering the effects and sending the processed image back into the element.  It works on both image elements and background images alike, so no matter how you’ve built your HTML you should be all set to add effects right away.  Here is an example showing how to apply a gaussian blur effect to an image:

<img src="image.jpg" class="filter-blur" data-pb-blur-amount="0.5">

As you can see, you add effects through class names and set their attributes through HTML5 data attributes.  The filters currently available are:

1. Gaussian Blur
2. Greyscale
3. Noise
4. Posterize
5. Sepia
6. Tint

As you can see in the demo, PaintbrushJS is pretty fast, applying filters on all 24 of those images before the page is even finished loading.  The most impressive of the filters is the Gaussian Blur implementation, which is generally quite a processor intensive filter, but can be done very quickly and efficiently by PaintbrushJS.  Even on slower devices like the iPad, the effects render quickly enough so that the user hardly even notices.  Very impressive!

You can check out a PaintbrushJS demo here, the documentation here, and the code on Github.  It is exciting to see more and more traditionally static effects come to the browser thanks to the magic of JavaScript!

MathJax 1.0 is out! Cross Browser LaTeX and MathML Rendering Just Got Real

MathJax is an open source project that aims to render both LaTeX and MathML expressions in all browsers.  LaTeX is an extension of the TeX markup language originally used by the TeX typesetting program written by the famed Donald Knuth way back in 1978.  It is a very commonly used format in mathematics, so being able to embed it directly in a webpage is very exciting.  Below is an LaTeX equation:

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

And here is how that is rendered by MathJax:

MathJax can also render MathML documents.  MathML is a W3C specification for describing mathematical formulas using XML.  It was designed to allow direct embedding into HTML documents but currently, Firefox 4 is the only browser that supports native MathML rendering.  Hopefully other browsers will jump on the bandwagon soon.  Until then, MathJax provides a good alternative.  For example, the following MathML code:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>−</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>−</mo>
            <mn>4</mn>
            <mi>a</mi>
            <mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

Gets rendered as the following by MathJax:

Very neat!  MathJax works by using a web font with the correct symbols available to it and renders out DOM nodes for each character.  This preserves the ability for the user to select and copy the equation.  MathJax also has accessibility support through its ability to zoom in and out as well as communicate with screen readers.

MathJax is an exciting project for anyone trying to embed mathematical formulas in their webpages without having to resort to static images.  Also, congratulations to the team on going 1.0 a few weeks ago!

You can check out MathJax on it’s website, see some demos here, and even play arount with the source on Sourceforge.  Have fun!

Update: MathML is now supported natively in Webkit!

8-bit Color Cycling with HTML5 Canvas

Color Cycling is a technology used “back in the ’90s” in video games, where the colors of a particular object are shifted over time to give the appearance of animation.  This used less computing resources than actually storing and animating several frames.  It was most commonly used for things like water and fire, but later, graphic artist Mark J. Ferrari used the technique to great effect to animate snow, ocean waves, moving fog, smoke, waterfalls and more.

This technique died in the late ’90s due to the rise of 3d technology and full 32-bit color games, but it has been brought back to life by Joe Huckaby, who has implemented a full 8-bit color cycling engine in JavaScript using the Canvas element.

But, this isn’t just a port: there is an additional feature of this engine that wasn’t found back when these things were common.  That feature, Huckaby calls BlendShift Cycling.  Whereas a normal color cycling engine would simply change the colors and move on with it, BlendShift Cycling creates a better looking effect by “fading” one color into the next.  As you can see in the demo, the effect looks pretty darn realistic.  If you click on Show Options, and then switch to Standard cycle mode, you can see the difference between BlendShift Cycling and Standard Cycling.

Since the canvas element is not yet hardware accelerated (except in IE9), some optimization had to be done in order to make the effect perform at the level you can see in the demo today.  Instead of looping through all 307,200 pixels every frame, the scene is pre-processed to extract an array of just the pixels that will be updated.  This optimization trick worked well as you can see, and it worked well enough that the demo runs very smoothly on an iPad or other mobile device with a decent processor as well.  Very impressive!

You can check out a blog post about the effect here, the demo showcasing scenes designed by Mark Ferrari with or without sound (as played by the HTML5 Audio element), and have a read through the code here.  Impressive work!

location.hash is dead. Long live HTML5 pushState!

For a long time, location.hash was a way for AJAX applications to get back button and bookmarking support, and libraries like jQuery BBQ from Ben Alman made dealing with it cross browser a cinch.  Now, with HTML5 coming of age, there is a new feature that aims to replace the use of location.hash with a better solution: pushState.  Over on the Spoiled Milk blog, Jamie Appleseed describes the API as “a way to change the URL displayed in the browser through JavaScript without reloading the page.”  It works on the history object like this:

window.history.pushState(data, "Title", "/new-url");

The last argument is the new URL.  For security reasons you can only change the path of the URL, not the domain itself.  The second argument is a description of the new state.  And the first argument is some data that you might want to store along with the state.

In order to support the back and forward buttons you must be notified when they are clicked.  You can do that using the window.onpopstate event.  This event gives you access to the state data that you passed to pushState earlier.  Of course, you can manually go back and forward with the standard history functions.

Currently, pushState has support from the latest versions of Safari and Chrome, and Firefox 4 will be supporting it as well.  It is worth noting that Flickr is already using the API in their new layout.  I think that this is really the correct way to be dealing with history management in JavaScript applications since it changes the real URL instead of just the hash.  I’m very excited to see libraries like jQuery BBQ start to support this feature with fallback to the old hash trick.

If you’d like to read a more in depth overview of these new features, you should check out the aforementioned blog post by Jamie Appleseed.  If reading specs is your thing, you can check out the relevant document here.

WPS: PostScript and PDF Interpreter For HTML5 Canvas

WPS is a PostScript and PDF parser and interpreter written in JavaScript using the HTML5 Canvas tag.  PostScript is a programming language often used in page layout programs, and is the basis of the PDF format, which started out as a superset of PostScript.  According to Adobe, “a PDF file is actually a PostScript file which has already been interpreted by a RIP and made into clearly defined objects.”  WPS takes PostScript or PDF code and generates an output image using the HTML5 Canvas element.  For example, this PostScript:

/n 10 def
/w 25 def

0 0 n w mul dup .gbox

4 dict begin
  0 1 n 1 sub {
    /i exch def
    /ii 1 1 n div i mul sub def
    0 1 n 1 sub {
      /j exch def
      /jj 1 1 n div j mul sub def
      ii jj 0 setrgbcolor
      w j mul w i mul w w rectfill
    } for
  } for
end

would be converted into the following image.

The PostScript and PDF formats are very large, and thus only a small subset of the operations are implemented in WPS.  Even so, it is exciting to think that one day in the not so distant future we will be able to embed PDF files in the browser without the need for plugins.

You can check out a page with lots of examples here, a sandbox where you can enter PostScript or PDF code and see the results here, and the source code here.

This post was submitted by Fabien Ménager.  You can submit a post, too!

Weekend Reading: Subclassing Arrays and Why === Isn’t Always Better Than ==

I came across two very informative articles today, so here is some good weekend reading for you.

The first article is by kangax, and is titled “How ECMAScript 5 still does not allow to subclass an array.”  It is a lengthy post that delves into the inability to create a custom array class that inherits methods and functionality from the native Array object while not polluting the native Array object itself.  This is very important if you are, for instance, building a library that you do not want other code on the page to be affected by.  The article is a good read, and is worth it even if you are not planning on subclassing an Array any time soon.

The second article is more important that all JavaScript coders read.  It is by Dmitry Baranovskiy (of RaphaelJS fame), and it discusses the typeof operator as well as the == and === operators: some very misunderstood parts of the JavaScript language.  Here are some weird examples:

typeof "hello world" //string
typeof new String("hello world") //object
typeof true //boolean
typeof new Boolean(true) //object
typeof [1, 2, 3] //object

And also for the == and === operators:

new Boolean(true) === true //false
new Boolean(true) == true //true
new String("hello") === "hello" //false
new String("hello") == "hello" //true

Obviously, this could cause some major problems with logic.  So, bottom line: be careful with your use of ===.  It is not always better than ==.  The article is a good read, and provides a nice function that you can use instead of typeof to provide more consistent results.

Enjoy!

def.js - Ruby Style Inheritance In JavaScript

Tobias Schneider has another piece of JavaScript Badassery, this time another play at fixing the JavaScript object model.  def.js is just over 90 lines long, but it has some cool tricks up it’s sleeve.  First, check out this example of it in use:

def ("Person") ({
    init: function(name){
        this.name = name;
    },

    speak: function(text){
        alert(text || "Hi, my name is " + this.name);
    }
});

def ("Ninja") << Person ({
    init: function(name){
        __super__(name);
    },

    kick: function(){
        this.speak("I kick u!");
    }
});

var ninjy = new Ninja("JDD");

ninjy.speak();
ninjy.kick();

It is all pretty standard stuff until you get to the declaration of the Ninja class, which extends the Person class.  Through some trickery using valueOf and bit shifting operations, def.js is able to create a non-standard looking syntax for extending objects that is very readable and intuitive.  It also manages to get a pretty simple syntax for running super, through the use of the non-standard but well implemented property of all Function objects, caller.  This combination is enough to make an interesting syntax for dealing with classes in JavaScript.

You can check out the code on Github, and hack away on it if you’d like!  And as Malte Ubl just said on Twitter:

Now, get to work on your own hacks!