Tutoriel : étendre une classe en javascript.

Publié le 21 juin 2011 par Joris Calvat

La librairie javascript Prototype propose une méthode pour copier les propriétés d’un objet vers un autre : Object.extend(dest, src) et permet de simuler l’héritage.

Mais il existe un autre procédé dont la syntaxe et les possibilités sont beaucoup plus proches de ce que l’on pourrait faire en java et qui ne requiert aucune librairie. Il suffit simplement d’adopter la méthode que voici :

1 – Je crée ma classe principale

Pour l’exemple, je crée la classe ‘Animal’ que je vais étendre par la suite.
Un test sur la présence d’arguments est nécessaire.

function Animal(name)
{
if(arguments.length>0)
{
this.name=name;
}
};

Animal.prototype.talk=function()
{
alert(‘I am the animal ‘+this.name+’!');
};

J’instancie mon objet à partir de ma classe

var myPet=new Animal(‘Mickey’);
myPet.talk();

J’obtiens à l’écran

>> I am the animal Mickey!

2 – Je crée ma classe dérivée

Pour créer une classe dérivée ou étendue, j’utilise le prototypage de javascript qui va me permettre de copier toutes les méthodes d’une classe dans ma nouvelle classe.

Cat.prototype = new Animal();

Je peux maintenant redéfinir les méthodes de ma nouvelle classe.
A commencer par le constructeur.

function Cat(name, color)
{
Animal.apply(this, arguments);
this.color=color;
};

En utilisant la fonction apply() de ma classe héritée, j’exécute son constructeur en lui indiquant le contexte actuel (this) et en lui fournissant les paramètres reçus (arguments).

Je peux maintenant redéfinir mes autres méthodes si nécessaire.

Cat.prototype.talk=function()
{
alert(‘Miaou ! I am ’+this.name+’ the ‘+this.color+’ cat!’);
};

J’instancie mon objet à partir de ma classe dérivée

var myCat= new Cat(‘Tom’, ‘grey’);
myCat.talk();

J’obtiens à l’écran

>> Miaou ! I am Tom the grey cat!

Publié dans Tutoriels | Laisser un commentaire

Hairstyletool, le pixel art de la coiffure

Publié le 9 juin 2011 par Joris Calvat

Bien qu’un coiffeur réputé de ma ville natale porte le même nom que moi, je n’ai aucun lien avec le monde de la coiffure. C’est au cours de mon premier job que j’ai pu rencontrer une personne qui travaillait à son temps perdu sur une application de coiffure virtuelle.

Je trouvais l’idée originale pour l’époque. Il utilisait la technologie Flash d’adobe. Son application permettait de superposer des coiffures prédécoupées à la photo de son choix. Actuellement, c’est toujours le même principe qui est utilisé par les logiciels du genre.

La limite de cette technique repose sur la quantité de coiffures prédécoupées disponibles dans le logiciel. J’avais bien pensé à créer un programme qui dessinerait à la volée les coupes de cheveux en fonction de différents paramètres. Mais la technologie de l’époque ne le permettait pas.

En créant Hairstyletool, j’ai cherché à mettre en application ce dernier concept. Avec l’apparition de la balise « canvas » de HTML5 et l’API Javascript du même nom, l’accès direct aux pixels d’une image est devenu possible. Tout cela au sein du navigateur et sans l’utilisation d’un plugin tel que Flash ou JAVA.

Le cœur de Hairstyletool est un moteur de rendu conçu de toute pièce. Faisant appel à de nombreux calculs, le mélange des pixels de chaque création est unique. Mais ce procédé à lui aussi ses limites : celles du modèle qu’il représente. Malgré le nombre conséquent de paramètres modifiables par l’utilisateur, tout n’est pas possible. Par exemple les tresses et les couettes ne sont pas modélisées.

Comparé aux applications utilisant l’ancienne méthode, je trouve le concept d’Hairstyletool plus interactif, voir plus ludique. Il me semble que le résultat s’approche plus de ce que l’on peut appeler un logiciel de simulation. Il reste tout de même un problème majeur : le temps de calcul de Javascript. Mais heureusement, les éditeurs font d’énormes efforts pour rendre nos navigateurs plus performants ! A chaque nouvelle version, je constate un gain de vitesse conséquent. Je vous donne rendez-vous à la version 20 de google Chrome pour en reparler…

Publié dans Développement | Laisser un commentaire

Wartone Spacebattle

Publié le 4 juin 2011 par Joris Calvat

Si les navigateurs ne sont pas tout à fait prêts, le moment est venu pour nous autres développeurs de nous préparer à la 3ème dimension.

Je suis parti en quête de 3D dans un petit projet personnel de jeu vidéo avec un objectif simple: tester la technologie WebGL. Il s’agit d’une API incluse au navigateur permettant d’accéder via javascript à des fonctionnalités graphiques 3D.

Armé de mon moteur de recherche favori, je découvrais avec enthousiasme l’existence de librairies javascript dédiées à WebGL. Chacune d’entre elles faisant l’éloge de ses capacités, la sélection n’a pas été simple. Après quelques déboires avec C3DL, je me suis orienté vers GLGE.

GLGE n’est probablement pas la mieux documentée, mais c’est certainement la plus rapide que j’ai pu tester. Et pour créer un jeu vidéo, la vitesse compte énormément. Il est vrai qu’à certains moments j’ai du mettre les mains dans le code de la librairie. Cette maudite caméra ne prenait pas le bon axe vertical pour s’orienter automatiquement vers un point donné. Ce n’est qu’un exemple mais je dois dire que ces librairies n’ont pour le moment pas la maturité d’un JQuery.

Au final, le plus difficile est de trouver un concept de jeu.
Prenez un jeu vieux comme le monde. Changez les règles, triturez-le, tordez-le dans tous les sens et vous obtenez un nouveau jeu. D’autant plus que grâce au virtuel, les limites sont moindre. Me voici donc parti pour créer un jeu d’échec spatial !

La recette est complexe mais les outils et les ingrédients sont gratuits.

Les outils :

  • Eclipse
  • Blender
  • Gimp

Les ingrédients :

  • HTML
  • CSS
  • Javascript avec beaucoup de GLGE et un peu de JQuery

Après une première version uniquement deux joueurs (humain contre humain), je me suis penché sur l’intelligence artificielle. Ce ne fut pas une mince affaire sachant que les probabilités et les statistiques se sont pas mon fort.

Choisissant la simplicité, je me suis orienté vers un système de points au cas par cas. Le principe est le suivant : chaque cas est étudié l’un après l’autre. Si pour un cas, des points sont cumulés, l’action qui cumule le plus de points est effectuée. Sinon on passe au cas suivant. Reste une petite part au hasard lorsque plusieurs actions ont le même nombre de points.

Au final, le résultat est à la hauteur de ce que j’imaginais réaliser. L’intelligence artificielle est perfectible mais l’objectif en terme de connaissances est largement atteint.

Le jeu vidéo est disponible sur http://spacebattle.wartone.com

 

Si les navigateurs ne sont pas tout à fait prêts, le moment est venu pour nous autres développeurs de nous préparer à la 3ème dimension.

 

Je suis parti en quête de 3D dans un petit projet personnel de jeu vidéo avec un objectif simple: tester la technologie WebGL. Il s’agit d’une API incluse au navigateur permettant d’accéder via javascript à des fonctionnalités graphiques 3D.

 

Armé de mon moteur de recherche favori, je découvrais avec enthousiasme l’existence de librairies javascript dédiées à WebGL. Chacune d’entre elles faisant l’éloge de ses capacités, la sélection n’a pas été simple. Après quelques déboires avec C3DL, je me suis orienté vers GLGE.

 

GLGE n’est probablement pas la mieux documentée, mais c’est certainement la plus rapide que j’ai pu tester. Et pour créer un jeu vidéo, la vitesse compte énormément. Il est vrai qu’à certains moments j’ai du mettre les mains dans le code de la librairie. Cette maudite caméra ne prenait pas le bon axe vertical pour s’orienter automatiquement vers un point donné. Ce n’est qu’un exemple mais je dois dire que ces librairies n’ont pour le moment pas la maturité d’un JQuery.

 

Au final, le plus difficile est de trouver un concept de jeu.

Prenez un jeu vieux comme le monde. Changez les règles, triturez-le, tordez-le dans tous les sens et vous obtenez un nouveau jeu. D’autant plus que grâce au virtuel, les limites sont moindre. Me voici donc parti pour créer un jeu d’échec spatial !

 

La recette est complexe mais les outils et les ingrédients sont gratuits.

 

Les outils :

  • Eclipse

  • Blender

  • Gimp

 

Les ingrédients :

  • HTML

  • CSS

  • Javascript avec un beaucoup de GLGE et un peu de JQuery

 

Après une première version uniquement deux joueurs (humain contre humain), je me suis penché sur l’intelligence artificielle. Ce ne fut pas une mince affaire sachant que les probabilités et les statistiques se sont pas mon fort.

 

Choisissant la simplicité, je me suis orienté vers un système de points au cas par cas. Le principe est le suivant : chaque cas est étudié l’un après l’autre. Si pour un cas, des points sont cumulés, l’action qui cumule le plus de points est effectuée. Sinon on passe au cas suivant. Reste une petite part au hasard lorsque plusieurs actions ont le même nombre de points.

 

Au final, le résultat est à la hauteur de ce que j’imaginais réaliser. L’intelligence artificielle est perfectible mais l’objectif en terme de connaissances est largement atteint.

 

Le projet est disponible sur spacebattle.wartone.com

Publié dans Développement | Laisser un commentaire