Leman’s Shores: Timelapse Around The Lake

October 13, 2014  |  No Comments

Battleground Engine: First Demo!

December 1, 2012  |  No Comments

Here is a first demo of my JavaScript game engine. Special thanks to the Reddit community for their great feedback.

First demo of Ariane, a JS pathfinder

May 16, 2009  |  , ,  |  4 Comments

Here is the first demo of Ariane, my JavaScript pathfinding tool.

What’s a pathfinder?

Well, I’m currently making an awesome JavaScript game. In this game, the engine will have to handle the movements of dozens of characters on a map. Now, if I want these creatures to act in a realistic way, there is a bunch of thing I need to simulate to make them believable.

First, they should be able to think, or at least give the impression that they are thinking. This includes the ability to solve philosophical questions such as: should I run frantically to the player and try to eat his brain, or should I not? (spoiler: yes. zombies.)

But now that the decision has been taken, our creature needs to actually find a way to the player. This is trickier than it looks, and this is Ariane’s job, called pathfinding (another tool is under construction for the decision-making part).

The simplest way to solve this problem would be for our creature to move directly toward the player, and to try to go around any eventual obstacle. While this solution could be adequate for an undead, there are situations where a bit more intelligence is expected.

So how do we solve this problem?

We’re going to use what is called the A* algorithm (pronounced “A star”). This magic formula allows us to find a shortest path from point A to point B on our map, avoiding any obstacles in the way.

Below is a cool animation from Wikipedia on this subject.
a* algorithm

Ok, I didn’t understand it either.

More seriously, Ariane uses an efficient implementation of this algorithm to quickly compute any reasonably-long path. I’ve also implemented two useful features: parallel processing (multiple characters can “think” at the same time) and path priorities (eg to make enemies on the player field of view more reactive than the one far away).

What am I seeing in the demo?

Here we ask Ariane to compute two paths: from the top left to bottom right (in blue), and from the bottom left to the top right (in green). The points appearing on the map are the locations being analyzed.

The paths are avoidings both the red walls and the grey noise to simulate a life-like situation (the noise could represents eg trees in a forest).

The computation may seem slow, but the map displayed is a scaled down version of the actual game map. The idea is to find a path on a smaller map – which is faster, and then to scale it up to the real size. The scale being x15, the game map in the demo would be 6000×6000 px.

More info on pathfinding

If you’re interested in learning more about pathfinding, here are the two main resources from which I’ve learned everything: this article from GameDev.net is an excellent introduction, and Amit’s A* pages are also a very good reference, although more advanced.

Canvas Cheat Sheet

March 6, 2009  |  , ,  |  No Comments

Good news for everyone having fun with HTLM5 canvas element: the prolific Jacob Seidelin (from Nihilogic) has put together a very nice cheat sheet:

Canvas cheat sheet

“The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.”

Get it here! Direct link to PNG, PDF versions.

MooFm: Last.fm data at your fingertips

March 2, 2009  |  , ,  |  4 Comments

I came accross some very neat Last.fm stats visualizations some times ago, and wanted to try out some ideas in JavaScript (probably with Processing.js). I couldn’t find any efficient way to use their API from JS, so I made MooFm…

What is it?

MooFm is a little (<5Ko) MooTools plugin making access to this data as easy as it can be.
It lets you get the stats asynchronously without having to deal with query concatenation or Ajax calls.

How do I use it?

Let’s say we want to get the most popular album of Nirvana. Taking a look at the last.fm API guide, we find the documentation for the artist.getTopAlbums method.

// just give MooFm your API key...
var moofm = new MooFm('b25b959554ed76058ac220b7b2e0a026');
var callback = function(resp) {
   // will output "Nevermind"
// methods' name and params are the same as in last.fm doc
moofm.artist.getTopAlbums({'artist':'Nirvana'}, callback);

Couldn’t be simpler, right? All Last.fm readonly methods are accessible this way.

Getting started

To get started you’ll need a recent version of MooTools (obviously), the MooFm.js library and its proxy.
Now get an API key (free), and you’re good to go.

Demo time!

Here is a little demo I put together as an example.

MetaCoding: Hello World!

November 20, 2007  |  ,  |  No Comments

Unfortunately this project has been aborted. You can still see a limited demo of our work here. Don’t hesitate to contact us if you have any interest.

A year ago a friend came up with a brilliant idea: making an online IDE, where developpers could write and compile their code from their browser.
As first year students, this was a pretty ambitious project. But we realized, when imagining the potential of such a web application, that it’d probably be worth trying. My friend was getting along pretty well with the .NET Framework, and I already had some solid notions of JavaScript, so we put ourselves to the task. After months of hard work, we’ve finally release a first version of our work.

Why should I use it?

The concept of online IDE may looks strange : does anyone really needs a web-based application to program? It’s often useful to have access to your mails or to your calendar when you’re not on a computer of your own (say, at a library/university). But how often do you find yourself in need for a compiler, but unable to use or install Vim or Emacs?

Beginners are one answer to this question. Our website allow anyone to make his first step in the programming world in the easiest way possible: no installation needed, a simple interface, and yet the possibility to experiment with a lot of languages.

Social Programming

But our true potential lays in the fact that we are online. Here are some of the exciting features we are working on to take advantage of this position:

Live Help: we’re planning on implementing a chat in our interface (├ála Gmail). It would allow you to communicate with another member of your team or with a public room, to ask questions or organize you work.

Shared Snippets: users will be able to create and share pieces of code, which would then be rated by the community. Anyone (or any member of your team, if you want to keep your snippet private) would then be able to use it at will.
The idea in the long term is to generate a complete snippet library, flexible and easily searchable.

CVS Integration: CVS allows you to keep your files up to date even if you’re working in a large team. It will also allow you to use MetaCoding seamlessly: just commit your files and the online copy of your project on our server will be updated.

As a conclusion MetaCoding’s goal is to complement your current editor, giving you access to different kind of tools. You can code under Visual Studio, and open your project on our website if you’re stuck with a bug and need help, for example.

Still in early Beta…

Well, as you would have noticed none of these fancy features is implemented yet. The current version is only a skeleton of what we want MetaCoding to be.
So what do we need know? Time and above all, feedbacks. We need to know what you, developers, think about our service and what you’d like to see and not to see.

If you’re interested in this project, you can access this demo to get a glimpse of the interface. To try the compiler, you’ll need to register (it’s quick) in order to create a real project.