Tom
Marx
>_

Générateur d'art procédural

Pésentation d'un petit projet réalisé en javascript avec p5.js, qui génère des dessins aléatoires.

5 minutes

Le projet

Il s'agit d'un générateur "d'oeuvres d'art" animées, composées de cercles de différentes tailles, couleurs, transparence... L'aléatoire a une grande place dans la génération de l'animation. Cependant, l'utilisateur peut définir quel degré de hasard intervient dans les différents paramètres : distance entre les cercles, variations de couleur, vitesse de l'animation...
Ce projet est une page web, remplie avec un 'canvas'. Cet élément HTML crée par Apple pour certain de ses outils en ligne a été intégré aux normes HTML5. Il est supporté par tous les navigateurs (sauf IE < 8). Il sert principalement à créer des animations, comme celle en haut de ce blog. Les canvas HTML5 sont aussi voués à remplacer Flash pour les jeux web. J'ai utilisé l'excellente librairie javascript p5js, qui permet d'utiliser ces éléments avec une facilité déconcertante.

Comment utiliser l'outil ?

L'outil ne fonctionne que sur ordinateur car il nécessite un clavier. Vous avez deux commandes :

Dans le panneau de réglage, vous pouvez modifier 8 paramètres :

Pas besoin de comprendre comment tous ces paramètres influencent le résultat, expérimentez !

Démo

Quelques exemples obtenus.

Exemple n°1 d'animation générée aléatoirement Exemple n°2 d'animation générée aléatoirement Exemple n°3 d'animation générée aléatoirement Exemple n°4 d'animation générée aléatoirement Exemple n°5 d'animation générée aléatoirement