@GreWeb

Qep1.: Q, a Promise library

AWOP javascript promise Q library

A World Of Promises, episode 1

This article is the first of a series of small articles on the Q Javascript library and its eco-system. This article is a brief introduction to Q Promises.

Q is a Promise library in Javascript created 4 years ago by Kris Kowal who is one of the main contributor to CommonJS where we can find the Promises/A specification.

Q is probably the most mature and powerful Promise library in Javascript which inspired a lot of libraries like jQuery. It exposes a complete API with, in my humble opinion, good ideas like the separation of concerns between a "Deferred" object (the resolver) and a "Thenable" Promise (the read-only promise).

This article is a brief introduction to Q Promises with some examples. For more information on the subject, I highly recommend reading the article "You're Missing the Point of Promises" and the Q implementation design README.

glsl.js, a Javascript + GLSL library = DRY & efficient

gamedev javascript library GLSL WebGL

glsl_mario

TL;DR. WebGL is super powerful and efficient. This library abuses this power for efficient 2D.

glsl.js is a subset of a WebGL library which focuses on making the GLSL (OpenGL Shading Language) easy and accessible for vizualisation and game purposes (2D or 3D).

glsl_pong

Why?

WebGL is a very low level and stateful API. Actually the WebGL API is the OpenGL API.

I wanted to make a graphic library where you wouldn’t have to know about this API but still have access to the powerful OpenGL Shading Language called GLSL.

Do you know glsl.heroku.com? It’s a cool platform for demoscene where you can experiment some nice effects in GLSL. My library extends this concept of rendering in one whole fragment shader (which takes the plain canvas) but also provides a way to inject your own Javascript variables.

DRY

WebGL is not DRY at all, you always have to repeat yourself both on the GLSL and on the Javascript part (especially for synchronizing variables).
Worse than that, you have to know in your Javascript code what are the GLSL types of every variable to synchronize.

How boring is that:

// Synchronizing the new values of 2 variables in pure WebGL.  

var myInt = 1;  
var myIntLocation = gl.getUniformLocation(program, "myInt");  
myInt  ;  
gl.uniform1i(myFloatLocation, myInt); // 1i means one integer  

var myVector2 = { x: 1.3, y: 2.4 };  
var myVector2Location = gl.getUniformLocation(program, "myVector2");  
gl.uniform2f(myVector2Location, myVector2.x, myVector2.y); // 2f means float[2]

glsl.js provides a DRY and simple way to synchronize Javascript variables.

First, the library will handle for you the UniformLocations.

More important, and unlike the WebGL API and many WebGL libraries, you will never have to define the type of your variables from the Javascript with glsl.js! You just define it once in your shader!

How it works behind is the framework will statically parse your GLSL and infer types to use for the synchronization. The right gl.uniform* function is called by Javascript reflection.

It now simply becomes:

// Set the values of 2 variables in glsl.js  
this.set("myInt", 1);  
this.set("myVector2", { x: 1.3, y: 2.4 });  
// ... see also this.sync() and this.syncAll()

Be careful with JS numbers!

float javascript

It is common in Javascript to have unexpected behaviors, but this one is particulary vicious.

10000000000000000 === 10000000000000001

Javascript doesn’t have integer type but lets you think it has. parseInt and parseFloat built-in functions, the fact that “1″ is displayed as “1″ and not as “1.0″ (like many languages) contribute to the general misunderstood.

In Javascript, all numbers are floating numbers and are prone to floating point approximation.

When you write var i = 1;, and you console.log it, Javascript is nice, you obtain 1 and not 1.0000000000000001.

But you can experiment that, in Javascript, 1.0000000000000001 === 1 is true…

I hear you, telling me that this sounds OK, floating point approximation rules, right?

But the same thing occurs for big numbers:

10000000000000000 === 10000000000000001

Oh F**K !

[edit] where in python:

Termination of loops

The following is worse:

is logging 10000000000000000 forever!

Because 10000000000000001 can’t exist in Javascript with approximations, 10000000000000001 is 10000000000000000, so you can’t increment this value, and you are stuck in this crazy f**king loop.

Conclusion, Program termination proof sounds hard to reach in Javascript!

Zound, a PlayFramework 2 audio streaming experiment using Iteratees

audio iteratee playframework hackday

ZOUND

Last Friday was HackDay #7 at Zenexity, and we decided to work on a real-time audio experiment made with Play Framework. The plan was to use an audio generator (JSyn, an audio synthesizer), encode the output and stream it all using Play Iteratees to pipe everything in real-time.

First of all, let’s highlight some interesting part of the project, then get into some of the details.

Thanks to @Sadache for his Iteratee expertise, we ended up with a simple line of code that does all of the hard work:

val chunkedAudioStream = rawStream &> chunker &> audioEncoder

You can think of the &> operator as the UNIX pipe |. So we simply take the rawStream, chunk it with a chunker and encode it with an audioEncoder.

Now, rawStream is the raw stream of audio samples (numbers between -1 and 1) generated by the audio synthesizer. Next, the chunker buffers a data stream into chunk of bytes. For instance, if you send data stream at 1Kb/s to a 10Kb chunker, it will output one chunk of size 10Kb every 10 seconds. And finally, the audioEncoder takes audio samples and outputs encoded bytes implementing an audio format (like WAVE).

We can then make a broadcast of the stream:

val (sharedChunkedAudioStream, _) =   
  Concurrent.broadcast(chunkedAudioStream)

And then the sharedChunkedAudioStream is now a shared stream for every consumer (clients). All that’s left to do is to stream it over HTTP:

def stream = Action {  
  Ok.stream(audioHeader >>> sharedChunkedAudioStream).  
     withHeaders( ("Content-Type", audio.contentType) )  
}

The >>> operator means “concatenation”, so here we’re concatenating the audio header (given by the format like WAVE) with the current chunked audio stream. We also send the right HTTP Content-Type header (like “audio/wav” for WAVE).

Another interesting part of the project is the multi-user web user interface: allowing users to interact with the sound synthesis.

Using @mrspeaker‘s audio synthesis expertise, we started creating a synthesizer generator – 3 oscillators, various wave shapes, frequency and volumes, and finally flowing through a high pass filter before entering our “rawStream” above.

Thanks to the Play framework goodness, this audio stream can be both consumed by the web page with an HTML audio tag, and with a stream player such as VLC! Ok, that’s the project – let’s have a closer look at some of the concepts…

How I learned Backbone.js, Three.js & GLSL in one week

gamedev GLSL WebGL

Last week was the 7dfps challenge, an open challenge where participants had to make a FPS in only one week. Such contest are very very interesting for those who want to experiment with things. Challenging yourself is IMO the best way to learn new things. You may also know the famous “Ludum Dare” contest.

I learned to use Backbone.js and Three.js (a famous library on top of WebGL) in only one week, so you have no excuse to not be able to do the same!

-> You can make games!

“If Lawnmower Man f****d Tron on the bonnet of a tank”
YouBigNugget

I’ve only used web technologies, no need of any plugin, just a recent browser like Chrome / Firefox.

This is the result:

and you can play it here:

Play the game

Minimize your Javascript files with cURL

javascript linux

I’ve always been fascinated by the power of using existing web applications as external tools: you don’t need to install anything on your computer but you can rely on the web.

We can externalize the intelligence of applications in servers and easily make updates, while having any terminal consuming them with a minimal OS environment.
Cloud or whatever you call it, it’s awesome.

WOA is our common architecture for making applications. Clients of web servers can be anything you want, not only desktop browsers, but also mobiles, tablets, other web services, and… command-line!

And today, as an example, we will use Google Closure Compiler web service to minimize a Javascript file with only cURL.