Generation d'ondes sur des images 2D avec Processing : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
m (Problèmes rencontrés)
m
Ligne 130 : Ligne 130 :
 
*site officiel de [http://processing.org/ Processing]
 
*site officiel de [http://processing.org/ Processing]
 
*site des [http://les-algoristes.org/ algoristes]
 
*site des [http://les-algoristes.org/ algoristes]
 +
 +
==Documents==
 +
[[Media:presentation_janviera_aubertm.pdf | Slides de la soutenance]]

Version du 15 juin 2010 à 15:42

Contexte et Objectifs

Ce projet de spécialité est avant tout une réponse à une demande de l'association les algoristes, association réunissant ceux qui essayent de générer des œuvres d'art grâce à du code. L'objectif est de leur développer des outils simples d'utilisation qu'ils puissent utiliser par la suite pour générer leurs œuvres.

L'autre aspect de ce projet est la découverte de Processing, qui est à la fois un langage de programmation, très proche de Java, et un environnement de travail. Il s'agit ici d'évaluer ce langage en terme de simplicité, de rapidité d'exécution, et de tout critère que l'on pourrait juger pertinent.

Première approche

La première phase du projet consiste en la découverte de Processing : avantages, inconvénients, fonctions disponibles, structures de données, librairies proposées, nombre d'utilisateurs, etc…

Analyse du langage

Processing suit la même syntaxe que Java, et en possède les fonctions de base (cf. liste des fonctions proposées). Le gros avantage réside dans le fait qu'il n'est pas nécessaire de créer d'objet particulier pour avoir une interface graphique, ni de passer par une autre librairie (comme on pourrait utiliser SDL pour C ou java.graphics pour Java).

De base, tout programme possède en interne des variables globales simplifiant le travail du programmeur. Par exemple, la gestion de la souris peut se faire facilement via les variables mouseX et mouseY, qui retournent les coordonnées actuelles du pointeur. Autre exemple, la taille de l'image est stockée globalement dans les variables width et height, plus besoin de la passer en paramètre aux autres fonctions.

Comme on peut le voir dans la liste des fonctions proposées, quelques structures utiles sont proposées, comme l'ArrayList (liste de taille variable), ou la HashMap (tableau indexé par des chaînes de caractère), ce qui permet de gérer des collections d'objets simplement.

De plus, quelques classes simplifient le traitement des images, comme par exemple PGraphics pour le dessin off-screen ou PImage pour la gestions des images classiques (i.e. .jpg, .tga, .png et .gif).

Il est aussi important de noter qu'en plus du dessin 2D classique, Processing peut gérer l'OpenGL pour faire de la 3D.

Au-delà de ce que propose Processing, il est en réalité possible d'utiliser l'ensemble de l'API Java, au risque de perdre la compatibilité avec certains systèmes (notamment s'ils n'utilisent pas la même version de Java).

Bibliothèques existantes

De nombreuses bibliothèques pour Processing existent (liste non exhaustive des bibliothèques Processing), permettant d'écrire rapidement du code utilisable. Que vous souhaitiez faire de la reconnaissance de visage ou programmer un robot LEGO, vous trouverez votre bonheur dans ces bibliothèques.

Outre les fonctionnalités proposées, ces bibliothèques permettent généralement de garder un code 100% portable d'une plateforme à une autre.

Avantages et inconvénients

  • Processing simplifie clairement le travail du programmeur, en lui proposant des outils intuitifs. On y gagne en temps de codage et en taille de code ;
  • Processing est une sorte de surcouche de Java, et par conséquent possède les avantages et inconvénients de celui-ci ; l'aspect portabilité est clairement un avantage, qui est au détriment de la vitesse d'exécution, généralement meilleure sur les langages compilés. Cette lenteur peut être vraiment problématique, notamment pour le traitement vidéo.
  • L'environnement Processing manque de fonctionnalités et d'ergonomie. Mis à part la coloration syntaxique et le lancement direct du code, il se rapproche d'un éditeur de texte basique. Il est heureusement possible de coder en Processing sous Eclipse[1], moyennant quelques réglages.

Processing actuellement

Processing est aujourd'hui beaucoup utilisé dans de nombreux domaines, notamment pour tout ce qui est génération d'effets visuels et interfaces homme-machine ludiques (un exemple ici). La simplicité apportée par ce langage est évidemment un point recherché par les personnes étant plus artistes que programmeurs.

Développement d'un outil : génération d'ondes

Présentation de l'effet recherché

Nous avons choisi de développer comme outil un générateur d'onde sur la surface de l'image.

Deux types d'effets ont été explorés :

  • Le premier considère qu'il y a une couche d'eau perturbée au-dessus de l'image.
  • Le second considère l'image comme une surface mobile, comme un drapeau par exemple ;

Ce sont deux effets au rendu visuel assez différents, chacun pouvant trouver son utilité dans la création artistique.

Premier effet : simulation d'une couche d'eau

Implémentation

Après réflexion sur l'effet que l'on souhaitait avoir concrètement, il semblait intéressant d'avoir un rendu rappelant réellement un mouvement d'eau.
Onde se propageant sur une surface d'eau

L'idée est ici que cette couche d'eau existe réellement, au-dessus de notre image, et qu'elle déforme la vision de l'image. Deux solutions existent alors pour rendre notre image : soit on part des pixels de l'image et on remonte vers l'utilisateur (vers l'image qui sera rendue), soit on part des pixels de l'image finale, et on descend jusqu'à atteindre notre image de base. La première méthode peut créer des trous n'importe où dans notre image finale, tandis que la seconde ne devrait en créer que sur les bords de l'image.

Dans les deux cas, la traversée de la surface d'eau se fait en respectant la loi de Snell-Descartes[2] sur la réfraction (l'aspect réflexion ne doit pas être pris en compte, étant donné qu'il n'y a pas d'objet au-dessus de la surface d'eau). Cette vidéo illustrant la réfraction en 2D (réalisée en Processing), montre l'effet de cette loi sur un rayon traversant une surface sinusoïdale.

Cet exemple montre comment un rayon se déplaçant sur l'axe des y traverse une courbe ; il suffit d'adapter ce système à des rayons se déplaçant sur l'axe des z et traversant une surface. L'axe des z étant celui perpendiculaire au plan de l'image, il n'est pas possible de visualiser ces rayons (tout du moins sans utiliser OpenGL et la 3D).

Ainsi, chaque pixel de notre image va envoyer un rayon vers la surface d'eau, et va ainsi trouver le pixel à afficher. C'est en fait une version simplifiée de la méthode de lancer de rayon (ou ray tracing[3]), adaptée à notre cas particulier.

Problèmes rencontrés

  • Pour savoir à quel moment on effectue la réfraction, on teste la position actuelle du rayon par rapport à la surface (donnée par une fonction de x et y). Il faut cependant faire attention au fait que le rayon peut traverser plusieurs fois la surface (selon l'indice de réfraction). On doit donc avoir un booléen qui nous indique si l'on est au-dessus ou au-dessous de la surface, pour ainsi savoir quand on la traverse ;
  • La surface que traverse chaque rayon est nécessairement discrétisée, il peut donc arriver parfois que la réfraction se fasse deux fois de suite, envoyant le rayon dans une direction aberrante. On peut éviter ce phénomène en imposant un nombre d'itérations entre deux réfractions ;
  • Actuellement, la réfraction donne des résultats aberrants dans le sens des y, malgré l'apparente symétrie entre les deux dimensions ;
  • L'algorithme laisse nécessairement apparaitre des trous dans l'image (lorsque le rayon sort de l'image). On peut résoudre ce problème dans le cas particulier d'une texture de type torique (i.e. qui peut être recollée à elle-même sur ses quatre côtés en gardant la continuité de l'image), en considérant l'image périodique ;

Deuxième effet : animation d'une surface dans l'espace

Implémentation

Pour rendre un effet d'onde sur l'image voulue, cet effet calcule la fonction z=f(x,y) de l'onde recherchée et applique l'image en des des points de l'espaces calculés grâce à cette fonction.

La version de base de cet effet permet d'agiter l'image comme un drapeau, en lui appliquant une onde linéaire sinusoïdale selon une direction au choix. On obtient, en temps réel sur Processing, cet effet visuel.

Cet effet permet aussi d'animer une image selon les couleurs d'une autre image. Par exemple, si l'on choisit d'animer notre image selon une autre qui représenterait un cercle noir dans une image blanche, et que l'on choisit la couleur noire, la première image ne s'anime que dans le cercle de la seconde. On peut aussi choisir la couleur blanche pour faire s'animer l'extérieur du cercle.

Problèmes rencontrés

  • Les ondulations sont en volume, on voit donc le fond lorsque l'image ondule.

Résultats

La méthode par réfraction donne des résultats visuellement intéressants, comme on peut le voir sur cette vidéo ou sur celle-ci. L'effet n'est pas parfait, à cause du bug dans le sens des y, mais reste plus que satisfaisant. Malheureusement, Processing ne nous permet d'avoir cette vidéo on temps réel (on est environ à 1 image/sec sur un Intel Core i5 2.53 GHz).

Pour la méthode d'ondulation en 3D, en choisissant bien les images selon ce que l'on veut faire, les résultats peuvent être amusants, et s'affichent en temps réel dans processing (la vitesse d'animation sur la video est la même que générée par Processing sur un Pentium4 1.2 GHz).

Melodie a.jpg

En cumulant ces deux images, et en choisissant la couleur fushia (rouge et bleu en RGB), on obtient cet effet.

Melodie b.jpg

Avec cette combinaison, on peut donner un effet d'ondulation sur l'herbe (résultat).


On peut choisir deux fois la même image, par exemple dans cette image on peut la choisir à la fois comme image et comme image filtre, et en choisissant la couleur blanc, on peut voir les nuages s'animer.

Cette animation peut être paramétrée ainsi :

  • Taille des oscillations (période (en pixels), amplitude (sur la même échelle)) ;
  • Vitesse des oscillations (selon une échelle arbitraire, mais qui permet d'accélérer le mouvement) ;
  • tolérance sur la couleur (une tolérance entre 0 et 1. En choisissant 0, seule la couleur choisie est choisie dans le filtre, en choisissant des valeurs plus hautes, des couleurs proches bougent aussi. Les couleurs plus éloignées bougent moins).


Comparaison

Voici deux vidéos permettant de comparer les deux effets, la première montre l'effet avec réfraction, ainsi qu'un léger jeu sur la luminosité, afin d'améliorer la perception de l'onde ; la seconde montre l'effet de déformation 3D.

Ici, les deux vidéos vont à la même vitesse (10 images/sec), mais la seconde peut en fait être réalisée en temps réel (et peut aller encore plus vite en réglant un pas de temps plus petit) ; la première ne peut quant à elle pas aller plus vite (elle va en fait environ 10 fois plus vite que l'exécution réelle), étant dépendante du temps de calcul de la boucle d'affichage.

Le calcul temps réel nous permet même d'utiliser notre algorithme sur un flux vidéo, comme une webcam, comme sur cette vidéo.

Conclusion

Résumé

Processing

Processing est un langage adapté au travail des créateurs de contenu artistique, souhaitant réaliser un travail de manière simple et rapide, quitte à prendre plus de temps pour l'exécution du code. Il est néanmoins à proscrire dans le cadre industriel ou pour effectuer de gros algorithmes en temps réel, où les optimisations doivent être accessibles au programmeur. Ce résultat reste tout de même à nuancer, selon l'évolution de Java en termes de rapidité.

Ondes

Grâce à Processing, nous avons pu créer simplement deux effets différents d'onde à la surface d'une image, le premier grâce à une méthode proche du ray tracing, et le second par une méthode proche de l'advection de texture.

  • Le premier effet dépend du temps de calcul de la boucle d'affichage, et ne se fait donc pas en temps réel sur une machine personnelle ;
  • Le second effet bénéficie des optimisations d'OpenGL et peut donc se faire en temps réel, même sur une vidéo ;

Perspectives

Il y a deux types de perspectives d'évolution pour cet outil :

  • les améliorations de l'effet lui-même :
    • implémentation d'autres types d'ondes, peut-être plus "exotiques" ;
    • optimisation des calculs, au moins pour l'effet avec réfraction (notamment pour un éventuel traitement vidéo) ;
  • l'utilisation de l'effet dans le cadre d'œuvres d'art ; les possibilités sont ici infinies. On notera qu'en contraignant notre effet, on peut obtenir des effets classiques présents dans les logiciels de retouche photo, comme par exemple la sphérisation.

Bilan personnel

Tout d'abord, ce projet de spécialité nous a permis d'ouvrir la porte sur un monde totalement inconnu, celui des artistes programmeurs, qui est plus développé que ce que l'on pourrait croire.

Ensuite, nous avons pu nous confronter aux contraintes du métier d'ingénieur : contrainte de temps, contrainte de technologie, réponse au besoin du client, comptes-rendus réguliers, etc…

Remerciements

Nous souhaitions adresser des remerciements à Pierre Berger, président de l'association les algoristes, pour sa vision d'artiste sur notre travail, et Joëlle Thollot qui nous a patiemment encadrés lors de ce projet de spécialité.

Liens

Documents

Slides de la soutenance