Mike Chambers a organisé une compétition de programmation AS3 la semaine dernière : AS3DTC_1. J’aime bien les concours simples qui ne prennent pas trop de temps. Monumentale erreur : j’ai du écrire beaucoup de code.

Du coup mes estimés collègues m’ont demandé d’écrire ce post sur la manière que j’ai utilisée pour prendre la 1ère place (yaisse !), en profiter pour en faire un cours sur l’optimisation, tout ça quoi …

L’objet du concours était d’avoir une scène découpée en cases (une grille donc), avec dessus un grand nombre de points (10000) et 4 objets à tester. Pour chacun des objets à tester, il est demandé de renvoyer les points voisins (points présents dans la case de l’objet et les 8 cases adjacentes). Grant Skinner a posté un exemple un peu plus visuel de l’interêt du problème à résoudre :

(Please open the article to see the flash file or player.)

A chaque appel (il faut imaginer à chaque frame), une liste complète des points est envoyée via un appel à une méthode update(). Ensuite pour chaque objet à tester les voisins sont demandés via getNeighbours(). Les participations sont départagées par leur vitesse d’exécution, donc il faut faire le code le plus speed possible.

update() est donc appelé une seule fois contre plusieurs pour getNeighbours(), et toujours avant, il faut donc effectuer un maximum de calculs dans update().

L’autre idée primordiale est de ne faire qu’une seule boucle sur les 10000 points.

L’implémentation la plus évidente à mes yeux (mais pas forcement la meilleure, il y a eu des méthodes innovantes à ce niveau, en particulier celle de Grant Skinner), est la suivante :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

cases = tableau[nombre_identifiant][points]
 
function update(points)
{
	for(point in points)
	{
		cases[identifiant_de_case].push( point )
	}
}
 
function getNeighbours(test)
{
	case_centrale = cases[identifiant_de_case]
	return case_centrale.concat( cases_voisines_1...8 )
}

Le calcul d’identifiant_de_case est effectué plus de 10000 fois, c’est le principal élément à optimiser. Dans sa forme la plus basique, on veut quelque chose du type :

1

identifiant_de_case = caseX * hauteurGrille + caseY

avec :

1

caseX = uint(Math.round(point.x/tailleGrille)) // et pareil pour caseY

>> on optimise ce bout de code et on obtient :

1
2
3
4

// les multiplications sont plus rapides que les divisions (à effectuer une seule fois, dans le constructeur)
ratioTailleGrille = 1/tailleGrille;
[...]
caseX = int(point.x*ratioTailleGrille)

Pour optimiser encore plus, il est possible d’utiliser des opérateurs sur les bits (les opérations au niveau bit sont très rapides). Rappel: le but de créer un identifiant unique pour chaque case : on cherche donc à obtenir un int qui contient en même temps caseX et caseY.

Pour expliquer la méthode, voir le code d’exemple suivant :

1
2
3
4
5
6
7
8
9

caseX = 12;    // en binaire : 00001100
caseY = 19;    // en binaire : 00010011
// on décale vers la gauche les bits de caseX pour laisser assez de place à caseY
// ici 8 bits (dans ma classe j'ai poussé le vice à calculer le nombre de bits nécessaires)
// puis on utilise le OU binaire ( | ) pour fusionner les 2 valeurs
identifiant_de_case =
		(caseX << 8)		// en binaire : 0001001100000000
			| caseY		// en binaire :         00010011
// identifiant_de_case =		   en binaire : 0010011000010011

Le stockage des items en lui même se fait dans un Vecteur à 2 dimensions :

1

var cases:Vector.<Vector.<DisplayObject>>

Un objet (ou Dictionary) liant chaque identifiant à son Vector.<DisplayObject> serait un choix plus logique pour le stockage, mais comme les valeur ne sont pas fortement typées dans un Object, c’est au final moins rapide.

Beaucoup d’autres optimisations sont connues (cf. wiki @joa)

• remplacer les divisions par des multiplications tant que possible
• for(i=0;i<n;i++) est moins efficace que i=n; while(i) { –i }
• vector.push(item) est moins efficace que vector[vector.length]=item;
• il faut fortement typer un objet avant d’appeler une méthode dessus. Par exemple :

  1 2 3 4

  return cases[id1].concat(cases[id2]) // est moins efficace que : var case:Vector.<DisplayObject> = cases[id1]; return case.concat(cases[id2]);

Autre feinte :
Dans getNeighbours(), normalement il faudrait tester si on est sur les bords, pour savoir si il faut concaténer 9 cases ou moins.
Pour éviter ça, on crée une bande de cases vides autour de la grille réelle. Malheureusement il n’y a pas d’index négatif (pour la ligne du haut et la colonne de gauche) dans un stockage avec un Vector. Il faut encore tester ces deux cas.

Enfin, le vrai boost (50% de vitesse en plus environ) trouvé en fin de concours (et utilisé que dans mon code je crois) est de tester si les points ont bougé entre 2 appels à update(). Si rien n’a changé on évite de manipuler des données dans tous les sens et on gagne beaucoup de temps.

Depuis, la fonction update() ressemble plutôt à :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function update(points)
{
	if(points.length != oldPointLength)
	{
		// (ré)initialisation
		for(point in points)
		{
			cache[point] = identifiant_de_case
			cases[identifiant_de_case].push( point )
		}
	}
	else
	{
		for(point in points)
		{
			if(cache[point] != identifiant_de_case)
			{
				// ce point à bougé
				cache[point] = identifiant_de_case
				// effectuer le changement de case du point
				[...]
			}
		}
	}
}

Voilà, j’espère que ça va donner de bonnes idées pour optimiser du code AS3. En vérité, ça ne sert que rarement à grand chose de pousser les choses à ce point, sauf quand un petit bout de code pompe une grosse partie des performances espérées.

C’est juste que ce matin me voici à nouveau titillé par un de ces sujets récurrents qui me travaillent parfois…

C’est que depuis mon billet “De l’émergence du clip interactif”, et sa suite sommaire, l’idée fait son chemin et on voit régulièrement réapparaitre des exemples du genre, comme me l’ont fait remarquer les quelques personnes passant sur ce blog en laissant des commentaires…

Bien qu’il m’ait fait bloquer, que j’ai posté le lien partout où je le pouvais, que je l’ai cité par ci par là en référence à “ce qui pouvait se faire dans le domaine“, je n’ai pas parlé sur ce blog du clip de Labuat, superbe réalisation , petite bombe du genre, se détachant complètement de la référence télévisuelle pour entrer dans quelque chose de “nouveau”.

Labuat /  Herraiz Soto & Co. / badabing / Zumbakamera

La première nouveauté qui me saute aux yeux étant le défilement latéral dans un espace fenêtré. En effet, contrairement aux exemples cités précédemment, le site s’adapte à la fenêtre… Il n’y a pas ici de format fermé, on sort du cadre contraignant de la télé et chacun, selon sa configuration matérielle et ses préférences, a une expérience différente, personnelle, du clip… Ca n’a l’air de rien comme ça, mais c’est énorme! Enfin, c’est personnellement, subjectivement, énorme!

Ensuite, comme pour une danse, le site nous propose une trame avec laquelle nous pouvons jouer. La ligne tracée, expression visuelle de la musique faisant habilement référence à la courbe de fréquence, pose une ambiance, et est agrémentée d’accidents visuels illustrant le texte et influant notre perception du morceau.

Enfin l’utilisation du pointeur de la souris comme “pinceau” joue un rôle hypnotique en nous laissant une sensation de contrôle sur le clip… Nous pouvons en effet laisser la ligne se dérouler ou jouer avec selon notre humeur, comme on laisserait trainer un doigt dans l’eau au bord d’un bateau (c’est joli comme image, non? :p).

Pourquoi reparler de tout ça aujourd’hui? Tout simplement parce que je viens de voir le site du jour de theFWA, et qu’il s’agit d’un clip interactif, pour le morceau “The Never Ending Why” tiré du nouvel album “Battle For The Sun” du groupe Placebo.

Placebo, Champagne Valentine, Random

Bon, j’avoue que je ne suis ni fan de la musique, ni du graphisme, mais un nouveau pas a téé franchis dans le domaine et il me semble intéressant de la saluer. Bien sûr, nous ne sommes pas ici dans le même cas que Labuat. Le clip s’inscrit dans un cadre contraint. Oui, mais on retrouve cette “fluidité” de l’animation, l’utilisation en continu du déplacement de la souris, et la parallèle avec la courbe de fréquence (même si ici beaucoup plus à la manière d’un plug-in WinAmp). De plus il se distingue des exemples pré-cités par sa complexité visuelle. Ce n’est pas une simple animation “graphique” séquencée avec un jeu de clics de ci de là, mais bien une narration rythmée et interactive (même si celle-ci reste limitée)…

Bon, je ne suis plus très sûr d’où je voulais en venir avec ce billet, c’est qu’il fait faim et qu’on est vendredi, mais on va dire que c’est fini pour aujourd’hui :p … Ah si! ça me revient! Je voulais juste passer une annonce: “Si tu es une boîte de prod, un groupe de musique, que tu as de l’argent, tu m’intéresses!“

As a bonus it makes silly hippie sentences

Then I found a great algorithm here: http://www.dspdimension.com/admin/pitch-shifting-using-the-ft/ and its C# port here http://sites.google.com/site/mikescoderama/pitch-shifting

I’ve ported the code to AS3 then heavily optimized it to get it running under 100% cpu use (of 1 cpu core). I get 45% cpu use with the default parameters on my 2.4GHz PC.

See it in action here (Flash Player 10 required):

(Please open the article to see the flash file or player.)
click to open

You can download the source code here: http://iq12.com/files/pitch_shift/pitch_shift.zip

Music: More Frightened by CandyCash (with permission)

Take any film you wish, and photoshop the scenery, characters or titles into the style of a famous movie poster for a different film: The Dambusters in the style of Ghostbusters, Finding Nemo in the style of Jaws, etc.

Donc, en gros, prendre un poster de film et photoshoper un autre film dedans. J’ai envoyé quelques propositions de qualité variable dont certaines dont j’étais pas peu fier. J’ai pas gagné, mais je me suis quand même placé dans les 20 premiers.
A vous de retrouver les films ayant servis d’inspirations pour les posters ( ça va, c’est pas bien dur )

Tous ça pour dire : visitez b3ta, c’est poilant !

A little experiment with the line drawing capabilities of PaperVision.

(Please open the article to see the flash file or player.)
click the pretty picture to open

Play with the sliders in the control panel to get various effect, but be careful not to put too many complicated hair ( the “Nb hair” & the “Nodes” sliders ) or you’ll break the Internet. The first four sliders are live, the others are not, you’ll have too wait a few seconds for the changes to be applied.

The thing is full 3D, rendered with PaperVision. The line drawing works very well, as does the Z-Sorting.

The hair roots are placed with the sphere distribution script of Nicolas Barradeau, so thank you Nicolas.

Here are the sources but you’ll need Papervision3D too.

Drool Dog © DanyBoy

Cela fait maintenant quelques temps que nous baignons tous trois, chez iq¹², dans l’univers de Flash…
De la version 3 de Macromedia, avec ses TellTarget, jusqu’à celle CS4 d’Adobe, pas mal d’eau a coulé sous les ponts et la part du code n’est plus tout à fait la même.
Venant de formations différentes, nous avons chacun abordé le logiciel à notre façon, de manière empirique, et en grande partie autodidacte.

Le constat est que, même si la tendance est à la normalisation, il existe autant de techniques de flasher que de flasheurs. Et le fossé s’agrandit entre ceux qui ont “l’expérience” du Flash à l’ancienne (si on peut nommer ainsi quelque chose d’un peu plus d’une dizaine d’année) qui viennent de la bidouille ou du graphisme, et ceux qui, frais émoulus des écoles, abordent Flash et l’Action Script 3 par le versant “codeux”, sans s’être frottés aux “dessineux” et autres DA/AV…

Ce constat nous a amené à réfléchir à un outil, ou plutôt une boîte à outils, qui nous permette :

• d’optimiser la production en “factorisant” notre code et en réutilisant au maximum les scripts récurrents,
• de faciliter l’ouverture de nos projets ou le passage de relais à des intervenants extérieurs (freelances, ressources internes chez le client, etc.),
• de rendre plus aisée la collaboration avec les développeurs et les graphistes,
• de laisser un maximum d’autonomie au client,
• et surtout de répondre à toutes fausses idées qu’on peut se faire sur Flash (non référençable, difficulté de mise à jour, etc.).

C’est ainsi que notre projet de “DroolBox” a vu le jour.
La DroolBox, kézako? C’est tout d’abord une liste de guidelines, une nomenclature, afin de normaliser les projets iq¹². C’est ensuite une série de logiciels, de classes ActionScript et de scripts PHP continuellement mise à jour et enrichie afin de travailler avec les mêmes outils. C’est enfin un framework conçu en vue d’être utilisable et utilisé par un maximum de flasheurs, de l’animateur ne mettant qu’un minimum les mains dans le cambouis, au développeur chevronné ne voulant pas s’embêter avec les problématiques d’intégration HTML de son module Flash.

Nous pensons permettre l’utilisation de la DroolBox à toutes les personnes intéressées dès que la première version sera documentée.
Mais comme un petit dessin vaut parfois un long discours, voici Mesdames, Mesdemoiselles, Messieurs, la DroolBox par l’exemple.

Frise historique multimédia - touteleurope.fr / kungfuyoga

Il y a quelques années, alors que nous travaillions chez Kungfuyoga, nous avions conçu et réalisé pour le site Toute l’Europe.fr une Frise Historique Multimédia

C’est un module Flash complexe, avec beaucoup de contenu texte, image et vidéo. Une des problématiques à l’époque avait justement été de proposer une version HTML alternative, en grande partie par souci d’accessibilité et de référencement.

Nous l’avons donc pris en “cas d’école” et l’avons redéveloppé avec notre DroolBox. Voici le résultat de notre Frise Historique Multimédia DroolBoxisée

Frise FR

[MODE VRP ON]

Au premier abord, pas de différence.
Héhé, mais mon bon monsieur, c’est bien là tout l’intérêt!

Avec la DroolBox, nous vous proposons un module FullFlash qui peut être très complexe en apparence, mais qui est d’une simplicité déconcertante quand à la gestion des contenus.

Sans aucune intervention de votre part, le site est totalement référençable, avec des URLs directes, en multilingues, les tags GoogleAnalytics sont automatiquement renseignés, et les adresses traduites

Avec la DroolBox, plutôt que d’inviter vos visiteurs à un véritable jeu de piste pour trouver un contenu, envoyez les tout simplement vers une la page ciblée. Les URLs d’accès direct, générées depuis le XML de contenus, sont explicites et automatiquement traduites pour un référencement optimal.

Avec la DroolBox, plus besoin de vous embêter à doubler vos contenus en HTML, tout est automatique, vous n’avez plus qu’à mettre en forme la version alternative en modifiant les feuilles de style CSS.

Nous avons pensé la DroolBox pour produire des sites répondant aux critères d’obtention du label AccessiWeb niveau Bronze

Cerise sur le gateau, la DroolBox permet d’intégrer très simplement votre module ou votre site à tout CMS Open Source pour vous permettre de gérer tous vos contenus sur la même plateforme.

Frise EN

Et pour vous, mesdames, mesdemoiselles et messieurs les développeurs, nous vous proposons une utilisation très simple: il vous suffit de rédiger les classes de chaque page… Les transitions et toute l’arborescence sont définies directement dans le XML. Un module de gestion des assets évite la prise de tête des chargements. De plus, par simple déclaration dans le XML, la DroolBox génère automatiquement les thumbnails d’images dont vous avez besoin. Enfin un module zippe tous les XML, les télécharge, et les dézippe directement dans le Flash, ce qui permet un chargement optimisé des données ainsi qu’un archivage des différentes version selon les modifications.

Frise DE

EXEMPLES

• Multilingue: en français, en anglais, en allemand, ou encore en espagnol.
• Traduction des URL et accès direct: Lancement d’Ariane, The Launch of Ariane, Abschuss der Ariane, Lanzamiento de Ariane.
• Génération d’une version alternative HTML: Lancement d’Ariane, The Launch of Ariane, Abschuss der Ariane, Lanzamiento de Ariane.

Frise ES

[/MODE VRP OFF]

Première participation (reçue moins de 24h après le Jam, bravo !), Monsieur Gus:

Pressez les touches de déplacement du curseur alternativement à la vitesse correcte tandis que le MJ danse pour lancer le chapeau au bon âge

(trad: systran.fr)

(Please open the article to see the flash file or player.)
cliquer sur l’image pour ouvrir