It’s your Bejeweled/Zookeeper standard port, with the added feature of being able to manipulate bricks even when the board is not “stable”. Very very high combo have been obtained thanks to this, but the highscores scripts and database are gone (ignore the scoring screens).

This was for the old Puy du Fou website, so don’t mind the ugly icons. The rest of the design was done by Koo@Wonderkoolor.

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

It combines on the same wheel Google Hot Searches, Yahoo Buzz top searches and Twitter trendings topics.

(Please open the article to see the flash file or player.)Click the picture to open, then use your mousewheel or the scroller

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.