Published : 2017-11-29 License : GPLv2+
PRÉSENTATION
1. INTRODUCTION
2. EXEMPLES D'UTILISATION
3. L'INSTALLATION DE PROCESSING
4. LES BASES DE PROCESSING
1.
INTRODUCTION
Conçu par des artistes, pour des artistes, Processing est un des principaux environnements de création utilisant le code informatique pour générer des œuvres multimédias sur ordinateur. L'attrait de ce logiciel réside dans sa simplicité d'utilisation et dans la diversité de ses applications : image, son, applications sur Internet et sur téléphones mobiles, conception d'objets électroniques interactifs.
Processing fédère une forte communauté d'utilisateurs professionnels et amateurs : artistes, graphistes, vidéastes, typographes,
architectes, web designers et designers en général. Il est également utilisé par des enseignants en arts qui souhaitent familiariser leurs étudiants avec les potentialités artistiques de la programmation, les concepteurs du logiciel l'ayant pensé dès l'origine comme un outil d'apprentissage.
DESSINER ET CRÉER AVEC DU CODE
INFORMATIQUE
Logiciel de création multimédia, Processing possède la particularité d'utiliser des instructions informatiques pour dessiner, réaliser des animations en 2 ou 3 dimensions, créer des œuvres sonores et visuelles, concevoir des objets communicants qui interagissent avec leur environnement.
Pour un artiste habitué à utiliser à main levée des outils comme son crayon, son pinceau, sa souris ou sa tablette graphique, il peut sembler surprenant de créer des formes, des couleurs, des
mouvements en saisissant seulement une suite d'instructions à l'aide de son clavier.
Ce mode d'expression artistique par le code utilise les caractéristiques propres à l'informatique (rapidité d'exécution, automatisation des actions et des répétitions, interaction, etc.) pour produire des créations originales qui n'auraient pas vu le jour autrement ou dont la réalisation, à l'aide de procédés plus classiques ou de logiciels plus complexes, aurait demandé davantage de temps. Processing permet également de programmer des circuits
électroniques qui interagissent avec le milieu qui les entoure. Connectés à des capteurs sonores, thermiques, de mouvement, ces circuits électroniques peu coûteux, dénommés microcontrôleurs, peuvent en retour générer des images, actionner un bras articulé, envoyer des messages sur Internet... bien entendu en fonction du programme que vous aurez créé.
Comme nous le verrons dans ce manuel, en apprenant à
programmer avec Processing, vous allez développer votre capacité d'expression et d'imagination.
UN FORMIDABLE ENVIRONNEMENT
D'APPRENTISSAGE
Si Processing est simple d'utilisation, c'est qu'il a été conçu dès son origine pour servir à enseigner les bases de la programmation informatique dans un contexte visuel.
La vocation pédagogique de Processing en fait un excellent outil d'apprentissage de la programmation pour les non-programmeurs ou les programmeurs débutants. De nombreux enseignants l'utilisent pour initier leurs élèves et leurs étudiants aux concepts et aux bonnes pratiques de la programmation.
Plusieurs universités, écoles et centres d'artistes donnent des cours sur ce logiciel. Dans un contexte francophone, on peut mentionner notamment l'Université du Québec à Montréal (UQAM), l'Université Laval, la Société des arts technologiques - SAT (Canada-Québec), le Centre art sensitif - Mains d'oeuvres à Paris, l'Ecole d'Art d'Aix en Provence, l'association PING à Nantes (France), l'Ecole de Recherche Graphique (ERG) et IMAL à Bruxelles, la Haute Ecole Albert Jacquard (HEAJ) à Namur (Belgique), La Haute Ecole d'Art et de Design (HEAD) à Genève, La Haute Ecole d'Arts Appliqués de Lausanne - ECAL (Suisse).
UN LOGICIEL LIBRE ET GRATUIT
Processing est un logiciel libre et gratuit. Il fonctionne sur les plates-formes Windows, Linux, Mac (et sur toute autre plate-forme pouvant faire fonctionner des logiciels conçus en Java). Il existe également des versions pour téléphones portables et des dérivés pour circuits électroniques.
En tant que logiciel libre, Processing bénéficie de la générosité de nombreux programmeurs volontaires qui mettent à disposition des utilisateurs des morceaux de codes facilement réutilisables
(dénommés en jargon informatique des librairies). Plus d'une centaine de librairies étendent ainsi les capacités du logiciel dans le domaine du son, de la vidéo, de l'interaction, etc.
UN PEU D'HISTOIRE
Processing a été conçu au laboratoire Aesthetics + Computation Group (ACG) du MIT Media Lab par Ben Fry et Casey Reas en 2001. Ce logiciel est plus ou moins le prolongement du projet Design By
Numbers, créé par le directeur du laboratoire, l'artiste-programmeur
John Maeda. Dans son livre présentant le langage de programmation qu'il a conçu, Maeda met en avant la simplicité et l’économie d'action dans la programmation d’images.
Plusieurs éléments de ce premier projet sont visibles dans
l’environnement Processing : la simplicité de l’interface du logiciel, la priorité donnée à l’expérimentation et l’apprentissage, ainsi que les nombreuses fonctions que les deux environnements partagent. Les concepteurs de Processing ne cachent pas cet héritage.
La version actuelle de Processing est la version 3.3.6. Les exemples donnés dans ce manuel font référence à cette version du logiciel. Certaines captures d'écrans ont été réalisées avec la version 2.1 ou 1.2.1 de Processing (versions utilisées lors des différentes versions de ce manuel), elles continuent d'être valables malgré les changements
COMMENT UTILISER CE MANUEL
Production originale en français, ce manuel est destiné au public professionnel et amateur qui souhaite s'initier à l'utilisation de Processing. Il ne réclame aucune connaissance préalable de programmation. L'apprentissage de Processing y est fait pas à pas. Nous vous invitons à suivre l'ordre de succession des chapitres, surtout pour les tout premiers qui posent les bases de l'utilisation du logiciel.
La saisie des exemples de programmes proposés dans ce manuel peut constituer à elle seule une expérience formatrice, ne serait-ce qu'en apprenant à éviter de faire des erreurs de frappe. Si cette activité vous rebute ou si vous voulez rapidement expérimenter le résultat d'un exemple, copiez le code du programme depuis les pages web de l'ouvrage (consultables sur la partie francophone du site Flossmanuals à l'adresse http://fr.flossmanuals.net/processing/) pour ensuite le coller directement dans la fenêtre du logiciel.
Disponible en plusieurs formats numériques (html, pdf, ePub) ainsi qu'en version papier, ce manuel est publié sous licence GPLv2 : vous êtes autorisé à le lire et à le copier librement.
Ouvrage collectif, ce manuel est vivant : il évolue au fur et à mesure des contributions. Pour consulter la dernière version actualisée, nous vous invitons à visiter régulièrement le volet francophone de Flossmanuals sur le site http://fr.flossmanuals.net.
Le cœur du manuel d'environ 270 pages a été réalisé en 5 jours dans le cadre d'un Booksprint qui s'est tenu à Paris du 6 au 10 septembre 2010 à l'initiative et avec le soutien de l'Organisation internationale de la Francophonie (http://www.francophonie.org).
2.
EXEMPLES D'UTILISATION
Logiciel de création multimédia, Processing permet de dessiner, réaliser des animations en 2 ou 3 dimensions, créer des œuvres sonores et visuelles, concevoir des objets électroniques qui interagissent avec leur environnement. Des dizaines de milliers d'artistes, de designers, d'architectes, de chercheurs et même d'entreprises l'utilisent pour réaliser des projets incroyables dans de multiples domaines :
Publicités, génériques de films, vidéos clips, dessins animés, Processing permettant de créer des effets visuels
originaux ;
Visualisation de données scientifiques sous la forme
d'images fixes ou animées, facilitant ainsi la représentation d'informations complexes dans de multiples secteurs
professionnels (environnement, transports, économie, sciences humaines, etc.) ;
Production musicale, Processing permettant non seulement
de lire, mais aussi de transformer et de créer du son ;
Spectacle vivant, grâce aux nombreuses fonctions
d'interaction offertes par Processing, il est possible de créer des performances de VJing, utiliser le mouvement des danseurs pour générer en temps réel des effets sonores et visuels dans un spectacle, réaliser des œuvres d'arts numériques interactives ;
Architecture, Processing facilitant la représentation spatiale, il
est utilisé dans des projets d'architecture pour automatiser le dessin de constructions en 2 ou 3 dimensions.
La suite de ce chapitre va vous présenter quelques exemples de travaux réalisés avec l'aide de Processing dans différents contextes.
Des traits apparaissent sur l'écran, se ramifient pour finalement constituer un visage. À partir d'une image d'origine, ce programme d'animation conçu avec Processing simule le développement du mycelium, la partie végétative des champignons, et utilise ce procédé à des fins esthétiques.
Réalisé en 2010 par Ryan Alexander :
http://onecm.com/projects/mycelium/
NY Times est un système de visualisation de données basé sur les flux d'information du site internet New York Times. Utilisant les actualités du journal comme source de données, le programme rend visible sous la forme d'un graphe le degré d'importance des mots employés et leur relation entre eux. Au final, on obtient une série d'images en haute résolution destinée à l'impression.
Réalisé en 2009 par Jer Thrope: http://blog.blprnt.com/blog/blprnt/7-days-of-source-day-2-nytimes-36536
Shadow Monster est une installation interactive qui fonctionne sur le principe des ombres chinoises. Le public qui passe devant l'installation voit son ombre se transformer en monstre, des excroissances étranges poussant instantanément sur les extrémités du corps. Sur cette image, des personnes se sont amusées à réaliser des figures animales avec l'ombre portée de leurs mains, l'installation interactive prenant de son côté l'initiative d'y rajouter des dents, des touffes de cheveux, des antennes ou des yeux.
Réalisé en 2005 par Philip Worthington:
http://worthersoriginal.com/viki/#page=shadowmonsters
L'identité graphique de la Conférence des Nations-Unies sur le climat à été réalisée par un studio londonien avec Processing. Les créatifs de cette agence de communication ont conçu un outil pour générer un logo animé basé sur des principes d'interaction de force illustrant ainsi la complexité des échanges lors de cette conférence.
Réalisée en 2009 par le studio okdeluxe à Londres:
http://www.okdeluxe.co.uk/cop15/
BODY NAVIGATION
Body navigation est une performance scénique. Elle a été réalisée lors d'une collaboration entre la chorégraphe Tina Tarpgaard et le développeur Jonas Jongejan. Les danseurs sont filmés par une caméra infrarouge qui repère leurs déplacements et des visuels générés par Processing sont instantanément projetés autour d'eux. Réalisé en 2008 par Jonas Jongejan et Ole Kristensen :
http://3xw.ole.kristensen.name/works/body-navigation/
Dans le cadre de ce projet artistique, les internautes, jeunes et moins jeunes, ont été invités à dessiner un mouton, référence non dénuée d'humour au Petit Prince d'Antoine de Saint-Exupéry. Ces illustrations ont été regroupées dans une immense base de données accessible en ligne. Processing permet de parcourir les 10 000 dessins et de visualiser leur tracé.
Réalisé en 2008 par Aaron Koblin : http://www.thesheepmarket.com
Les ateliers «Algorithmes sérigraphiques» à Bordeaux & «Code impressions» à l’École des Beaux-Arts d’Aix-en-Provence organisés par l’association Free Art Bureau ont permis à leurs participants de programmer des motifs géométriques au format vectoriel. Ceux-ci ont ensuite été imprimés sur des t-shirts par le procédé traditionnel de la sérigraphie.
MOTIFS GÉNÉRATIFS
Cette affiche fait partie d'une série d’affiches programmée par
Andreas Gysin pour un festival de musique électronique à Zürich,
«The Puddle». Les outils pour générer ces grilles de motifs ont été assemblés avec Processing.
«Alphabet» est un projet de l’artiste Jan Vantomme. Les lettres d’un alphabet ont été modélisées avec une structure particulière grâce à un outil programmé avec Processing. Ces lettres ont été ensuite imprimées en 3D par un procédé spécial (Selective-Laser-Sintering) qui est à rapprocher des procédés d'impression avec des
3.
L'INSTALLATION DE
PROCESSING
Processing étant écrit en Java, et depuis la version 2.1, Processing fonctionne avec la version 7u40 d'Oracle. Les plates-formes les mieux supportées sont néanmoins Microsoft Windows, GNU/Linux et Mac OS X. Il n'est pas nécessaire d'installer Java car Processing l'intègre déjà lorsque vous le téléchargez, et ce sur toutes les plateformes. Pour plus d'informations à ce sujet, vous pouvez consulter la page suivante : http://wiki.processing.org/w/Supported_Platforms#Java_Versions
L'installation proprement dite de Processing est assez simple et dépend de la plate-forme que vous utilisez. Dans tous les cas, allez sur la page de téléchargement http://processing.org/download/ et cliquez sur le nom de votre plate-forme.
Pour la suite de ce chapitre, dans les noms de fichiers et dossiers, le xxx fait référence à la version de Processing utilisée.
SOUS WINDOWS
En cliquant sur Windows dans la page de téléchargement du site de Processing, vous allez télécharger une archive
processing-xxx-windows.zip . Une fois le téléchargement achevé, décompressez
l'archive et placez le dossier Processing extrait de l'archive dans le dossier C:\Program Files\.
Allez ensuite dans le dossier C:\Program Files\Processing et exécutez le fichier processing.exe en cliquant dessus.
SOUS MAC OS X
La version Mac OS X est téléchargée sous la forme d'un fichier .zip. Une fois décompressé, il est recommandé d'installer l'application Processing dans votre dossier Applications. Vous pouvez ensuite double-cliquer sur l'icône.
SOUS GNU/LINUX
Après avoir cliqué sur Linux pour télécharger le fichier
processing-xxx-linux.tgz correspondant à cette plate-forme, il suffit de suivre pas
Il est préférable d'enregistrer (ou copier) le fichier téléchargé dans votre répertoire personnel (exemple : /home/MonDossierPersonnel).
Extraire les contenus du fichier
Cette opération peut être réalisée de 2 manières :
en utilisant votre souris (notamment si vous utilisez la distribution Ubuntu - gnome) : effectuez un clic droit sur le fichier pour faire apparaître le menu contextuel puis cliquez sur Extraire ici (
Extract here ).
pour les plus experts, saisissez et exécutez dans un terminal la commande suivante :
tar -zxvf processing-xxx-linux32.tgz
Dans les deux cas, un dossier processing-xxx sera créé dans votre répertoire personnel, le xxx faisant référence version du logiciel. Ainsi dans le cas de la version 1.2.1 de Processing le nom du dossier s'appellera processing-1.2.1 et le chemin pour accéder à ce répertoire sera /home/MonDossierPersonnel/processing-1.2.1.
Installer Processing
Pour installer Processing, en mode graphique, il suffit de se placer dans le dossier créé et d'effectuer un double clic. Si par contre vous utilisez un terminal, saisissez la commande : cd /home/VotreDossierPersonnel/Processing-xxx/
Autoriser l'exécution de Processing sur votre
ordinateur
Après l'installation du logiciel, il faut s'assurer que le fichier processing contenu dans le dossier du programme (
/home/MonDossierPersonnel/Processing-xxx) est bien exécutable. Ce
n'est pas le cas par défaut.
Dans un terminal, exécutez la commande suivante : chmod +x processing
En mode graphique, effectuez un clic droit sur le fichier
processing puis dans le menu contextuel qui apparaît, cliquez sur propriétés. La boîte de dialogue suivante s'affichera :
Cliquez sur l'onglet Permissions puis cocher la case Autoriser
l'exécution du fichier comme un programme.
Lancer Processing
Pour démarrer le programme Processing dans le terminal (en étant toujours dans le dossier du programme, exemple /home/MonDossierPersonnel/processing-1.2.1/), lancer la commande :
./processing
En mode graphique, faites un double clic sur le fichier processing puis dans la boîte de dialogue qui apparaît, cliquez sur le bouton
4.
LES BASES DE
PROCESSING
Processing propose à la fois un environnement de création complet et un ensemble de fonctionnalités supplémentaires qui viennent enrichir les possibilités du logiciel. Cet environnement permet d'écrire des programmes (appelés sketchs dans Processing), de les convertir en fichiers autonomes, de les publier ainsi que d'identifier et de corriger les erreurs. Il contient les fonctions essentielles à la programmation tout en étant simple d'utilisation.
Processing est basé sur le langage Java. C'est cette syntaxe qui sera utilisée lorsque vous allez programmer. Processing vous facilite la maîtrise de ce langage en se chargeant de manière transparente des opérations relativement complexes comme gérer les fenêtres, le son, la vidéo, la 3D et bien d'autres choses encore. Ce logiciel propose une large palette de fonctionnalités prédéfinies qui simplifie la conception de programmes créatifs, notamment pour les personnes ne
maîtrisant pas les notions complexes de programmation et de mathématiques.
Ce chapitre vous présente les bases de l'interface de Processing et les notions minimales de la syntaxe Java à connaître pour bien débuter. A ce jour, l'interface de Processing propose une interface
d'application en français même si les messages d'erreurs restent pour l'instant en anglais.
L'INTERFACE
L'interface d'utilisation de Processing est composée de deux fenêtres distinctes : la fenêtre principale dans laquelle vous allez créer votre projet et la fenêtre de visualisation dans laquelle vos créations (dessins, animations, vidéos) apparaissent.
On trouve plus précisément les éléments suivants dans l'interface : 1. Barre d'actions
2. Barre d'onglets
3. Zone d'édition (pour y saisir votre programme)
4. Console, qui comprend un onglet les messages affichés par programme un onglet pour les erreurs. Cette console indique aussi si des mises à jour (« updates ») sont disponibles pour les librairies et les modes.
5. Fenêtre de visualisation (espace de dessin) 6. Liste déroulante pour les modes
Barre d'actions
Bouton "Run" : exécute votre sketch (votre programme). Bouton "Stop" : arrête l'exécution de votre sketch. Processing permet de travailler dans plusieurs modes, un mode permettant de programmer dans un environnement spécifique à chaque plateforme visée (ex : application, application pour tablette Android, ...). Ces modes peuvent être gérés depuis une interface spécifique, le « Contribution Manager ».
Vous pouvez changer ce mode à tout moment depuis l’interface, en ayant au préalable sauvegardé votre sketch. Pour plus d’informations sur le rôle des modes dans Processing, veuillez consulter le chapitre à ce sujet.
C'est le dossier dans lequel seront enregistrés les sketchs et les librairies (des modules externes proposant des fonctionnalités supplémentaires). Par défaut ce dossier se nomme Processing et se trouve dans Documents (sous Mac) ou Mes Documents (sous Windows). Sous GNU/Linux, il est dans votre dossier personnel sous le nom de sketchbook.
Pour modifier ce dossier, allez dans le menu Processing >
Préférences. Dans la boîte de dialogue qui apparaît, cliquez sur Naviguer pour choisir le dossier qui vous convient.
A tout moment, pour savoir quel est votre dossier de travail, sélectionnez, dans le menu Sketch > Afficher le dossier. Cette option est également accessible via le raccourci ctrl-k sous Windows/Linux ou cmd-k sur Mac.
BASES DU LANGAGE
Processing utilise le langage Java pour créer vos programmes. Ce langage, qui va être lu par votre ordinateur après avoir cliqué sur le bouton de lancement du sketch, possède un certain nombre de règles de syntaxe qui si elles ne sont pas respectées empêcheront
l'exécution correcte du programme. Il y a aussi un certain nombre de concepts de base nécessaires à connaître.
Majuscules et minuscules
Processing est sensible à la casse, il fait la différence entre les majuscules et les minuscules : libre est différent de Libre !
Le point virgule
A la fin de chaque instruction (dessiner un cercle, effectuer un calcul, etc.), vous devez mettre un « ; » afin de signaler à l'ordinateur la fin de l'instruction. Dans l'exemple ci-dessous, on utilise les caractères « // » pour insérer un commentaire qui sera ignoré lors de l'exécution (la présence de commentaires dans votre programme facilite sa compréhension ultérieure).
//Dessine un cercle ellipse(10,10, 10, 10); //Crée une variable int chiffre = 10 + 23;
Appels de fonctions
Processing propose un grand nombre de fonctionnalités prédéfinies appelées méthodes : dessiner un rectangle, définir une couleur, calculer une racine carrée, etc. Ces méthodes ont chacune un nom spécifique. Pour faire appel à elles, il suffit de taper leur nom en respectant les majuscules et minuscules et de coller des parenthèses après le nom : parfois on doit préciser certaines valeurs à l'intérieur des parenthèses (couleur, position, taille, etc.). L'exemple ci-dessous affiche un cercle gris.
fill(128);
ellipse(50, 50, 60, 60);
Affichage dans la console
La console (la zone 4 dans le schéma de l'interface présenté en début de ce chapitre) permet d'afficher du texte brut à des fins de test et de débogage (correction d'erreurs). Pour afficher quelque chose dans cette zone, il faut utiliser la méthode println();
println(1000);
Par extension, le terme console sert également à désigner la bande grise juste au-dessus de la zone noire de test/débogage : Processing y affiche un certain nombre de messages, notamment pour signaler des erreurs.
Opérations arithmétiques
Processing permet d'effectuer des calculs mathématiques. Tout au long de l'utilisation de cet environnement, vous serez amené à calculer des valeurs. Ne vous inquiétez pas : l'ordinateur le fera pour vous. Les opérations d'addition, soustraction, multiplication et division peuvent être combinées. Il est également possible d'utiliser des parenthèses pour définir l'ordre des opérations.
Attention aux nombres à virgule ! Dans Processing, les unités
sont séparées des décimales par un point et non par une virgule. Voici quelques exemples d'opérations arithmétiques :
println(10 + 5);
println(10 + 5 * 3); // 5*3 (soit 15) puis additionne 10 println((10 + 5) * 3); // 10+5 (soit 15) puis multiplie 15 par 3 println(10.4 + 9.2);
Cette suite d'instructions saisie dans la fenêtre d'édition de Processing va produire dans la console le résultat suivant :
Certaines opérations arithmétiques peuvent être contractées. Par exemple, i++ donne le même résultat que i = i + 1 . Et x+=10 donne le même résultat que x=x+10.
Maintenant que vous connaissez les bases de l'interface de
Processing, il ne vous reste plus qu'à apprendre à écrire du code qui fonctionne pour dessiner et créer ce que vous souhaitez. C'est l'objet des prochains chapitres.
AFFICHAGE DES ERREURS
Processing dispose depuis sa version 3 d'un correcteur de syntaxe qui vous indique les erreurs au fur et à mesure que vous tapez des lignes de code. Il n'est pas possible d'éxécuter un programme qui comprend des erreurs.
Ces erreurs sont indiqués de deux manières différentes :
en sous-lignant en rouge les éléments qui posent problème dans l'éditeur.
en synthétisant l'ensemble des erreurs dans la console dans l'onglet « Erreurs », en précisant la nature du problème et l'onglet de code dans lequel celui-ci apparaît. Un double click sur une erreur vous amènera dans l'éditeur à l'endroit ou Processing a repéré cette erreur.
résolution d'autres erreurs qui sont liées à cette erreur. Il est donc important de corriger les erreurs dans l'ordre dans lequel elles ont été signalées surtout si celles-ci sont « proches » dans l'éditeur de code.
RÉFÉRENCE & EXEMPLES
Comme vous allez le voir tout au long de ce manuel, Processing comprend beaucoup de fonctions et chacune d’elle a sa syntaxe propre. C’est tout naturellement qu’il est proposé avec l’installation de Processing un dictionnaire qui compulse toutes les fonctions, avec ses écritures possibles et des exemples associés. Cette référence est accessible depuis le menu Aide > Documentation (en).
Processing propose en outre une série d’exemples accessibles depuis le menu Fichiers > Exemples. Ces programmes, souvent courts, illustrent une notion fondamentale de programmation (dossier Basics) ou des notions plus avancées (dossier Topics).
Le dossier « Contributed Librairies » est un dossier spécial puisqu'il regroupe les exemples qui sont associés à l'installation d'une librairie. Le bouton « Add Examples ... » de la fenêtre ouverte permet d'accéder au téléchargement et installation de nouveaux exemples et notamment ceux de livres écrits par des experts de Processing, citons notamment « The nature of Code » de Daniel Shiffman et «
Processing Handbook » de Casey Reas et Ben Fry qui sont des
DESSINER
5. L'ESPACE DE DESSIN
6. LES FORMES
7. LES COULEURS
8. LE TEXTE
5.
L'ESPACE DE DESSIN
L'espace de dessin constitue l'espace de représentation proprement dit. Cette fenêtre de visualisation affichera vos réalisations dans Processing en 2 ou 3 dimensions.
Cet espace est créé par l'instruction size() qui prend deux arguments : size(largeur,hauteur);.
Par exemple, dans la fenêtre d'édition du logiciel Processing, saisissez la commande suivante :
Puis cliquez sur le bouton run, votre fenêtre de visualisation se créé :
Amusez-vous à changer les dimensions de cette fenêtre en modifiant les valeurs entre parenthèses pour en voir le résultat.
Par défaut : size();
...affichera une fenêtre de 100 pixels sur 100 pixels.
Félicitations, vous avez créé votre première fenêtre de visualisation !
Quand on travaille en 2 dimensions (2D), on utilise deux axes de coordonnées x et y correspondant respectivement à la largeur (axe horizontal) et à la hauteur (axe vertical) d'une situation. Par convention de la mesure de l'espace, le coin en haut à gauche correspond aux valeurs x=0 et y=0. Les valeurs x sont croissantes vers la droite et les valeurs y sont croissantes vers le bas,
contrairement à notre habitude du plan cartésien. Ces valeurs x et y peuvent s'étendre théoriquement à l'infini, même si, en réalité, les contraintes de la taille de votre fenêtre vont délimiter la taille maximale d’une surface de création visible. C'est donc dans cet espace que nous allons dessiner.
Quand on travaille en 3 dimensions (3D), en plus des deux axes de coordonnées, on a un troisième axe de coordonnées Z, exprimant la profondeur :
Dans ce cas précis, on utilise la commande size avec un troisième paramètre indiquant que l'on travaille dans un espace en 3D size(100, 100, P3D);
CONNAÎTRE LA TAILLE DE L'ESPACE DE
DESSIN
Au sein d'un programme, on peut connaître à tout moment la taille de l'espace de dessin utilisé au moyen des mots-clés width et height. Ces instructions sont très utiles lorsque l'on souhaite notamment dessiner des formes qui puissent s'adapter ultérieurement aux éventuels changements de dimension de la fenêtre de visualisation.
6.
LES FORMES
Beaucoup de formes prédéfinies sont fournies par Processing. En voici les principales :
LE POINT
Pour commencer à dessiner, nous allons partir d'un point. Sur l'écran, un point est l'équivalent d'un pixel localisé dans la fenêtre de visualisation par deux axes de coordonnées, x et y correspondant respectivement à la largeur (axe horizontal) et à la hauteur (axe vertical) de l'espace de dessin. En suivant ce principe, la création d'un point dans Processing s'effectue à l'aide de l'instruction point(x,y). Dans cet exemple, le point est très petit. Il est placé au centre de la fenêtre de visualisation.
point(50, 50);
Notez que le cadre de la fenêtre de visualisation (l'espace de dessin) a une dimension de 100x100, ce qui explique que le point soit situé en plein milieu. Si on le dessinait en dehors du cadre (hors champ), avec par exemple l'instruction size(150,150), on ne le verrait pas.
LA LIGNE
Par définition, une ligne (AB) est constituée par une infinité de points entre un point de départ A et un point d'arrivée B. Pour la construire, nous allons nous intéresser uniquement aux coordonnées x et y de A et de B. Ainsi, si par exemple dans la fenêtre par défaut, le point A se situe dans la région en bas à gauche de votre fenêtre, et que le point B se situe en haut à droite, les instructions suivantes, peuvent dessiner cette ligne sous la forme line(xA,yA,xB,yB) :
line(15, 90, 95, 10);
LE RECTANGLE
Un rectangle se dessine par quatre valeurs en faisant l'appel de rect(x,y,largeur,hauteur). La première paire de valeurs x et y, par défaut (mode CORNER) correspond au coin supérieur gauche du rectangle, à l'instar du point. En revanche la seconde paire de
Exemple :
rect(10, 10, 80, 80);
Comme les deux dernières valeurs (largeur et hauteur) sont
identiques, on obtient un carré. Amusez-vous à changer les valeurs et observez-en les résultats.
Pour que la première paire de valeurs corresponde au centre (le croisement des deux diagonales aux coordonnées 50, 50) du rectangle, il faut utiliser le mode CENTER comme suit : rectMode(CENTER);
rect(50, 50, 80, 40);
Cela donne le résultat identique à l'exemple précédent.
L'ELLIPSE
Comme pour le rectangle, l'ellipse se construit sous les modes CENTER (par défaut), et CORNER. Ainsi l'instruction suivante produit un cercle dont les coordonnées du centre sont les deux premières valeurs entre parenthèses. La troisième valeur correspond à la grandeur du diamètre sur l'axe horizontal (x) et la quatrième à la grandeur du diamètre sur l'axe vertical : notez que si les 3e et 4e valeurs sont identiques, on dessine un cercle et dans le cas contraire, une ellipse quelconque :
ellipse(50, 50, 80, 80);
Amusez-vous à faire varier les 3e et 4e valeurs et observez-en les résultats.
LE TRIANGLE
Le triangle est un plan constitué de trois points. L'invocation de triangle(x1,y1,x2,y2,x3,y3) définit les trois points de ce triangle : triangle(10, 90, 50, 10, 90, 90);
Un arc ou section de cercle, peut se dessiner avec l'appel de arc(x, y, largeur, hauteur, début, fin), où la paire x, y définit le centre du cercle, la seconde paire ses dimensions et la troisième paire, le début et la fin de l'angle d'arc en radians :
arc(50, 50, 90, 90, 0, PI);
LE QUADRILATÈRE
Le quadrilatère se construit en spécifiant quatre paires de
coordonnées x et y sous la forme quad(x1,y1,x2,y2,x3,y3,x4,y4) dans le sens horaire :
quad(10, 10, 30, 15, 90, 80, 20, 80);
COURBE
Une courbe se dessine à l'aide de curve(x1, y1, x2, y2, x3, y3, x4, y4), où x1 et y1 définissent le premier point de contrôle, x4 et y4 le second point de contrôle , x2 et y2 le point de départ de la courbe et x3, y3 le point d'arrivée de la courbe :
curve(0, 300, 10, 60, 90, 60, 200, 100);
COURBE BÉZIER
La courbe de type Bézier se construit à l'aide de bezier(x1,y1,x2,y2,x3,y3,x4,y4)
bezier(10, 10, 70, 30, 30, 70, 90, 90);
L'appel de curveVertex() dessine plusieurs paires de coordonnées x et y, entre deux points de contrôle, sous la forme curveVertex(point de contrôle initial,xN,yN,xN,yN,xN,yN, point de contrôle final) ce qui permet de construire des courbes lissées :
beginShape(); curveVertex(0, 100); curveVertex(10, 90); curveVertex(25, 70); curveVertex(50, 10); curveVertex(75, 70); curveVertex(90, 90); curveVertex(100, 100); endShape();
FORMES LIBRES
Plusieurs formes libres peuvent être dessinés par une succession de points en utilisant la suite d'instructions
beginShape(),vertex(x,y),...,endShape(). Chaque point se construit par ses coordonnées x et y. La fonction CLOSE dans endShape(CLOSE) indique que la figure sera fermée, c'est-à-dire que le dernier point sera relié au premier, comme dans l'exemple ci-dessous de dessin d'un hexagone : beginShape(); vertex(50, 10); vertex(85, 30); vertex(85, 70); vertex(50, 90); vertex(15, 70); vertex(15, 30); endShape(CLOSE);
CONTOURS
Vous avez remarqué que jusqu'à présent, toutes les figures données en exemple comportent un contour, ainsi qu'une surface de remplissage. Si vous voulez rendre invisible le contour, utilisez noStroke() en faisant bien attention de le placer avant la forme à dessiner :
noStroke();
REMPLISSAGE
De la même manière, il est possible de dessiner des formes sans surface de remplissage avec l'instruction noFill() :
noFill();
quad(10, 10, 30, 15, 90, 80, 20, 80);
Par défaut, l'arrière-fond de la fenêtre de visualisation (l'espace de dessin) est gris neutre, les contours des figures sont noirs, et la surface de remplissage est blanche. Vous apprendrez au prochain chapitre comment modifier les couleurs à votre convenance.
PRIMITIVES 3D
Les formes prédéfinies disponibles en 3 dimensions (primitives 3D) peuvent être réalisées de manière simple en appelant size(x, y, P3D) au début de notre sketch puis en employant en fonction de vos besoins les instructions sphere(taille) et box(longueur, largeur, profondeur). Il est également possible de produire des effets d'éclairage sur nos formes tridimensionnelles à l'aide de lights().
La sphère
size(100, 100, P3D); noStroke();
lights(); // éclairer l'objet 3D
translate(50, 50, 0); // voir Chapitre "Transformations" sphere(28);
La boîte
size(100, 100, P3D); noStroke(); lights(); translate(50, 50, 0); rotateY(0.5); box(40);7.
LES COULEURS
Dessiner une image à l'écran, c'est changer la couleur des pixels. Les pixels sont des petites zones, le plus souvent carrées, qui possèdent une couleur. Chaque couleur se définit par trois canaux qui sont le rouge, le vert et le bleu. Une valeur de 100% de chacun de ces trois canaux donne du blanc. Une valeur de 0% de chacun de ces trois canaux donne du noir. Il s'agit de lumière, et non de peinture. Ainsi, plus la valeur de chaque canal sera importante, plus la couleur sera lumineuse.
Par exemple, 100% de rouge, 80% de vert et 20% de bleu vont donner ensemble la couleur orange. La méthode fill() nous permet de spécifier la couleur des prochaines formes à dessiner. Chaque canal d'une couleur peut être donné sur une échelle de 0 à 255. Ainsi, 80% de 255 donne 204, et 20% de 255 donne 51.
LA COULEUR DE FOND
On peut changer la couleur de fond en appelant la méthode background(). Attention : rajouter background() à la suite d'une composition déjà existante, l'effacerait !
background(0, 0, 0);
LA COULEUR DE REMPLISSAGE
A chaque fois que l'on dessine une forme, on le fait avec la couleur de remplissage qui est choisie à ce moment-là. On le fait en appelant la méthode fill().
noStroke(); fill(255, 204, 51); rect(25, 25, 50, 50);
Processing nous offre différents formats pour exprimer la couleur. Si vous faites de la programmation Web, vous connaissez sans doute le format hexadécimal. Selon ce procédé, la même couleur orange peut être obtenue en écrivant :
fill(#ffcc33); rect(25, 25, 50, 50);
Par ailleurs, il est possible de spécifier la valeur du canal alpha de la couleur utilisée, c'est-à-dire son degré de transparence. Pour ce faire, on doit donc préciser quatre paramètres à la méthode fill(). Le quatrième argument est la valeur alpha.
noStroke();
fill(255, 204, 51); // orange rect(25, 25, 50, 50);
fill(255, 255, 255, 127); // blanc semi-transparent rect(35, 35, 50, 50);
Si l'on souhaite choisir une couleur qui correspond à un ton de gris, il suffit de donner un seul paramètre à la méthode fill(). C'est la valeur de gris, de 0 à 255.
fill(127);
rect(25, 25, 50, 50);
On peut désactiver le remplissage des formes en appelant la méthode noFill().
LA COULEUR DU CONTOUR
Pour changer la couleur du contour des formes que l'on dessine, on doit appeler la méthode stroke() avec comme paramètres les canaux de la couleur désirée. Appeler noStroke() désactive la couleur de contour. A titre d'illustration, voici un dessin de masque africain utilisant ces deux instructions :
size(200, 200); smooth();
background(255); // on dessine un fond blanc stroke(#000000); // le contour sera noir fill(#FFCC66); // le remplissage sera jaune strokeWeight(3);
ellipse(0, 0, 100, 180); // forme elliptique du masque ellipse(0, 60, 20, 25); // ellipse de la bouche stroke(255, 0, 0); // le contour sera rouge
ellipse(28, -30, 25, 10); // ellipse de l'oeil droit stroke(0, 0, 255); // le contour sera bleu
ellipse(-27, -30, 25, 10); // ellipse de l'oeil gauche noFill(); // les prochaines formes n'auront pas de remplissage stroke(#000000); // le contour des prochaines formes sera noir bezier(-30, -70, -5, -60, -5, 0, -5, 20); // courbe du sourcil droit bezier(30, -70, 5, -60, 5, 0, 5, 20); // courbe du sourcil gauche line(-5, 20, 5, 20); // ligne du nez pour joindre l'extrémité des courbes
LA PORTÉE DES MODIFICATIONS DE
COULEUR
Par défaut, toute modification de style (couleur de remplissage ou de contour, épaisseur ou forme de trait) s'appliquera à tout ce que vous dessinerez ensuite. Pour limiter la portée de ces modifications, vous pouvez les encadrer par les commandes pushStyle() et popStyle().
size(100, 100); background(255); stroke(#000000); fill(#FFFF00); strokeWeight(1); rect(10, 10, 10, 10);
pushStyle(); // On ouvre « une parenthèse » de style stroke(#FF0000);
fill(#00FF00); strokeWeight(5); rect(40, 40, 20, 20);
popStyle(); // On ferme notre parenthèse de style rect(80, 80, 10, 10);
Exercice :
Supprimez les commandes pushStyle() et popStyle() et observez la différence de comportement.
Définir des couleurs à partir des canaux rouge, vert et bleu constitue un moyen parmi d'autres de décrire l'espace colorimétrique de votre dessin. Processing supporte également le mode TSV. TSV signifie « teinte, saturation, valeur ». En anglais, on appelle ce mode HSB, pour « hue, saturation, brightness ». On choisit une échelle de 0 à 100 pour chacun de ces 3 canaux. La teinte correspond à un chiffre indiquant la position de la couleur sur l'échelle chromatique, soit un arc-en-ciel. Le rouge est à gauche, puis viens l'orange, le jaune, le vert, le bleu et le violet.
La méthode colorMode() est utile pour changer l'échelle numérique que l'on utilise pour spécifier les couleurs, et pour changer d'espace colorimétrique. Par exemple, appeler colorMode(RGB, 1.0), va changer l'échelle que l'on utilise pour spécifier chaque canal des couleurs afin qu'il aille de zéro à un.
Ici, on change le mode de couleur pour le TSV afin de créer un dégradé de teinte qui ressemble aux couleurs d'un arc-en-ciel.
noStroke(); size(400, 128);
// La teinte sera spécifiée avec un chiffre de 0 à 400 colorMode(HSB, 400, 100, 100);
// On fait quatre cent répétitions for (int i = 0; i < 400; i++) { fill(i, 128, 128);
rect(i, 0, 1, 128); }
8.
LE TEXTE
On va maintenant dessiner des caractères textuels qui s'afficheront dans la fenêtre de visualisation. Attention : écrire dans l'espace de dessin ne ressemble pas à l'écriture dans le sens classique du terme, notamment comme dans un traitement de texte. Le texte dans Processing ressemblerait plutôt à du « graffiti urbain », c'est-à-dire à une sorte de peinture de caractères alphanumériques qui finiront tous par s’empiler les uns sur les autres. C'est davantage un procédé « typographique » qu'un travail d'écriture, avec une insistance sur l'aspect graphique des mots ou des lettres que nous allons dessiner.
BONJOUR PROCESSING !
Tout comme les formes prédéfinies, telles les lignes ou les ellipses, il suffit d'une seule instruction dans notre sketch pour dessiner du texte. Ouvrez une nouvelle fenêtre d'édition, tapez la ligne suivante, et exécutez-la en cliquant sur le bouton run :
text("Salut!", 10, 20);
Vous devriez voir s'afficher la petite fenêtre de visualisation par défaut de 100 x 100 pixels, avec le mot « »Salut ! » écrit en blanc :
Comme son nom l'indique, l'instruction text() dessine du texte dans la fenêtre de visualisation. Elle requiert trois paramètres : {le message que nous voulons écrire}, {sa coordonnée x}, {sa coordonnée y}. Ce texte peut également être coloré, comme n'importe quelle forme géométrique, en changeant la couleur de remplissage :
fill(0); text("Salut", 10, 20); fill(255); text("tout", 10, 40); fill(255,0,0); text("le", 10, 60); fill(0,0,255); text("monde", 10, 80);
Ce programme devrait vous donner le résultat suivant, avec chacun des quatre mots écrits avec leur propre couleur :
Il suffit d'indiquer une couleur, puis dessiner du texte avec cette couleur. Bien sûr vous pouvez ne choisir qu'une seule couleur et dessiner plusieurs messages avec cette couleur, ou dessiner avec une combinaison de couleurs comme dans cet exemple.
EMPILEMENT
Comme nous l'avons indiqué dans l'introduction de ce chapitre, les mots s'inscrivent à l'intérieur de la fenêtre de visualisation tel un dessin et non pas tel un système de traitement de texte. On ne peut ni sélectionner ni modifier directement ce texte à l'aide de la souris ou du clavier. La seule modification qui peut être appliquée s'effectue au niveau de votre programme en précisant à l'aide d'instructions appropriées que vous souhaitez par la suite effacer complètement le texte et d'écrire par dessus.
Voici une illustration rapide de ce principe de superposition : fill(0);
text("un mot peut", 10, 20); text("en cacher", 10, 40); fill(204); rect(28,25,50,20); fill(0); text("un autre", 10, 60); fill(255, 255, 255); text("un autre", 11, 61);
Nous avons écrit quatre messages, parfois avec la même couleur, parfois avec une autre. Notez que le mot « cacher » a été caché justement par la couleur de remplissage qui a été définie avec la même valeur que celle utilisée pour dessiner le fond.
Comme dans n'importe quel dessin, l'ordre des opérations est important pour déterminer le rendu final. Ce principe s'applique même en dehors du logiciel Processing : « s'habiller, sortir, aller au travail » ne donnera pas le même résultat que « sortir, aller au travail, s'habiller ».
DESSINER PLUS
9. LES IMAGES
10. LES STYLES DE BORDURES
11. LA TYPOGRAPHIE
9.
LES IMAGES
Ce que nous appelons « image » dans Processing n'est en fait rien d'autre qu'une collection de pixels, rassemblés à l'intérieur d'un rectangle. Pour dessiner une image à l'écran, nous devons donner une couleur à chacun des pixels d'un rectangle, puis donner la position en {x,y} où nous voulons dessiner cette collection de pixels. Il est aussi possible de modifier la taille {largeur,hauteur} de notre image, même si ces dimensions ne correspondent pas à la taille originelle de l'image.
TROUVER UNE IMAGE
Pour dessiner une image dans Processing, il faut commencer par trouver une image et l'importer dans notre sketch. Vous pouvez prendre une photo à l'aide de votre appareil numérique ou directement depuis votre webcam ou bien encore effectuer une recherche d'images se trouvant déjà dans le disque dur de votre ordinateur. Pour cet exercice, l'origine de l'image importe peu. Par contre, nous recommandons de commencer avec une image relativement petite, par exemple d'une largeur de 400 x 300 pixels.
Ici nous allons commencer avec une image légèrement réduite de l'île des peupliers à Ermenonville, trouvée sur le site Commons de Wikimedia (base de données d'images et de médias appartenant au domaine public ou sous licence libre) à l'adresse suivante :
http://fr.wikipedia.org/wiki/Fichier:Erm6.JPG
FORMATS D'IMAGE
Trois formats de fichier d'image sont acceptés dans Processing : PNG, JPEG, ou GIF. Ceux qui ont de l'expérience dans la conception de sites web devraient reconnaître ces trois formats, car ce sont les plus répandus sur la Toile. Chaque format utilise ses propres méthodes de
compression de l'image (réduction de la taille mémoire de l'image
1. JPEG est souvent utilisé pour compresser des images de type photographique. Ce format ne permet pas d'avoir des zones transparentes.
2. GIF est historiquement utilisé pour l'illustration de boutons et autres éléments graphiques de l'espace de travail d'un programme. Sur les sites internet, ce format est utilisé pour les logos et de manière générale pour les dessins réalisés par ordinateur (notamment ceux qui comportent des aplats de couleurs). Ce format peut contenir des zones transparentes binaires (soit opaques soit transparentes, sans possibilité d'opacité intermédiaire). Il existe des images gif animées, mais Processing ignorera cet aspect.
3. PNG est de plus en plus utilisé pour les deux usages (photos + dessins) et peut contenir des zones transparentes non binaires, offrant des niveaux d'opacité (opaque, semi-opaque, totalement transparent).
GLISSER-DÉPOSER
Nous allons maintenant importer le fichier de cette image dans l'environnement Processing. Pour bien réussir cette étape, nous vous recommandons de sauvegarder d'abord votre sketch, de préférence dans le dossier processing qui devrait se trouver par défaut dans le dossier Documents ou Mes documents de votre ordinateur. Localisez maintenant votre fichier d'image, et glissez-le directement sur la fenêtre Processing :
Lorsque nous glissons les fichiers de cette manière, Processing nous indique dans la bande grisée de la console qu'il a ajouté ce fichier « dans le sketch ». En réalité, Processing a simplement copié cette image dans un dossier nommé data, qui devrait maintenant se trouver à côté de votre programme.pde que vous venez de sauvegarder.
C'est dans ce dossier data que nous devons placer en réalité toutes les images dont nous voulons nous servir dans notre sketch. C'est dans cet emplacement que doivent également être rangés les autres fichiers médias comme les polices ou les sons.
Pour accéder rapidement à ce dossier, afin par exemple d'y placer de nouveaux fichiers d'images, il suffit de sélectionner, dans le menu
Sketch, l'option Affcher le dossier. Cette option est également
accessible via le raccourci Ctrl-k sur Windows et GNU/Linux ou Cmd-k sur Mac :
Maintenant que nous avons placé une image dans notre dossier data, nous pouvons désormais nous en servir dans notre programme. size(500,400);
PImage ile;
ile = loadImage("ile.jpg"); image(ile,50,10);
D'abord nous avons donné à notre espace de dessin une taille plus grande que notre image, juste pour mieux comprendre comment celle-ci peut être positionnée dans le sketch final.
Il y a trois étapes pour afficher une image dans Processing : 1. Créer une variable qui contiendra les données (en pixels) de
notre image.
2. Importer les pixels d'un fichier dans notre variable. 3. Dessiner les pixels de cette variable dans notre espace de
dessin.
Tout d'abord, nous devons créer une variable Processing, avant d'importer notre fichier dedans. Mais avant tout, à quoi sert une
variable ? Et bien dans ce cas précis, il s'agit d'un nom interne à
notre programme qui contient l'ensemble des pixels de notre fichier
ile.jpg. À chaque fois que nous écrirons par la suite le mot « ile » dans notre programme, Processing comprendra qu'il s'agit de la suite de valeurs en pixels qui composent notre image. C'est justement le rôle de cette action loadImage("nomdefichier") d'aller chercher ces pixels dans le fichier et les importer dans notre variable nommé « ile ».
Vous avez peut-être également noté un mot étrange au tout début du code ci-dessus, le mot PImage. Celui-ci indique à Processing le genre de la variable et lui permettra de consacrer assez de mémoire dans votre ordinateur pour contenir l'ensemble des données de ce genre. Dans le cas de n'importe quelle variable, la syntaxe à utiliser est {type de la variable} {nom de la variable} = {les valeurs de la variable}.
Par exemple, si par un tour de force il était possible d'importer un petit chien tout mignon dans Processing, il suffirait d'écrire PetitChiot milou = loadDog("milou.dog"); On écrit d'abord le type de la chose, le
nom de la chose, et enfin on lui donne sa valeur.
Ici, cette valeur est donnée par la fonction loadImage() qui va aller chercher les pixels de l'image dans le fichier et les importera dans notre variable nommée ile.
Pour plus d'informations sur les variables et les différents types de variables, reportez-vous au chapitre dédié à ce sujet.
Enfin, une fois notre variable remplie, nous la dessinons à une position {x,y} dans notre sketch. Si nous voulons dessiner notre image à sa taille originelle, nous utilisons la version courte de l'instruction image qui nécessite uniquement trois paramètres : {PImage}, {x}, {y}.
image(ile,50,10)
IMPORTER UNE IMAGE WEB
Nous pouvons également importer des images directement depuis Internet, en indiquant l'adresse web de l'image à la place du nom de fichier. size(400,400); PImage webcam; webcam = loadImage("http://www.gutenberg.org/files/3913/3913-h/images/rousseau.jpg"); image(webcam,10,20,width,height);
Si notre programme n'est pas animé, comme c'est le cas ici, il y aura juste une longue pause lorsque l'image se charge dans Processing. Par contre, faites bien attention à placer ce type d'instructions au début du sketch sinon vous risquez de ralentir fortement le fonctionnement des autres parties du programme, celles-ci devant attendre le téléchargement complet de vos images depuis Internet avant de s'exécuter. Dans des cas très spécifiques, si vous avez besoin d'importer des images web en plein milieu de votre sketch, sachez qu'il existe des techniques appropriées dénommées « fils d'exécution ». Ces techniques séparent le chargement de fichiers médias depuis internet du reste des fonctions du programme. Il s'agit malheureusement d'un sujet trop avancé pour ce manuel. Pour davantage d'informations sur les fils d’exécution, reportez-vous au forum du site de Processing en faisant une recherche sur le mot « thread ».
En ajoutant deux paramètres, nous pouvons changer la taille de l'image. Cette taille peut être plus petite ou plus grande que l'image d'origine, et à priori il n'y a pas vraiment de limite. Par contre, au-delà de la taille d'origine de l'image, Processing sera obligé d'inventer des pixels en doublant les originaux, ce qui donnera un effet pixelisé. Cet effet n'est pas forcément indésirable, à vous de voir.
Pour changer la taille de l'image, il suffit de rajouter deux paramètres à votre image, {largeur, hauteur}, ce qui nous amène à 5
paramètres : {variableImage, x, y, largeur,hauteur}.
size(500,250); PImage ile; ile = loadImage("ile.jpg"); image(ile,10,10,20,15); image(ile,20,20,50,30); image(ile,45,45,100,75); image(ile,95,95,1000,750);
Notez que nous avons importé qu'une seule fois l'image dans notre variable ile et que celle-ci peut être dorénavant utilisée pour le restant de notre programme. Notez également que nous avons respecté les proportions {x,y} de notre image dans le changement de la taille, mais que celles-ci auraient pu prendre n'importe quelle valeur, ce qui reviendrait à étirer l'image sur un de ces deux axes.
RENDRE TRANSPARENT L'ARRIÈRE-PLAN
D'UNE IMAGE
Souvent nous avons besoin d'importer des images qui ne sont ni carrées, ni rectangulaires, comme dans le cas d'un petit jeu vidéo utilisant des silhouettes de personnages en deux dimensions : nous ne voulons pas voir en permanence un carré blanc autour du profil de notre héros. Malheureusement, à ce jour, les images à base de pixels doivent être importées dans un format carré.
Pour lever cette contrainte, certains formats de fichiers font appel à une couche alpha pour gérer la transparence de certaines zones de l'image et ainsi laisser apparaître les éléments qui sont situés derrière elles (un fond coloré ou illustré par exemple). Cette couche se superpose aux couches rouge, vert, bleu utilisées pour composer l'image et indique l'intensité de la transparence pour chaque pixel, avec même la possibilité de pixels semi-transparents dans le cas du format PNG.
Si vous voulez sauvegarder votre image avec une couche alpha, vous avez trois possibilités qu'il faut choisir lors de l'exportation de votre image dans votre logiciel de traitement d'image préféré :
Chaque logiciel exportera les images à sa manière. Sachez juste qu'il existe une différence par exemple entre GIF, PNG-8, et PNG-24, notamment sur la façon dont chaque format va traiter cette couche alpha. Le plus sûr des trois, et qui vous donnera plus d'options, c'est le
PNG-24.
Voici une image du philosophe Jean-Jacques Rousseau avec un fond transparent.
Quel que soit le fond sur lequel elle sera placée, cette image s'y intégrera parfaitement parce qu'elle contient justement une couche alpha décrivant les parties transparentes et non transparentes du carré de pixels qui la composent. Notez que les pixels autour de Rousseau sont transparents, alors que son front et son cou sont opaques.
N'hésitez pas à copier cette image au format png sur votre ordinateur depuis la version en ligne de ce manuel :
http://fr.flossmanuals.net/processing/, chapitre Les images (conçue à partir d'une illustration mise à disposition sur le site Commons de Wikimedia, cette image est libre de droits).
Dans notre programme Processing, nous allons pouvoir constater que les pixels situés autour du personnage sont effectivement
transparents en superposant l'image de Rousseau (au format png) avec celle du paysage précédemment utilisé (au format jpg) :
size(400,300); PImage ile; ile = loadImage("ile.jpg"); PImage rousseau; rousseau = loadImage("rousseau.png"); image(ile,0,0); image(rousseau,20,20);
COLORIER LES IMAGES
On peut également colorier les images. Autrement dit, on peut changer la couleur des pixels, soit dans leur ensemble, soit individuellement. La plus simple de ces méthodes concerne le coloriage de l'ensemble des pixels. Cette méthode de coloriage ressemble à peu près au coloriage de rectangles, mais nécessite une nouvelle instruction, tint(), pour le distinguer du coloriage direct des pixels à l'intérieur du rectangle. Dans le cas de tint(), Processing va modifier la couleur de chaque pixel au moment où celui-ci est dessiné dans l'espace de dessin.
size(500,130); PImage ile; ile = loadImage("ile.jpg"); tint(255,0,0); image(ile, 10,10, 110,110); tint(255,255,0); image(ile, 130,10, 110,110); tint(255,255,255,127); image(ile, 250,10, 110,110); tint(0,0,255,127); image(ile, 320,10, 110,110);
Tout comme les instructions fill() et stroke(), l'instruction tint() peut prendre une, deux, trois, ou quatre valeurs, selon ce que nous voulons faire. En indiquant trois paramètres, par exemple, nous pouvons augmenter/diminuer l'intensité de la couche rouge, vert, ou
bleu de notre image. En indiquant quatre paramètres, nous pouvons
augmenter/diminuer, en plus de ces trois couleurs, la valeur de
10.
LES STYLES DE
BORDURES
Le style des traits et des bordures des formes géométriques peut être ajusté afin d'éviter l'apparition d'effets graphiques indésirables sur les lignes obliques, aux intersections ou en bout de ligne. Différentes commandes permettant d'affiner le rendu sont présentées ci-dessous.
SMOOTH
La méthode smooth() permet d'activer le lissage des contours. Elle permet d'éviter l'effet d'escalier qui apparaît sur les lignes diagonales. line(10, 0, 100, 90); // Ligne sans lissage
//On active le lissage smooth();
line(0, 10, 90, 100); // Ligne lissée
STROKEWEIGHT
La méthode strokeWeight() permet de varier l'épaisseur d'une ligne ou d'un contour.
line(10, 0, 100, 90); // Ligne de 1 pixel d'épaisseur strokeWeight(5); //On définit l'épaisseur à 5 pixels line(0, 10, 90, 100); // Ligne de 5 pixels d'épaisseur
STROKECAP
La méthode strokeCap() permet de définir l'apparence des extrémités d'une ligne. Cette méthode n'est pas utile pour les formes. Elle peut avoir les valeurs SQUARE (extrémité carré), PROJECT (extrémité avec 2 petits angles brisés) ou ROUND (extrémité arrondie). Par défaut c'est le mode ROUND qui est utilisé. Cette méthode ne fonctionne pas avec P3D ou OpenGL.
strokeWeight(10); // On définit l'épaisseur des traits à 10 pixels strokeCap(ROUND); // extrémité arrondie
line(20, 40, 60, 80);
strokeCap(PROJECT); // extrémité avec 2 petits angles brisés line(20, 20, 80, 80);
line(20, 20, 80, 80);
strokeCap(SQUARE); // extrémité carré line(40, 20, 80, 60);
STROKEJOIN
La méthode strokeJoin() permet de modifier l'aspect des jointures. Elle peut avoir les valeurs MITER, BEVEL ou ROUND. Par défaut c'est le mode MITER qui est utilisé. Cette méthode ne fonctionne pas avec P3D ou OpenGL.
size(300, 100); // On modifie la taille du sketch strokeWeight(10); // On définit l'épaisseur à 10 pixels strokeJoin(MITER); // Jointure carré
rect(20, 20, 60, 60);
strokeJoin(BEVEL); // Jointure brisée rect(120, 20, 60, 60);
strokeJoin(ROUND); // Jointure arrondie rect(220, 20, 60, 60);
11.
LA TYPOGRAPHIE
Ce chapitre va vous permettre de personnaliser l'usage des textes dans Processing en utilisant des polices de caractères alternatives.
LA FORME DES MOTS
Si nous voulons dessiner avec une autre forme typographique que celle définie par défaut, il faut effectuer quelques étapes préalables :
1. Convertir une police de caractères en un format de fichier compatible avec Processing ;
2. importer ce fichier dans le code du programme (ce fichier comporte toutes les informations graphiques décrivant l'apparence de la police utilisée) ;
3. sélectionner cette police et l'activer dans notre programme ; 4. dessiner du texte dans notre sketch à l'aide des instructions
appropriées pour que le résultat s'affiche dans la fenêtre de visualisation de Processing.
IMPORTER UNE POLICE DE CARACTÈRES
Pour dessiner du texte dans notre fenêtre de visualisation, il faut choisir tout d'abord son apparence, en indiquant sa police de caractères. Pour bien réussir cette étape, nous vous recommandons de sauvegarder d'abord votre sketch dans votre dossier de travail (voir chapitre Bases de Processing). Une fois notre sketch sauvegardé, nous allons sélectionner, dans le menu Outils, l'action
Générer la police...
A priori nous devrions maintenant voir une fenêtre Créer la police qui permet de convertir quasiment n'importe quelle police de caractère en une forme utilisable dans notre sketch. Cette police doit être installée au préalable dans notre ordinateur pour qu'elle apparaisse dans cette liste.
Cette fenêtre est décomposée en quatre parties :
1. La liste des polices actuellement installées sur notre ordinateur, 2. Une prévisualisation de la police actuellement sélectionnée,
affichée à la taille indiquée dans le prochain champ (la zone numérotée 3 dans la copie d'écran ci-dessus),
3. À peu près la taille maximale à laquelle nous voulons dessiner cette police,
4. Le nom du fichier de cette police, une fois convertie dans le format natif de Processing (.vlw).
Vous avez peut-être noté qu'il existe également une case à cocher
Smooth qui active/désactive l'antialiasing (fonction de lissage des
polices pour éviter un effet de crénelage), ainsi qu'un bouton
Characters... qui permet de préciser les caractères spéciaux qui
doivent être inclus lors de la conversation de la police. Pour ne pas compliquer les choses, nous allons laisser ces deux options avec leurs valeurs par défaut.
Dans l'illustration ci-dessus nous avons sélectionné la police Georgia. C'est à partir du nom de cette police et de sa taille que Processing générera le fichier de la police à importer, ex : « Georgia-Italic-48.vlw
». Notons enfin que l'extension « .vlw » associée à l'intitulé du fichier
sera rajoutée à toutes les polices que nous importerons de cette manière. Si par curiosité vous vous intéressez à l'origine de cette extension, son nom fait référence sous forme d'un acronyme au « Visual Language Workshop » (vlw) du MIT Media Lab. C'est ce laboratoire qui historiquement est à l'origine d'un certain nombre de principes et de travaux qui ont permis à Processing de voir le jour. Si nous voulons savoir où Processing a sauvegardé notre police, il suffit de sélectionner, dans le menu Sketch, l'action Afficher le
dossier.
Cette action fera apparaître le dossier « data » dans lequel notre police a été sauvegardée. Son fichier s'appelle « Georgia-Italic-48.vlw ». C'est ce nom que nous devons retenir pour intégrer la police dans notre programme.
DESSINER UNE PHRASE
Nous allons enfin dessiner avec notre police. Pour cela, il faut faire trois choses :
1. Importer le fichier Georgia-Italic-48.vlw dans une variable afin que notre programme connaisse le nom de la police utilisée et sache la dessiner lorsqu'il affichera du texte. Ce fichier contient en effet les informations décrivant la structure géométrique de la police pour pouvoir la reproduire ;
2. Sélectionner cette variable dans notre programme comme police active ;
3. Dessiner un caractère ou une phrase quelque part dans notre sketch à l'aide des instructions appropriées pour le voir ensuite s'afficher dans la fenêtre de visualisation de Processing. En option, il est possible de choisir la taille à laquelle nous voulons dessiner avec notre police, mais comme nous avons déjà paramétré cet aspect lors de la création du fichier, il ne sera pas nécessaire de l'indiquer ici.
Voici le code complet d'un programme simple qui réunit toutes ces étapes pour dessiner une phrase dans la fenêtre de visualisation. Par tradition, nous allons faire nos premiers pas dans l'écriture en écrivant « Salut tout le monde ! ».
size(500,150); PFont police;
police = loadFont("Georgia-Italic-48.vlw"); textFont(police,48);
text("Salut tout le monde !", 20, 75);
Tout d'abord, nous avons fixé la taille de notre fenêtre de visualisation (l'espace de dessin), comme dans quasiment n'importe quel
programme Processing.
Ensuite, nous avons importé notre fichier dans une variable Processing (dénommée police). A quoi sert une variable ? Et bien dans ce cas précis, il s'agit d'un nom interne à notre programme qui fait référence au fichier de la police Georgia-Italic-48.vlw que nous souhaitons utiliser. A chaque fois que nous écrirons par la suite le mot police dans notre programme, Processing comprendra qu'il s'agit de faire appel à la police Georgia Italic 48 contenue désormais dans ce mot.
Vous avez peut-être également noté un mot étrange en tout début de cette phrase, le mot PFont. Celui-ci indique à Processing le genre de la variable et lui permettra d'ouvrir assez de mémoire pour contenir l'ensemble des données de ce genre. Dans le cas de n'importe quelle variable, la syntaxe à utiliser est {type de la variable} {nom de la variable} = {les valeurs de la variable}.
Par exemple, si par un tour de force il était possible d'importer un petit chaton tout mignon dans Processing il suffirait d'écrire petitChaton mioumiou = loadPetitChaton("mioumiou.chat"); On écrit d'abord le type de la chose, le nom de la chose, et enfin on lui donne sa valeur. Ici, cette valeur est donnée par la fonction loadFont() qui va aller chercher la structure géométrique de la police dans le fichier et l'importera dans notre variable nommée « police ».
La suite de notre programme est probablement un peu plus intuitive. Nous sélectionnons la police avec laquelle nous voulons dessiner. Même s'il n'existe qu'une seule police actuellement dans notre programme, il faut néanmoins passer par cette étape. Notez que vous pouvez importer autant de polices que vous voulez et passer de l'un à l'autre, à l'image de ce qu'il est possible de faire avec les couleurs.
Dans cet exemple, nous avons indiqué la taille de la police juste pour vous montrer qu'il est possible de la changer en cours de route. Enfin, nous dessinons une petite phrase et indiquons la position {x,y} où notre texte doit se dessiner. On obtient le résultat suivant :
POINT D'ORIGINE
Pour rendre plus clair le rapport entre la position {x,y} de notre message et sa forme typographique, nous avons également dessiné dans l'illustration ci-dessus une petite croix pour rendre plus explicite la façon dont Processing positionne l'écriture :
size(500,150); PFont police;
police = loadFont("Georgia-Italic-48.vlw"); textFont(police);
text("Salut tout le monde !", 20, 75); // indiquer la position d'origine du texte stroke(255,0,0);
line(15,70,25,80); line(15,80,25,70);
Tout comme les rectangles, qui peuvent se dessiner depuis leur point supérieur gauche, depuis leur centre, ou depuis ses quatre
extrémités, l’écriture du texte peut également être positionnée à partir de plusieurs points d'origine. Par défaut, le texte s'écrit depuis la ligne de base du texte, c'est-à-dire le point en bas à gauche du texte, mais au-dessus des caractères descendants comme les lettres « y » ou « j ».
Vous pouvez changer la façon dont Processing alignera ce texte, en se servant de la fonction textAlign() :
size(500,250); PFont police; police = loadFont("SansSerif-24.vlw"); textFont(police,24); line(250,0,250,500); line(0,125,500,125); textAlign(RIGHT,TOP); text("right+top", 250, 125); textAlign(RIGHT,BASELINE); text("right+baseline", 250, 125); textAlign(LEFT,CENTER); text("left+center", 250, 125);
12.
LES
TRANSFORMATIONS
Jusqu'à présent, nous avons dessiné des formes dans la fenêtre de notre application, en nous repérant toujours par rapport au coin supérieur gauche de la fenêtre.
Grâce aux transformations, il va être possible de déplacer cette origine, mais aussi de redéfinir l'orientation des axes et même de changer la graduation de ces axes (on parle de changement d'échelle).
Par défaut, lorsque l'on dessine une forme (dans notre exemple un rectangle), Processing définit le repère suivant :
size(200, 200); noStroke(); fill(0);
rect(0, 0, 100, 100);
DÉPLACER
Le changement de la position de l'origine se fait par la commande translate(). Nous pouvons nous déplacer sur l'axe x
(« horizontalement ») et sur l'axe y (« verticalement ») et nous allons indiquer à translate() de « combien » nous voulons nous déplacer sur chacun des axes. Dans l'exemple suivant, nous déplaçons l'origine de notre repère de 50 pixels en x et de 50 pixels en y. Notons que translate() va seulement affecter les formes géométriques qui sont dessinées après cette instruction.
size(200, 200); noStroke(); fill(0);
translate(50, 50); rect(0, 0, 100, 100);
Enchaîner les translate() permet d'accumuler les déplacements comme le montre l'exemple suivant.
size(200,200); // Noir fill(0); translate(20,20); rect(0,0,40,40); // Gris fill(128); translate(60,60); rect(0,0,40,40); // Blanc fill(255); translate(60,60); rect(0,0,40,40);
TOURNER
Nous avons pu déplacer l'origine du repère de dessin. Nous allons maintenant appliquer une rotation sur les axes de notre repère. Grâce à la commande rotate(), les axes x et y peuvent changer d'orientation. rotate() prend en paramètre un nombre qui va représenter l'angle de rotation, c'est-à-dire de « combien » nos axes vont tourner par rapport à notre fenêtre. Des valeurs positives indiquent une rotation dans le sens des aiguilles d'une montre.
