Badass JavaScript

JavaScript Videogames Can be Badass

Four of the Nine finalists of Boing Boing’s Games Inspired by Music competition are JavaScript videogames! Those four games are: Onslaught!, Infiltration at Dusk (full disclosure: this one is by me), Flatwar, and Knifetank.

Winners of this contest are based on poll voting which ends July 14. The top two games right now are both Flash games. With some help from the JavaScript community, we can push some JavaScript games up into winning rankings!

Flash games can be distributed on websites such as Kongregate and New Grounds, bringing very large audiences of players. Lets put JavaScript gaming in the spotlight to get it some attention that it deserves!

This post was submitted by Zachary Johnson. You can submit a post, too!

Turtle Graphics in the Browser

Although originally produced by mechanical robot turtles, the best known variety of Turtle Graphics are the software simulation. There is now an implementation of the Turtle Graphics language in the browser using the canvas element. The JavaScript parses and executes the simple to use language and produces images. It works in a similar way to that of Processing.js and ContextFree.js. Here is an example of the language in use.

def jog [ forward 30 under [ turn 45 ] [ forward 10 ] ]
def joggle [ under jog reverse reverse ]
poly 16 [ poly 4 joggle ]

This simple code produces the following outcome.

Very nice work. For a detailed look at the implementation, check out this page. You can also check out the demo here.

A JavaScript implementation of the Content Aware Image Resizing algorithm

Stéphane Roucheray has written an implementation of the content aware image resizing algorithm in JavaScript using the Canvas element.  This algorithm tries to find the subject of the picture and retain its proportions, while resizing the background elements of the picture only.  This reduces the squashed or stretched nature that you may find if you resize images disproportionately.  It is implemented in tools like Photoshop, but can now be used on the web.

This implementation works by following these steps:

1. Make the image grayscale using the canvas element
2. Run an edge detection algorithm (Sobel convolution) as well as generate an energy map
3. The seam of least energy (1 pixel vertical line from the bottom to the top of the energy matrix) is detected
4. It slices the image at the seam, and injects the resulting image back into step one for another iteration.  Reducing the width of the image by 50 pixels would require 50 iterations.

You can check out a demo of the algorithm in use over here, which shows how the image would be resized by CSS along side the results of the algorithm.  It is pretty cool that we can do this kind of image processing right in the browser now.  When will we have a complete canvas based Photoshop clone?  I think it will be sooner rather than later.

JSNES: A JavaScript NES Emulator

Ben Firshman has written an NES emulator in JavaScript.  It is a port of vNES and runs on top of the HTML5 canvas element backed by a lot of JavaScript code to read the ROMs and emulate the CPU of the NES.  Of course, these ROMs are binary, which adds to the challenge immensely, since JavaScript does not have the ability to natively work with binary data, let alone binary data designed for a totally different processor.  For audio support, it uses a simple Flash player that communicates with the JavaScript, although it could now potentially start to use the Audio Write API that the Firefox team is working on.

JSNES runs the fastest in Google Chrome, as you might expect, and nearly as fast in Safari >= 4.  It technically works in Firefox, but at a barely playable speed.  You can check it out here (try out some of the various games), and get the code on Github.  Amazing work!

Crockfordize the Web

Malte Ubl has put together a little multiplayer game using Node.js and the awesome Heroku beta Node hosting.  All you have to do is click here, and start shooting at the page.  If you want, you can even drag the link to your bookmarks bar and use it on any website!

Be sure to check out Malte’s post, and start Crockfordizing every site you visit!  Awesome.

This post was submitted by Dave Müller.  You can submit a post, too!

Brain.js: Neural Networks In JavaScript

A neural network is “a mathematical model or computational model that tries to simulate the structure and/or functional aspects of biological neural networks” according to Wikipedia.  Basically, a neural network carries out pattern recognition, very much like the human brain would.  The user of the network trains it, and then it can be used with varying levels of accuracy depending on the amount of training that it has received.  In this way, neural networks are learn patterns and can then recognize them on different input data. If you want to learn more about neural networks, here is a good introduction.

Heather Arthur has written an implementation of a neural network in JavaScript.  Below is an example of the library in use:

var net = new NeuralNetwork();

net.train([{input: {r:1, g:0.65, b:0},  output: {orange: 1}},
           {input: {r:0, g:0.54, b:0},  output: {green: 1}},
           {input: {r:0.6, g:1, b:0.5}, output: {green: 1}},
           {input: {r:0.67, g:0, b:1},  output: {purple: 1}}]);

var output = net.run({r:1, g:1, b:0});

This example trains the neural network with some simple patterns of input and output, then runs the neural network with an input.  The output would be something like:

{"orange":0.96,"green":0.18,"purple":0.00}

because yellow is most similar to orange.

Heather has also provided a working demo that you can try out.  First you train the network to recognize whether to use black or white text over a given background color.  Then, it compares the output of the neural network to a luminosity algorithm that calculates the same thing.  In many cases, the neural network produces results that are better than the luminosity algorithm.  Calculation all happens in a WebWorker, so you will need a modern web browser (no IE, sorry!).

You can check out the code on Github, the documentation here, and the color demo here.  Awesome work!

Canvaslib: A Flash Alternative For JavaScript

Diederick Lawson is working on a drawing and animation library for the HTML5 Canvas element that works similarly to Flash, but is written entirely in JavaScript.  This will make it easy for people used to the ActionScript architecture to move to the JavaScript world.  However, unlike Gordon, it is not a SWF parser and renderer - there is no actual Flash content here.

Canvaslib consists of the following classes:

1. canvaslib.DisplayContainer: basic graphical object and drawer
2. canvaslib.Shape: graphical object that holds a shape
3. canvaslib.Renderer: class that manages rendering for animations
4. canvaslib.StackedLoader: class that manages downloads for images or audiosamples
   
5. canvaslib.Tween: class that manages animations for all displayobject’s
   

Here is a simple example of drawing some vector shapes, and animating them using the Tween class.

var mainDisplayObj = new canvaslib.DisplayContainer("test_canvas");

var someShape = new canvaslib.Shape();
someShape.id = "shape1";
someShape.x = 0;
someShape.y = 0;

someShape.fillStyle("rgba(0, 0, 0, 1)");
someShape.fillRect(0, 0, 50, 50);

var otherShape = new canvaslib.Shape();
otherShape.id = "shape2";
otherShape.alpha = .5;
otherShape.fillStyle("rgba(255, 0, 0, .5)");
otherShape.fillRect(0, 0, 25, 25);

mainDisplayObj.addChild(someShape);
mainDisplayObj.addChild(otherShape);

var renderer = new canvaslib.Renderer(mainDisplayObj);
renderer.run(25);

canvaslib.Tween.to(someShape, 5000, { x: 100, y: 100 })
canvaslib.Tween.to(otherShape, 20000, { 
    rotation: 180, x: 320, y: 200, alpha: 1 
});

As you can see, this API has some things that are very similar to the way that the canvas API works (such as drawing shapes), and some things that are very similar to the way that ActionScript works (the tweening).

A very neat project indeed!  You can check out the library on Github, and download it there for some demos.

SVG-Edit: A Cross-Browser SVG Editor in JavaScript

If you have done any work with SVG, you have probably heard of Inkscape which is an open source desktop program that lets you edit SVG files without coding.  The svg-edit team have been hard at work building an SVG editor in JavaScript.  It works entirely in the browser - not even a server side component - and takes advantage of some of the latest features of cutting edge browsers, such as local file access in Firefox 3.6.  Below is a video introducing svg-edit.  It is from an old version, and many more features have been added since then.  Be sure to check them out!

SVG-Edit has really evolved from a nice technology demo, to a fully fledged application that you could use instead of something like Inkscape for most of your work.  The best part of it is that it is accessible anywhere, and it is built using standard web technologies.

You can check out the project on Google Code, and use the application itself here.  Awesome work, team!

Visualizing and Manipulating Audio in the Browser

The Firefox team has been busy working on the HTML5 Audio Data API, which lets JavaScript code interact with the Audio tag in a bidirectional manner.  Developers have been busy putting together some cool demos of what the API enables, including visualizations using the Canvas element, as well as playing interactive audio generated by JavaScript itself.

Jacob Seidelin has written some Winamp style visualizations for live audio playing in the browser.  If you are not running the experimental version of Firefox that this API is a part of, the audio playback will fall back to Soundmanager2 (Flash audio).  This shows what is now possible in the browser in real time.  I hope that other browsers implement the API soon!

Another demo, this time using WebGL for hardware-accelerated 3d graphics, was written by Charles Cliffe and does beat detection.  It uses the CubicVR 3D engine built on WebGL as well as Processing.js for the rendering.  Very cool!

At the beginning of this post, I mentioned that the API worked in the opposite direction as well: audio output from JavaScript.  One of the demos showcasing this technology, was written by Alistair MacDonald, and is an instrument inspired by Brian Eno’s Bloom iPhone application.  Check out the demo video, below.

Finally, check out this text-to-speech engine written in JavaScript using the Mozilla Audio API.  It is a real showcase of what the browser is now able to do.  Awesome work, everyone.  For more demos, check out this post on the Bocoup blog by Alistair MacDonald.  JavaScript FTW!