May 122012
 

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.

Continue reading »

May 102012
 


Click on the image to open it!

Wow! what’s this?

It’s a 2D scene containing 2 lights and 13 different objects rendered in real-time by a Javascript library I made called Illuminated.js.

The library is designed to add some awesome effects to your existing applications. Adding a cool atmosphere for your applications and games can make the difference!

Try the editor and Get the source code.

In this article, we will introduce the basic usages of Illuminated.js and APIs, and then explain how the engine works step-by-step.

Continue reading »

May 032012
 


I’m currently working on the User Interface of a scene editor for my Illuminated.js library with some color and alpha picker.

HTML5 now have the <input type="color" /> and <input type="range" /> which is nice. It works on Chrome and there are some polyfills to make it working on older browsers.

We will now see how we can easily retrieve a rgba color from such an UI, regardless of the color format given by the color picker and combine the alpha component from the alpha range picker.

We can implement an anythingToRGBA converter in 10 lines of Javascript!

Continue reading »

Apr 262012
 

Did you know browsers now have a built-in HTML tag for making progress bar?

(progress is not supported)

How cool is that!

It is perfect for making web applications loading bar in just one line of HTML and a few Javascript code.

A progress tag will be displayed on recent browsers with a OS-native progress bar representing a loading. Like many HTML tag, if it is not supported, it fallbacks nicely by displaying its inner content. This fallback content should either be your own designed progress bar or simply display a percentage.

It is today supported by Firefox 9+, Chrome, Opera and IE10.
Continue reading »

Apr 092012
 

A long time ago, video games were only two-dimensional. Of-course this was due to our poor hardware capabilities, but when computers became faster and faster 3D games appeared in mass.
Did it kill 2D games? Nope. They continue to exist because it offer a different gameplay and are easier to make. Maybe also a bit because we are nostalgic of old-school games!

We can distinguish two kinds of 2D games:


Tile based games where the game world is simplified with a big grid – each grid position has some properties.
A map editor is not always needed for tile based games, because the map can be straighforward to represent and maintain like in a Bomberman or in a Pacman. A simple editor is generally used to make graphism with sprites.


Non-tile based games, which can be called “polygon based games” are more complex.
In such game, like a Worms or a Sonic, it’s totally crazy to write the map by hand (objects positions, polygons coordinates, …). The alternative, is not to use predefined maps, but on-the-fly generated maps which doesn’t fit every games.

Making the game engine is one thing, but designing the game levels can be one big work too and we need tools to make it easier.

Continue reading »

Mar 172012
 

One week ago, I’ve released a technical web experiment featuring a collaborative real-time Paint-like application I’ve called Play Painter. It has been made with Play Framework 2 and rely on WebSocket and HTML5 Canvas Javascript APIs.

Thanks to everyone having tested my Play Painter experiment, you helped me figure out bugs and bottlenecks and to benchmark the application running on my tiny server.
The first version of Play Painter has been improved with some optimizations.

Explanation…

Continue reading »

Mar 122012
 



I will show you how to implement a multi user paint using latest web technologies like Play framework (version 2), HTML5 Canvas and WebSocket.

Let’s see how to implement this from scratch in about 30 minutes…

and read how I’ve improved this initial version…

or try the demo below…

Continue reading »

Mar 062012
 


If you have ever made a chart library in your life, you’ve probably asked yourself how to find the best scale for the grid in order to have nice values to display in the axis.

Most of the time, data ranges are unknown, hence we need to adapt the grid step to provide the best display.

Check this out

Let’s explain the algorithm…

Continue reading »

Feb 292012
 

Many animation libraries are today using easing functions – functions of time returning a progression percentage value. This is required to perform such cool effects:


But most of these libraries implement a huge collection of functions. We will see how we can generalize them with bezier curves.

Continue reading »

Feb 042012
 

In this article, we will focus on the power of CSS as a descriptive language, current template system approach and their problems with modularity and extensibility, and try to mix both features from the concept to a concrete implementation.



Continue reading »