Admin

lundi 29 août 2011

AS3 : Arrondi et Cie !

De nombreux articles sur la toile abordent les optimisations que l'on peut mettre en place en AS3 pour remplacer avantageusement certaines fonctions, comme certaines méthodes de la classe Math, par des équivalent plus rapides.

Concernant les maths, les points abordés sont souvent autour du floor() et du ceil(), de la multiplication et division de puissances de 2, et du modulo.

Mais rares sont les articles qui parlent de l'arrondi, à savoir le Math.round();

Voici donc ma petite contribution.

Le but : remplacer le Math.round() natif par un équivalent plus rapide tout en conservant sont comportement.

Deux cas se présentent :

- nombres positifs :

Ici trois solutions existent, elles font toutes la même chose et dans le même temps (les opérateurs binaires ne sont qu'à peine 1% plus rapide, autant dire que l'augmentation de perfs est négligeable).

  • solution 1 : var foo1:int = int(value + 0.5);
  • solution 2 : var foo2:int = value + 0.5 >> 0;
  • solution 3 : var foo3:int = value + 0.5 | 0; (ma préférée, que j'abrège en value+.5|0)

Comparons les perfs (10 000 000 itérations):

  • Math.round() natif : 358.2ms
  • solution 1, 2 ou 3 : 25.6ms

On obtient donc une fonction presque 14 fois plus rapide que le Math.round() natif.

- nombre négatifs (et positifs, le vrai équivalent au Math.round() en somme):

Ici aussi trois solutions existent, elles font toutes la même chose et dans le même temps (les opérateurs binaires ne sont qu'à peine 1% plus rapide, autant dire que l'augmentation de perf est négligeable).

  • solution 1 : var foo1:int = a>0 ? int(value + 0.5) : int(value - 0.5);
  • solution 2 : var foo2:int = a>0 ? value + 0.5 >> 0;
  • solution 3 : var foo3:int = a>0 ? value + 0.5 | 0; (ma préférée, que j'abrège en a>0?value+.5|0:value-.5|0)

Comparons les perfs (10 000 000 itérations):

  • Math.round() natif : 364.2ms
  • solution 1, 2 ou 3 : 139.6ms

On obtient donc une fonction d'arrondi exactement comme Math.round(), mais 2.6 fois plus rapide que le Math.round() natif.

Voila de quoi optimiser vos codes...

Mais attention, ces optimisations n'ont de sens que si elles sont utilisées dans une grosse boucle ou un traitement très complexe : pour un simple renderer, aucun intérêt, un Math.round() fera l'affaire, ou un toFixed() pour obtenir directement une String.

mardi 9 août 2011

Adobe AIR HTML avec Flex: Tootip ou tu l'codes ?

Pour un projet perso, j'ai choisis la plateforme AIR sous Flex, afin de profiter entre autre du composant HTML.

Je sais que celui-ci dispose depuis AIR 2.0 du support de CSS3, donc je me dit qu'un simple attribut title pour un <span> passera sans problème, c'est du HTML 4 standard, non ?

Et bien non, ça ne passe pas ! Comment faire ? Et bien utiliser le support JS pour créer dynamiquement un tooltip.

Mais pour tout gérer (tailles, multi-lignes, styles, positions, etc...), faut un peu de boulot.

Bien sûr on peut utiliser une des nombreuses libs JS pour faire des tooltips, comme qTip avec JQuery par exemple.

Dans mon cas, je souhaitais recréer le design des tooltips de Chrome. Pour l'ombrage, j'ai donc utilisé la propriété -webkit-box-shadow, mais comme mon fond change parfois de couleur, j'ai été obligé de me faire une petite fonction JS pour trouver la couleur et l'alpha adéquat pour la shadow, pour que le rendu de l'ombre soit similaire quelque soit la couleur de fond.

Au total, une demi-journée juste pour un tooltip !

Je ne comprends pas pourquoi il semble plus facile pour Adobe d'implémenter le CSS3 que les simples attributs HTML 4.0. Selon http://www.w3.org/TR/html4/struct/global.html#h-7.4.3, l'attribut title semble tout à fait standard.

Quelqu'un a t-il des explications sur les raisons qui pourraient expliquer l'absence du support de l'attribut title ? Simple oubli, considération de sécurité, bug ?

Note: je n'ai pas testé avec la beta de AIR 3.0; ceux qui la testent actuellement peuvent-ils me dire si il y eu du changement de ce côté là.