Jerome Etienne.js Blog

console4Worker - console API for worker

2011-09-12T09:17:00+02:00

console4Worker is console API for WebWorkers. WebWorkers are hard to debug. On top of that, console API is unavailable in WebWorkers. It doesn't help.

console4Worker is a simple library which tries to fill this gap. It provides the console API , the same api you are used to. It implemented in most browser, node.js, even part of commonjs. See the demo in the examples/ directory.

On the Worker Side

First you include the script with this line.

```javascript

importScripts('console4Worker-worker.js');

```

And you are done! Now you can console API as you would normally do, even if you are in a webworker. Lets say something like

```javascript

console.log("console call made from inside a webworker");

```

On the Page Side

On the page side, you need to add 3 lines. First to include the script, simply do

```javascript

<script src="console4Worker-page.js"></script>

```

Then you bind console4Worker to your worker with another line.

```javascript

// init the worker
var worker  = new Worker("worker.js");
// bind the console4Worker to get console API from worker
console4Worker.bind(worker);

```

If you got your own message event listener, add console4Worker.filterEvent() in it. This line will filter out messages coming from console4Worker. So you should have something like

```javascript

worker.addEventListener('message', function(event){
    // filter this event if it is from console4Worker
    if( console4Worker.filterEvent(event) ) return;

    // ... here handle your own events
}, false);

```

Motivation

Another project of mine is pacmaze. It uses webworkers to provide smoother animations. This is important for high fps game. The worst which can happen is to have 50fps most of the time but with short period at 30fps. People want the animation to be smooth.

Webworker allows to spread the load on 2 cpu core. Thus the pick of grabage collection is distributed, and you got twice more cpu power. So all in all, i found myself spending quite some time debugging webworker, so i wrote console4Worker to spend less time next time :)

Conclusion

How does it work ? a console object is declared in the worker. It intercepts all console calls and pass them to the page thread. a direct approach. I plan to add stacktrace and thus provide more accurate informations about the location of the call.

The code is available on github under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

Pacmaze Update

2011-09-10T12:12:00+02:00

Pacmaze just got an update. it was long overdue, i admit, other matters distracted me from it. It is good to be back on it tho. It is version 5 now. It is a major performance update, 5 time faster in some cases. The game is now embeddable in external pages. Additionnaly, Packy has been renamed Pucky as a reference to the original name of pacman, 'Puck-Man'. You can read all about the history of pacman in the pacman dossier.

Embedded game

See an embedded version below. Use AWSD keys to play or play the full page version.

The game is now embeddable in external page. To embed the game in your own page, just do the following and tune the css to own taste.

```html

<iframe src='http://pacmaze.com' width='480px' height='360px'></iframe>

```

Performance boost

Pacmaze v5 is a major performance update, especially for macbook. I got recently got a macbook. I quickly noticed pacmaze wasn't too good on it, to say the least. So i optimized the WebGL on this plateform. The performance are now much better. For Chrome, the performance went from 10fps to more than 50fps. On Firefox, the old version got bugs and 7fps... ouch. Now known bugs are removed and the average fps is close to 45fps.

So fps on macbook is now 5 time faster! Quite a boost! Next update i plan to focus on visual effets.

MicroCache.js - Cache Micro Library

2011-09-05T00:00:00+02:00

microcache.js is a micro library to handle in-memory cache. It is less than 20 lines and works in node and browser. It is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

Install it

To install it on node

```bash

npm install microcache

```

To install the browser version, download it and include it like that

```html

<script src="microcache.js"></script>

```

API

To instanciate a cache, do the following. You can have as many instances you want.

```javascript

var microcache = new MicroCache();

```

.get(key)

To get a cached asset which is in the cache. Each cached element has a unique key to identify it.

```javascript

microcache.get('foo');

```

.set(key, value)

To set a element value in the cache.

```javascript

microcache.set('foo', 'bar');

```

.contains(key)

To know if a given asset is currently in the cache.

```javascript

microcache.contains('foo');

```

.values()

To return all the elements currently in the cache

```javascript

microcache.values();

```

.getSet(key, value)

To get an element from the cache, if it isnt already present, store it then return it

```javascript

microcache.getSet(key, value);

```

FAQ

Q. what about plain var microcache = {} ? isnt this wrapper overengineering ?
A. i was thinking so too at first. but the syntax of a .getSet() without wrapper was too ugly for my taste :) var a = cache[key] = (cache[key] || value) from @floriancargoet

GoWithTheFlow.js - async flow control with a zen touch

2011-07-17T00:00:00+02:00

GoWithTheFlow.js is a javascript asynchronous flow-control micro library which works in node.js and in browser. It allow to control how your asynchronous code is executed, sequentially or in parallel. Flow() is only 30lines.

How to use it

Let start with a basic example. 2 jobs run in sequence. The first job is a timeout so the result is delivered asynchronously, and a second job is run only after the completion of the first.

```javascript

Flow().seq(function(next){
    console.log("step 1: started, it will last 1sec");
    setTimeout(function(){
        console.log("step 1: 1sec expired. Step 1 completed");
        next();
    }, 1000);
}).seq(function(next){
    console.log("step 2: run after step1 has been completed");
})

```

It will display the following

step 1: started, it will last 1sec
step 1: 1sec expired. Step 1 completed
step 2: run after step1 has been completed

Methods

In order to keep it as simple as possible, Flow has only 2 methods.

.seq(callback) to execute job sequentially

.seq() is used to execute functions sequentially. The callback parameter will be executed only after all previous jobs are completed. The callback signature is callback(next, error, result)

next(error, result) is the function to call when the job is completed. error is to notify an error to the next job. result to notify a result. error and result may be omitted, if so they are considered equal to undefined
error is the error send by previous jobs
result is the result send by previous jobs

for example

```javascript

Flow().seq(function(next){
    console.log("first job");
    next(null, "result1");
}).seq(function(next, error, result){    
    console.log("second job. run *after* first job");
    next();
})

```

.par(callback) to execute job in parallel

.par() is used to execute functions in parallel. The callback parameter is the same as for .seq(). If multiple .par() are declared one after another, they are run in parallel. The first .seq() after them will receive all the error and result in Array. One array item per previous .par()

for example

```javascript

Flow().par(function(next){
    console.log("job foo");
    next(null, "foo");
}).par(function(next){
    console.log("job bar");
    next(null, "bar");
}).seq(function(next, errors, results){
    console.log("job run *after* the completion of foo and bar");
    console.assert(errors.length == 2 && errors[0] === null && errors[1] == null)
    console.assert(results.length == 2 && results[0] === 'foo' && results[1] == 'bar')
    next();
})

```

That's it

Conclusion

GoWithTheFlow.js is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

Javascript Class Inheritance ala vapor.js in 3 lines

2011-07-10T00:00:00+02:00

This post describes a standalone way to add class inheritance in your javascript code. We will do that ala vapor.js, so no dependancy or external framework. A vaporjs inheritance is only 3 lines!

Lets get started, say you got a class animal. It gonna have a constructor and a method talk.

var Animal = function(opts){}
Animal.prototype.talk   = function(){ return 'mumble';  }
Animal.prototype.sleep  = function(){ return 'zzzzz';   }

How to write the inheritance

Now let write a Cat class which inherits from Animal. It will override the animal method talk.

var Cat = function(opts){
    // call the parent class constructor (one line)
    Animal.call(this, opts)
}

// inherit from Animal methods (two lines)
Cat.prototype = new Animal();
Cat.prototype.constructor = Animal;

// override talk method
Cat.prototype.talk = function(){
    return "maow"
}

So a vaporjs inheritance is only 3 lines!

Lets test methods override

Now lets test the result of all this

var cat = new Cat()
console.log("cat sleep as ", cat.sleep());
console.log("cat talk as ", cat.talk());

This will display

cat sleep as zzzzz
cat talk as maow

So .talk() is actually overridden, and .sleep() is properly passed to the parent class Animal.

Lets test instanceOf semantic

Last but not least, the instanceOf operator which is so important for javascript

console.log("Cat instanceof Cat", cat instanceof Cat);
console.log("Cat instanceof Animal", cat instanceof Animal);

will display

Cat instanceof Cat true
Cat instanceof Animal true

So cat object is an instance of the class Cat and of the class Animal which is the good semantic for instanceOf.

That's all folks. have fun.

Parisjs 7 slides

2011-05-26T00:00:00+02:00

parisjs #7 was fun as always. I did a flash talk on shorttag.js and presented what i did on pacmaze experiment this month. Here are the slides i used.

Btw ryah is coming to paris on june 8th, register.

Webgl London Meeting

2011-05-25T00:00:00+02:00

Yesterday, the first london webgl meeting happened! people interested in webgl all in a same place and time, it was nice. see reports here and here.

I talked about pacmaze experiment, here are the slides i used.

A nice picture from @tbx. I love the packy checking on me while im presenting him to audience :) reccursive gamification ftw!

cancelRequestAnimationFrame() For Paul Irish requestAnimationFrame()

2011-05-18T00:00:00+02:00

Paul Irish recently wrote requestAnimationFrame for smart animating. It is a polyfill so people can start use requestAnimationFrame() today and still be future proof.

This post is about its counterpart, cancelRequestAnimFrame(). It cancels a requestAnimationFrame(), like clearTimeout cancels a setTimeout.

Step 1: how to get the code

First include the cancelRequestAnimFrame() code in your page.

```javascript

window.cancelRequestAnimFrame = ( function() {
    return window.cancelAnimationFrame          ||
        window.webkitCancelRequestAnimationFrame    ||
        window.mozCancelRequestAnimationFrame       ||
        window.oCancelRequestAnimationFrame     ||
        window.msCancelRequestAnimationFrame        ||
        clearTimeout
} )();

```

Add requestAnimFrame() too. It is a slightly modified version of paul's to return setTimeout() handle.

```javascript

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ callback, /* DOMElement */ element){
            return window.setTimeout(callback, 1000 / 60);
        };
})();

```

Step 2: how to use it

Here is a possible way to use it. Show, dont tell, here is a live demo on jsfiddle

```javascript

// to store the request
var request;

// start and run the animloop
(function animloop(){
  render();
  request = requestAnimFrame(animloop, element);
})();

// cancelRequestAnimFrame to stop the loop in 1 second
setTimeout(function(){
    cancelRequestAnimFrame(request);                
}, 1*1000)

```

About requestAnimationFrame

In the past months, much has been done for web graphics. Among them, requestAnimationFrame() is used to make smoother animation while not wasting useless rescources when not visible. The spec is making good progress, and several implementations are already deployed.

a trip to html5 and game - talk at parisjs

2011-04-28T00:00:00+02:00

Yesterday i was at parisjs talking about html5 and game. I presented games from the Pacmaze Experiment and talked about html5 technology in it. Here are the slides i used.

Buddymaze - First Personn Shooter in WebGL

2011-04-28T00:00:00+02:00

Buddymaze is a clone of midimaze, an old game where people shoot at each other. You can find it as standalone webapp or in chrome web store. This is the second game in the pacmaze experiment announced here, the first one being pacmaze. This version is rather rought, i will keep you updated. Considere it as a early beta.

Pacmaze v2 - Event More WebGL in Pacman

2011-04-20T00:00:00+02:00

Pacmaze v2 is the second version of pacmaze in the pacmaze experiment announced here.

Compared to pacmaze v1, it provides much nicer 3D effects with lot of camera moves. Use pageUp/pageDown or C/V keys to change the camera positions. It is a little easier on the user too. In case you dont have WebGL, you may watch a screencast... better than the original with a alert(), couch :) Show, dont tell, here is the screencast

Other improvements were done this week, but they were either not yet ready or not visible on the screen... According to pacmaze experiment schedule, i should release a new game every 2 weeks, so another game is due next wednesday. Pacmaze v2 is just an improvement of last week release.

tl;dr;

Pacmaze is a pacman in WebGL. You are a pacman trapped in a maze. You need to eat all the pills to get out, and avoid the ghosts in the process. Well... you known pacman. You can find it as standalone webapp or in chrome web store.

wget thinks github.com is a threat

2011-04-15T00:00:00+02:00

This is just a little post on a oddity. As a coder, i use github and wget everyday or close. When i do, i see this message.

$ wget https://github.com/jeromeetienne/nmod/raw/master/nmod
...
ERROR: certificate common name `*.github.com' doesn't match requested
host name `github.com'.
To connect to github.com insecurely, use `--no-check-certificate'.

This message puzzles me quite a bit... wget thinks github is a threat ... and requires an explicit action from you (adding --no-check-certificate) to be sure you are willing to take this risk . The risk of downloading files from github... ok lets admit it, this is ridiculous. wget distrusting github is like ... ls distrusting cd :)

According to github, this is actually a wget bug which has been reported and fixed but not release , and point to a bug from 2007!!!! Dunno if this is true, or who is at the best place to fix the issue... and the purpose of this post is not to do finger pointing.

Lets note that everybody is from open source world here. wget is from gnu, not only under gpl, but even got his copyright assigned to fsf. What to say about github and opensource ? well they got millions of repositories and most of them are open source software.

This post is not meant to be a rant. More to put the light on an oddity. something that i see as a symptom of communication issue in the opensource community.

Let do better! :)

jquery.acewidget - a jQuery plugin to easily embed ace

2011-04-15T00:00:00+02:00

AceWidget jQuery Plugin

jquery.acewidget.js is a jQuery plugin for acewidget. AceWidget is a widget which make ace /bespin trivial to embed in your pages. The Vision is to be super simple to embed and have no server to setup. It provides the whole official embeded api. The code is available on github under MIT license. That's it. No fuss no muss.

Show dont tell, a demo of acewidget and a example of jquery.acewidget

How to use it

First you include the plugin itself in a usual script

<script type="text/javascript" src='jquery.acewidget.js'></script>

Then create a DOM element which gonna contains ace widget, say a div

<div id="editor"></div>

Then you create the ace widget in this container by

var acewidget = jQuery('#editor').acewidget();

You wait until it is loaded in your DOM

acewidget.bind('load', function(){
    /* you start using it here */
})

After that you use it with the normal ace API

API

to set a new text

acewidget.setValue("foobar", function(){
alert("setValue "+result.status)
})

The callback is optional' and notified when the action is completed. It is jsend compatible.

to get the current text

acewidget.getValue(function(result){
    alert("getValue "+result.status+" text:"+result.data.data)
})

to set the tab size

acewidget.setTabSize(8, function(result){
    alert("setTabSize "+result.status)
})

to be notified when the acewidget is loaded

acewidget.bind('load', function(){
    alert('acewidget is loaded')
})

Pacmaze V1 - a Pacman in WebGL

2011-04-13T00:00:00+02:00

tl;dr;

Pacmaze v1 is a pacman in WebGL. You are a pacman trapped in a maze. You need to eat all the pills to get out, and avoid the ghosts in the process. Well... you known pacman. You can find it as standalone webapp or in chrome web store. Pacmaze v1 is the first game of the pacmaze experiment. Show, dont tell, here is a screencast

Pacmaze Experiment

What is it ? The pacmaze experiment is the fancy name for my trip discovering gamedev field. It is an experiment i wish to try. The rule is simple. During 4 months, i am commited to work in a publish early, publish often mode. Twice a month, i will publish a new game, or a significant improvement of a previous one, on the second and the fourth wednesday of each month. Pacmaze V1 being the first of the serie.

This is the current plan... I know the schedule is tight, but this is part of the challenge. We will see how it goes along the road.

Pacmaze Experiment Origin

Pacmaze v0 was the first multi-player first person shooter using html5 power with WebGL and WebSockets. It started on 14 march 2011 with a 36h code rush. It was a proof-of-concept. Its purpose was to know if the needed technology was available on today browsers. Good news! it is :)

Obviously to code a multiplayer fps in 36h, you have to cut a lot of corners. Pacmaze v0 is ugly and got a crappy gameplay. Additionnaly, a code rush was nice and fancy but it doesnt produce a stable code base. I ended with a program which has been hacked rapidely. On top i was a beginner in the gamedev field. So i spent some time to refactor the code from 36h hack to something more stable.

I did many visual enhancements, improved the gameplay quite a bit... and then you got Pacmaze v1. have fun :)

jquery.qrcode - jquery plugin for pure browser qrcode generation

2011-04-07T00:00:00+02:00

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code.

Show, dont tell, here is a example

How to Use It

Let me walk you thru it. First include it in your webpage with the usual script tag

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

Then create a DOM element which gonna contains the generated qrcode image. Lets say a div

<div id="qrcode"></div>

Then you add the qrcode in this container by

jquery('#qrcode').qrcode("this plugin is great");

This is it. see it live.

Conclusion

jquery.qrcode.js is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

MicroEvent.js - micro event emitter in 20 lines

2011-03-22T00:00:00+01:00

MicroEvent.js is a event emitter library which provides the observer pattern to javascript objects. It works on node.js and browser. It is a single .js file containing a 20 lines class for a total of 321-bytes after minification+gzip.

How to Use It

You need a single file microevent.js. Include it in a webpage via the usual script tag.

```html

<script src="microevent.js"></script>

```

To include it in a nodejs code isnt much harder

```javascript

var MicroEvent = require('./microevent.js')

```

Now suppose you got a class Foobar, and you wish it to support the observer partern. do

```javascript

MicroEvent.mixin(Foobar)

```

That's it. The repository contains an example in browser and an example in nodejs. Both use the same code in different contexts. Let me walk you thru it.

Example

First we define the class which going to use MicroEvent.js. This is a ticker, it is triggering 'tick' events every second, and add the current date as parameter

```javascript

var Ticker = function(){
    var self = this;
    setInterval(function(){
        self.trigger('tick', new Date());
    }, 1000);
};

```

We mixin MicroEvent into Ticker and we are all set.

```javascript

MicroEvent.mixin(Ticker);

```

Now lets actually use the Ticker Class. First, create the object.

```javascript

var ticker = new Ticker();

```

and bind our tick event with its data parameter

```javascript

ticker.bind('tick', function(date) {
    console.log('notified date', date);
});

```

And you will see this output:

notified date Tue, 22 Mar 2011 14:43:41 GMT
notified date Tue, 22 Mar 2011 14:43:42 GMT
...

Motivation

I needed a event emitter in js... something generic which works on browser and server, cross browser. The solutions i found were too complex for my taste.

When i have seen John Resig micro templating or simple inheritance, i loved it. It is simple, short, self contained, easy to understand... so elegant. i thought "this is no more a dependancy because i could maintain it if needed". Now i try to apply those principles to my own work.

Conclusion

MicroEvent.js is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

Pacmaze V0 - First multi-player first person shooter on html5

2011-03-21T00:00:00+01:00

Last week, i started to do gamedev. During a code rush, i did pacmaze v0 in 36h!!! Then i slept a lot and published it as chrome application (This way, i didnt have to care about cross-browser compatbility out of time and lazyness i admit :)

Pacmaze v0 is a multi-player first person shooter. Everybody joins in the same maze, and they shoot at each other. Lets the best win... except that nobody dies because i forgot to code death :)

To my knowledge, Pacmaze v0 is the first multi-player first person shooter using html5 power with WebGL and WebSockets. You can find the game as standalone here. have fun. I certainly had fun writing it :)

Initial Post

2011-03-10T00:00:00+01:00

Trying to blog again. Here is my first post.

Up to now i didnt considere my blogging seriously. My blog posts were kinda PostIts to me, some random texts that i have written not to forget. So the targeted reader was me, and if it helps people outthere, all for the best, but not the primary purpose.

This blog is using jekyll and will be hosted at notes.jetienne.com