I've done a talk at Gamelier last Monday about how to think the rendering in a more functional way.

Abstract

Most of today 2D graphics libraries restrict us to a set of primitive procedures (drawRect, drawCircle, drawImage,...) but when it comes to bring more interesting features you tends to be stuck with it. Let's see how we can just do things with a function of (Vec2 => Color).

This is the way (WebGL) GLSL has already took and the presentation examples will be built on it. Let's see what are the multiple benefits of taking that paradigm of rendering.

Talk

Open the slides

Checkout more presentations at Gamelier.org

Open the presentation / AZERTY version

While continuing to experiment with Web Audio API and GLSL, I've made a game called Timelapse for js13kgames (an HTML5 game competition where entries must be less than 13 kb zipped).

This article is a postmortem overview of my game development which will try to explain what was my game mecanism ideas and show you some interesting parts with screenshots, audios and source code snippets.

The Game

Open the game on js13kgames / github.

The game intends to work on Desktop and Mobile. However, Chrome is recommended (Firefox Aurora also supports it but audio is a bit wrong, but Mozilla devs should improve this soon). Today, it works on Android Chrome Beta on a Nexus 4, unfortunately with some clicks in the audio (Web Audio API is bleeding-edge).

Here is Beez, a web real-time audio experiment using smartphones as synthesizer effect controllers.

This is our second Web Audio API experiment made in one Hackday at Zenexity.

This time, we were much more focused on having the best latency performance: we used the bleeding-edge WebRTC technology, which allows you to link clients in Peer-to-Peer instead of a classical Client-Server architecture.

• The project on Github
• Test it now! (Chrome)

Live demo of the Hackday application

Bonus for the one who recognizes the melody :-)

The main principle of Frequency Modulation (FM) is to pipe an Oscillator (the Modulator) into the frequency of another Oscillator (the Carrier).

This article will explain to you how FM Synthesis works with interactive demos. In the meantime, all demos are implemented with the brand new Web Audio API, so feel free to hack the code for your own purpose.

This article will also introduce some Audio concepts like LFO, Envelope and Finetuning.

I've recently implemented a very first FM in ZOUND live - a HTML5 collaborative audio tracker, giving much more powerful Synthesizers (see in the following video).

(here is the implementation of that FM)

Here is a preview video of the Work In Progress development of ZOUND live, the collaborative modular audio tracker built with bleeding edge web technologies: Web Audio API, Web MIDI API, WebSocket & Playframework.

N.B. In the video, I've used the nanoKONTROL2 for changing some properties in real time and using the MIDI API.

If you are interested by the project, fork it on Github.

More to come, stay tuned!

Last week, I initiated, with my Zenexity Hackday team, "ZOUND live" following the previous "ZOUND" experiment but being much more ambitious this time: using both the Audio API, the new MIDI API and electronic music software experience, we start our own web collaborative audio modular tracker.

Live demo of the Hackday application

A World Of Promises, episode 3

This third article on Q is a little parenthesis to the Qep articles series, featuring the requestAnimationFrame Javascript function and its general usage, and QanimationFrame, its Promisified version used as a "wait for DOM to be ready" API.

A World Of Promises, episode 2

This second article on Q will introduce you how to easily turn a callback API into a promise API using Deferred objects. It will also present the new W3C specification of Promise and finish with the implementation of Qimage, a simple Image Promise wrapper.

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.