The first sketch was inspired by the wikipedia article on Bézier curves, especially this animation. The others are based on simulations of particles linked with springs.
Click on images to view the applets

Two compilations of the experiments made during the workshop are available on vimeo : http://vimeo.com/23727314 and http://vimeo.com/23753834 enjoy!

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/147/25-lignes-novembre-decembre/ http://grgrdvrt.com/blog/147/25-lignes-novembre-decembre/#comments Mon, 03 Aug 2009 16:01:35 +0000 Grgrdvrt http://grgrdvrt.com/blog/?p=147 Keith Peters a lancé il y a quelques mois le concours 25 lines. Ce qui est intéressant avec le recul, ce sont les évolutions du code au delà du concours.]]> Quelques temps avant le concours j’avais vu une animation avec une séquence présentant des sortes de bulles remontant dans un fluide, genre effervescence. En voyant ça je me suis demandé si une sorte de mouvement brownien un peu horizontal avec un mouvement en accélération vers le haut pouvait produire l’effet. J’ai donc commencé à jouer avec des particules jusqu’à obtenir ça.
Je remercie Nicoptère de m’avoir suggéré d’en faire quelque chose pour le concours

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.

Cette expérimentation est le résultat d’un ratage complet que j’ai pas pris le temps de rattraper. Je voulais faire quelque chose de tentaculaire, avec une histoire de branches qui s’influenceraient les unes entre les autres. Donc j’ai fait une branche qui se divise en branche qui se divise etc… Et là je me suis rendu compte que ce n’était pas du tout l’idée que j’avais en tête.
J’ai quand même continué un peu sur ce que j’avais, histoire de voir le comportement si les extrémités de sous-branches directement issues d’une même branche se repoussaient, si je mettais un peu de couleur… C’est amusant de constater que si chaque branche produit juste une sous branche en plus ou si les dernières branches se divisent encore une fois le nombre total de branches devient tel que l’animation ne peut plus tourner.

Finalement j’ai gardé cette animation parce que la trace laissée par cette structure est plutôt chouette

dessinez sur l’image pour la barbouiller et actualisez la page pour rétablir l’image.

je mets pas de code cette fois-ci (sauf si quelqu’un le demande), il n’a pas grand intéret.
il s’agit simplement de tracer une centaine de lineTo autour de deux positions successives de la souris et d’appliquer pour chaque ligne un lineStyle avec une épaisseur de 1, un alpha très faible (genre 1 ou 2%) et pour la couleur un getPixel sur le point de départ de la ligne (il faut donc penser à refaire le lineStyle avant chanque ligne), rien de bien sorcier donc et bien que l’as3 soit conseillé pour que ça ne rame pas trop, l’effet est réalisable avec flash 8.
bon, là sinon j’ai repris le bon vieux bouquin de Penner au chapitre physique et je m’amuse à bouger des objets à coup de forces et tout, je posterait peut-être un truc là dessus un de ces jours