En lançant l’exemple ci-dessous, tu pourras admirer le résultat de tout ça et découvrir au passage qui sont nos invités mystères!!

Si tu as juste lancé l’animation tu as dû d’abord paniquer à la vue de nos amis et ensuite tu as vu un effet sympa.
Si tu la stoppe et que tu la relance tu vas activer un second mode bien plus intéressant dans lequel l’image se dégrade au cours du temps.
L’idée c’est que dans le premier mode ce sont les couleurs la photo originale qui sont utilisées tandis que dans le second mode c’est l’image transformée (telle qu’on la voit) qui sert de source.

Voici une séquence obtenue avec une image un peu plus verte.
Au début les deux modes donnent à peu près la même chose :

Après une dizaine de minutes c’est de la bouillie :

À la fin l’image se divise en aplats relativement stables :

Et sinon en noir et blanc ça fait des choses amusantes aussi :

Si tu veux les sources, les voilà.

Utiliser un système de fonctions itérées ça consiste à appliquer de façon répétitive des transformations linéaires à un point. À chaque étape on choisit une fonction plus ou moins au hasard parmi quelques transformations choisies et ça fait des motifs. wikipedia en dit plus long.

Le dessin ci-dessous n’est pas une triforce surpuissante, c’est un triangle de sierpinski avec 8 itération, exécuté avec force, courage et détermination.

Et bien avec un système de 3 fonctions itérées j’aurai pu faire le même sans me briser le poignet et en pas tout tordu.

Après ça, le document parle de « Variations»  des fonctions non linéaires qui déforment le motif obtenu jusque là. Les annexes comportent une cinquantaine de ces fonctions rigolotes.
Il est ensuite question de la gestion des couleurs et de la luminosité en fonction de la densité et de la position des points. C’est une partie assez instructive en matière de traitement d’image.
Pour finir, le document propose des processus pour améliorer l’aspect de l’image (supersampling, motion blur…).
Là ça devient compliqué à mettre en place et surtout très lourd pour flash. Donc j’ai laissé tomber.

Finalement voilà trois rendus que j’ai obtenus. Il n’y en a pas plus parce que c’est assez long à sortir (10 minutes environ pour le moindre test) et de toute façon apophysis le fait mieux (plusieurs heures de rendu pour des images autrement complexes).

sources

Là il s’agit du tramage utilisé pour la compression des gifs , dit « ordered dithering» .

Cette fois si tu n’as pas de webcam tu pourras juste continuer à admirer la licorne que tu vois déjà.
En super bonus, les sources

Pour les deux j’ai utilisé Pixel Bender et c’est pas fantastique. C’est lent, on a pas le même rendu entre le toolkit et flash et surtout il y a une tonne de limitations, regarde le .pbk du deuxième exemple, tu verras comme c’est nul.

Pour finir, si tu as aimé ça, tu voudras lire ces documents : un très complet et un très succin et aussi plein de trucs rigolos.

Là je fais une pause dans l’histoire, juste pour dire que si tu veux obtenir des belles couleurs d’une belle image, tu peux tout de suite aller chez soulwire voir ces articles: couleurs moyennes et extraire une palette de couleurs, c’est plus simple et ça marche mieux.
Par contre tu vas rater la partie intéressante de l’histoire.

Pour en revenir au median cut filter, si tu te disais « Chouette, un filtre! on va sortir PixelBender»  tu te trompes, ça marchera pas. C’est pas comme le BlurFilter ou ColorMatrixFilter, qui traitent chaque pixel pour les redéfinir en fonction de leurs voisins ou de paramètres quelconques. Là c’est l’espace colorimétrique de l’image qu’on va tripoter.

L’espace colorimétrique c’est ce que tu vois juste à côté, un cube dans lequel chaque point est une couleur déterminée par sa position sur les axes R, G, B.

Maurice de Vlaminck a peint Les arbres rouges en 1906. C’est une huile sur toile de 65 x 81 cm et tu peux le voir au 5ème étage du Centre Pompidou.
Là (hérésie!) je l’ai recadré pour qu’il rentre dans la grille de l’article.

Ici c’est toujours le Vlaminck mais représenté dans l’espace colorimétrique. Cette fois il n’est pas recadré. Si tu veux, voilà les sources pour que tu puisse faire la même chose avec tes images. Les résultats sont très différents selon les images, c’est assez intréssant

On commence par mettre le tableau dans une boite. En vrai une boite ce sera juste une liste de pixels.

Ensuite on regarde quel est le côté le plus long. Pour ça il suffit de prendre les valeurs extrèmes de rouge, vert et bleu dans la liste de pixels. On va alors trier la liste selon leur valeur de rouge si par exemple c’est dans le vert qu’on a le plus d’amplitude. Il n’y a plus qu’à diviser notre liste en deux parts égales de façon à obtenir deux boites contenant le même nombre de pixels.

On recommence la dernière étape avec la boite qui a le plus long côté jusqu’à avoir autant de boites qu’on veut de couleurs. On obtient la palette en récupérant la couleur moyenne de chaque boite. Après pour reconstituer l’image il faudrait faire une posterisation. Moi je me contente d’attribuer aux pixels la couleur de la boite où ils sont, ça revient presque au même.

Voilà les sources du truc.
Et voilà des images reconstituées avec 2, 4, 8 et 32 couleurs et les palettes correspondantes

Le fauvisme prend un sérieux coup.
À moins de 20 couleurs les palettes sont loin de ce qu’on pourrait attendre.

Tu es déçu et je te comprends. En lot de consolation, voilà un bonus cool sur le tri des tableaux

On a vu que l’algorithme nécessite que les pixels d’une boite soient triés lors de la division de celle-ci.
Trier un Vector c’est simple avec la methode sort(). Ça prend en paramètre une fonction de notre choix c qui est top pour trier des éléments comme on veux. L’inconvénient c’est que c’est lent. Trop lent pour trier tous les pixels d’une image.

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

//nombre de valeurs à trier
var n:int = 20000;
//Vector contenant les valeurs à trier
var values:Vector.<int> = new Vector.<int>(n, true);
//valeur maximale contenue dans le Vector (minimum 0)
var valMax:int = 0xFF;
//remplissage du Vector avec des valeurs aléatoires
for(var i:int = 0; i< n; i++)values[i] = Math.random() * valMax;
var t:int = getTimer();
//tri
values.sort(function(v1:int, v2:int){return v1 - v2;});
trace(getTimer() - t);

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

function countingSort(a:Vector.<int>, k:int):Vector.<int>
{
	var n:int = a.length;
	var b:Vector.<int> = new Vector.<int>(n, true);
	var c:Vector.<int> = new Vector.<int>(k, true);
	for(var i:int = 0; i< n; i++)c[a[i]] = c[a[i]] + 1;
	for(i = 1; i < k; i++)c[i] = c[i] + c[i - 1];
	for(i = n - 1; i >= 0; i--)
	{
		b[c[a[i]]-1] = a[i];
		c[a[i]] = c[a[i]] - 1;
	}
	return b;
}
 
var n:int = 100000;
var values:Vector.<int> = new Vector.<int>(n, true);
var valMax:int = 0xFF;
for(var i:int = 0; i< n; i++) values[i] = Math.random() * valMax;
 
var t:int = getTimer();
values = countingSort(values, valMax + 1);
trace(getTimer() - t);

Pour le concours j’ai appliqué ce principe avec un point qui suit une cycloïde au lieu de la souris pour guider les lignes.



Cette édition du concours n’a pas motivé les foules et du coup tous les participants étaient finalistes. Forcément tout n’est pas fantastique. À noter quand même le 09 où les cartes sont entièrement dessinées avec des champs de textes (!?).

Voilà une sélection d’images générées de cette façon:

À la base je voulais stocker les tracés sur un minimum d’espace alors j’ai pensé au mouse gesture de bytearray où les caractères sont représentés par une suite de directions. Finalement j’ai pensé que ce serait trop compliqué de les redessiner à partir de ça en 25 lignes donc finalement j’ai opté pour des classiques paires de coordonnées.

Et voilà les finalistes de cette édition. Le 8 était très fou mais finalement c’est le 30 qui a gagné :/

]]> http://grgrdvrt.com/blog/279/25-lignes-janvier/feed/ 4 http://grgrdvrt.com/blog/234/kune/ http://grgrdvrt.com/blog/234/kune/#comments Thu, 10 Sep 2009 23:01:31 +0000 Grgrdvrt http://grgrdvrt.com/blog/?p=234 "Kune est un projet expérimental porté par 5 étudiants en multimédia de Gobelins, l’école de l’image (Paris)". Comme je suis un de ces 5 étudiants, que j'y ai passé 9 mois et qu'en plus c'est du flash, ça méritait que j'en parle ici, non?]]> « Kune»  en esperanto ça veut dire « ensemble» .
Ce nom nous semblait adapté pour un dispositif visant à améliorer le processus dans lequel s’inscrivent les réunions de brainstorming en entreprise.

Ce dispositif est consituté d’un tableau, utilisé en salle de réunion, et un d’un widget permettant d’assurer le suivi de ces réunion avant et après leur déroulement.

Le but du widget est d’assurer la cohésion d’une équipe autour d’un projet.
Avant la réunion il permet de regrouper les informations et documents relatifs au projet et de planifier les réunions en renseignant les participants, les horaires…
Pendant la réunion il permet aux participants d’ajouter des documents au tableau depuis leur portable.
Après, il permet de récupérer ce qui a été produit pendant la réunion.
Nous avons réalisé ce widget en AIR, cela nous a permis d’utiliser les fonctions de drag&drop pour accéder aux fichiers.

Dans notre approche le but du tableau est de représenter les idées de façon visuelle et de les manipuler. On a appelé ça les « idées-objets» , en rapport avec la POO. Chez nous une idée peut être un texte, une image, un dessin, qu’on va pouvoir déplacer, agrandir, regrouper, enrichir…

L’interface pour faire ça est tactile et les interaction se font avec un stylet et/ou à la main.
Avec le stylet… on écrit. Grâce à foxy le mot est reconnu et s’affiche comme il faut à l’écran, il devient une « idée-objet» .
Le mot étant identifié par le système il est possible de lancer directement une recherche de medias sur internet, medias qui deviendront à leur tour des objets intégrés au tableau. Dans le cas où l’on téléchargerait une vidéo, il y a moyen de la lire et d’associer des annotations à chaque instant.

A la fin de la réunion le tableau génère un compte-rendu avec tout ce qu’on a écrit, dessiné, téléchargé… et l’envoie au widget pour que le chef de projet le vérifie et le complète.

Nous avons développé un prototype de ce tableau, en utilisant certaines fonctions d’AIR (notamment celles relatives aux fichiers). De toutes les fonctions décrites dans le dossier de conception, nous n’avons développé que celles permettant le déroulé d’un scénario pour expliquer le projet face à un jury.
Vous pouvez en voir ici une version adaptée au web, donc apmutée du multipoint et de certaines fonctions.

Sur cette photo vous pouvez admirer, de gauche à droite, Tantoi, Mr Connard, moi, Djai pi et Cécile. J’ai mélangé les noms pour compliquer une peu les choses mais c’est pas grave puisque tout le monde a été fantastique.
Je vous invite à passer sur le site du projet, il y a une video sexy pour expliquer tout ça. Il ya aussi le dossier de conception qui passionnera les gens courageux.

Certains points du projet nous ont bien occupés et méritent que j’en parle de façon plus détaillée dans des billets à part.
Je pense en particulier à la façon dont nous avons conçu les interactions gestuelles et la fantastique interface tactile, au pattern Command, bien utile pour les Undo/Redo, aux blobs dessinés à coup de splines et à des trucs découverts en travaillant sur de l’auto-complétion.
9 mois de bidouillages, ça va en faire des trucs à raconter…

J’ai dans un premier temps adapté le principe à une disposition radiale. Ensuite en retravaillant plusieurs fois le mouvement j’ai obtenu quelque chose d’assez organique. Ce qui m’a amené à ça

Ce mouvement est dû au fait que chaque « tentacule»  est composée de plusieurs particules, contrairement à la première expérimentation où elles ne correspondent chacune qu’au tracé d’une seule particule.
Afin d’intégrer un peu d’interactivité ces particules se dirigent vers la souris avec une vitesse dépendant de leur position dans la tentacule. Au clic ce facteur s’inverse ce qui entraine le déplacement de toute la « Chose» vers la souris.
J’obtiens la couleur de chaque tentacule en tirant des nuances d’une couleur dominante prise aléatoirement, la couleur de chaque segment est simplement une interpolation entre une extrémité noire et l’autre de la couleur de la tentacule.
Et finalement je suis arrivé parmi les finalistes.

Pour le concours je tenais à faire quelque chose en 2D, malgré les apports du player 10 en matière de 3D. J’ai quand même rapidement tenté un petit passage en 3D. Je pense qu’à l’occasion j’essaierai d’y retoucher. Entre autre j’aimerai bien faire des tests de z-sorting sur ce genre d’expérimentation.

Ensuite étant complètement fan des processing monsters je tenais à en faire un. Cette animation pouvait correspondre aux contraintes d’interactivité et de noir et blanc, je l’ai donc recodée en processing, mais en vrai code orienté objet cette fois. Voilà le résultat et les sources.

Finalement, en me baladant sur wonderfl j’ai découvert que mon code avait été repris et transformé par plusieurs personnes . Il y en a même un qui a réécrit le code pour le rendre lisible.

Conclusion, ne laissez pas vos swf en plein soleil, après il mutent. Genre lui qui était à Arcachon la semaine dernière et lui qui se demandait pourquoi cette région d’Ukraine était si tranquille.

Bande Annonce:

Durant cette dernière année d’étude j’ai travaillé avec une équipe fantastique sur un projet fantastique qui m’a permis de m’amuser avec des choses fantastiques telles que de l’architecture logicielle assez fantastique, des courbes de bézier très fantastiques, et du multi-touch totalement fantastique. J’en parlerai en plusieurs fois, vous ne tiendriez pas le coup face à tant de fantastique.

Toujours avec les gens de l’école j’ai travaillé sur un pong du 3ème millénaire.

Il faut aussi que je parle du concours 25lines qui était amusant.

Enfin il y a tous les autres petits trucs faits à côté (vous saurez par exemple pourquoi je suis un peu déçu par PixelBender).

Si vous voulez voir tout ça je vous recommande de suivre le flux rss, l’ancienne adresse n’étant pas redirigée. Ou sinon je signalerai chaque publication sur Twitter.

Désolé pour pégase, ça devait être une licorne mais il faut savoir changer.

Faites aussi un tour sur le blog de seraf y’a un artwork très classe de l’illustrateur qui accompagne Leonerep sur ce projet