03

Editeur de surfaces de Bézier.

sept

Comme j’ai eu l’occasion de l’expliquer précédemment, J’utilise des surfaces délimitées par des segments et des courbes de Bézier afin de gérer les collisions dans mon moteur 2D.
N’ayant pas trouvé sur Internet d’éditeur qui convienne à mes besoins, j’en ai codé un vite fait en Javascript. Voila donc un post qui sert à la fois de documentation et de procédure d’implémentation, au cas ou quelqu’un voudrait utiliser ce code dans un projet plus vaste.
Ce code est disponible sous licence BSD, ce qui doit être la plus permissives des licences.

Introduction

L’éditeur est codé en Javascript et s’appuie sur la librairie prototype.js qui permet de donner au Javascript une dimension Objet fort utile.
L’éditeur utilise les fonctions canvas du HTML 5! Il fonctionne sur tous les navigateurs et si habituellement je préfère utiliser Chrome, il faut reconnaître qu’Internet Explorer est de loin le navigateur le plus rapide lorsque l’on utilise canvas. Enfin Firefox dispose d’un avantage très utile (surtout dans le cas d’un éditeur), il gère l’attribut mozImageSmoothingEnabled qui permet de faire un zoome sans appliquer de filtre bilinéaire !

Je profité de ce post pour faire un peu de ménage dans mon code afin qu’il soit plus facilement utilisable.
L’éditeur se trouve ICI.
Je mettrai ce post à jour, si je venais à modifier l’éditeur.

Instancier l’éditeur

Un simple View source sur la page HTML de l’éditeur vous permet de voir le code suivant :


editzone est l’id du div qui va contenir l’éditeur. Aucun contrôle n’est réalisé, sur la taille de ce div, mais il vaudrait mieux qu’il fasse au moins 512*400 pixels !
Tout l’éditeur sera tracé dans le div.

loadBitmap permet de charge un sprite en fond sur lequel on va pouvoir créer la surface.

Utilisation

L’utilisation est assez simple et comprend 2 modes :

  • Lorsque la surface n’est pas encore fermée
  • Lorsque la surface est fermées
Lorsque la surface n’est pas encore fermée
  • Click : Ajoute un point
  • Drag & Drop sur un point : Déplace le point
  • Click sur le point de départ : Ferme la surface
  • Shift + click sur un Segment : Converti le segment en courbe de Bézier
  • Shift + click sur une courbe de Bézier : Converti la courbe de Bézier en Segment
Lorsque la surface est fermée
  • Suppr + Click sur un point : Supprime le point
  • Suppr + Click sur le dernier point (point bleu): Réouvre la surface
  • Ctrl + Click sur un segment ou sur une courbe de Bézier : Insère un point
  • Drag & Drop sur un point : Déplace le point
  • Shift + click sur un Segment : Converti le segment en courbe de Bézier
  • Shift + click sur une courbe de Bézier : Converti la courbe de Bézier en Segment
Raccourcis clavier
  • + : Agrandissement
  • - : Réduction
  • Flèches : Scroll
Barre d’outils
  • Agrandissement
  • Réduction
  • Symétrie verticale
  • Symétrie horizontale

Rem : Dans le cas d’une symétrie, le sens de création de la surface est conservé. C’est a dire que si vous définissez une surface en place les point dans l’ordre trigonométrique, alors la Symétrie conserve cet ordre !

Format du code

Le code ‘Nfo) Produit est composé d’un mot clé suivi de paramètres

  • start = x, y : le premier point de la courbe. (x, y) sont les coordonnées du point
  • line = x, y : (x, y) sont les coordonnées qui permette de tracer un segment avec le couple (x, y) précédent
  • curve = cx1, cy1, cx2, cy2, x, y : (cx1, cy1) et (cx2, cy2) sont les point de contrôle de la courbe de Bézier. (x, y) sont les coordonnées du point d’arrivée de la courbe. Le couple (x, y) précédent étant le point de départ de la courbe

Pour faire simple, en remplaçant

  • start = x, y par ctx.moveTo(x, y)
  • line = x, y par ctx.lineTo(x, y)
  • curve = cx1, cy1, cx2, cy2, x, y par ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y)

Avec ctx un context de tracé HTML5, on obtient le tracé de la surface.

TODO list et restrictions

Restriction
  • L’éditeur dans sa version actuelle (et c’est voulu) ne gère que des coordonnées entières.
  • Il n’existe pas de Bouton Load et Save. Le code produit peut être copié/collé en guise de sauvegarde
TODO
  • Pouvoir initier une Surface en collant du Code Nfo dans le textarea
  • Ajouter un bouton pour masquer momentanément les points et visualiser uniquement la surface
  • Gérer le déplacement des deux points de contrôles en même temps que le points de la courbe
 | Tags:

Répondre

Human control : 8 + 2 =