truc2geek

2014/09/19

Processing : intro

Filed under: Informatique, Processing, Programmation — Étiquettes : — truc2geek @ 15:28

Processing, c’est un truc cool. Un langage de programmation, un environnement de développement.
Et aussi une librairie JavaScript, Processing.js, qui permet au navigateur d’exécuter vos programmes.
C’est gratuit et open source.
C’est basé sur Java, d’ailleurs vos programmes Processing seront convertis en Java, mais pas de panique : pas besoin de savoir programmer en Java pour utiliser Processing, le code a été simplifié.

Que faire avec? De l’art. Du prototypage. Des jeux vidéo. Par exemple…
Sur le site officiel, on trouve des tutoriels qui abordent chacun un point technique : les couleurs, les formes géométriques, les objets…
Cet article est tout simplement une introduction à la version 1.5.1 de Processing.

Installation

Rien de plus simple, on télécharge un dossier compressé, qu’il suffit de décompresser.
Vous devez avoir ceci :
02.png

Pour lancer Processing, double-cliquez sur « processing.exe ».
Windows est très inquiet et vous affiche cet avertissement :
03.png

Bien sûr, il faut cliquer sur « Exécuter ».
Soyez gentil(le) avec Windows, parlez-lui pour le rassurer…

Le démarrage prend quelques secondes :
01.png

04.png

Si vous avez déjà utilisé Arduino, vous remarquez que l’IDE de Processing ressemble à celui d’Arduino.
En effet :
05.png

Avec une recherche Google « processing et arduino origine », le premier résultat donne l’explication.

1er test

On va commencer doucement, avec un carré qui se déplace.

Au lancement du sketche, la fonction setup() est exécutée une fois, puis la fonction draw() est exécutée en boucle.

On définit une fenêtre de 200 pixels par 200.
Un carré va apparaître tout à gauche, au milieu de la hauteur, et se déplacer d’un pixel vers la droite.
Une fois arrivé tout à droite, il réapparaîtra tout à gauche.

La ligne « rectMode(CORNERS) » définit la manière dont on dessine le rectangle.
Dans cet exemple on fait un carré, mais il n’existe pas de code particulier pour le carré, il faut utiliser le même code que pour un rectangle.En mode « CORNERS », dans la ligne « rect(a, b, c, d) »,

  • a et b sont les coordonnées x et y du coin haut gauche
  • c et d sont les coordonnées x et y du coin bas droite

En hauteur, 0 correspond au point le plus haut, et le hauteur de la fenêtre, ici 200, correspond au point le plus bas.
En largeur, 0 correspond au point le plus à gauche, et la largeur de la fenêtre, ici 200, correspond au point le plus à droite.

Le code, qu’on enregistre sous le nom « Test_01 » :
06.png

On exécute le sketche :
07.png

Quelques impressions écran faites au fur et à mesure :

09.png

08.png

10.png

Arrivé au bout, comme prévu, le carré revient à gauche et continue :
11.png

12.png

La ligne reste avec un fonds noir, pour une raison très simple : à chaque nouvelle itération dans la boucle, c’est-à-dire à chaque fois que le code revient au début de la fonction draw(), on ne vide pas l’écran. Chaque nouveau carré est donc rajouté sur l’écran existant.
Donc au fur et à mesure que le carré avance, comme il avance d’un pixel à la fois, seule la tranche du pixel le plus à gauche du carré reste à l’écran.

Réinitialiser l’écran

Si le carré se déplace de 4 pixels, on aura à chaque fois les trois premiers pixels du carré qui resteront.
On modifie le code :
13.png

Résultat :
14.png

Si on veut avoir juste le carré, il faut « réinitialiser » l’écran :
16.png

Résultat :
15.png

Faire évoluer la couleur de fonds du carré

On va partir de 0 qui correspond à noir. On ajoute 1 à chaque passage dans Draw(), et arrivé à 255 (qui correspond à blanc), on revient à 0.
21.png

Résultat :

18.png

19.png

20.png

22.png

24.png

23.png

25.png

interaction

Processing peut réagir à la souris et au clavier, c’est même très simple à programmer.
On va faire évoluer le programme pour qu’il prenne en compte deux touches : la flèche gauche et la flèche droite.
Cela nous permettra de changer la direction du carré.

On ajoute une variable globale nommée « Direction », qui aura pour valeur « Gauche » ou « Droite » :
26.png

Dans la fonction Draw, on enlève ou on ajoute 1 à la variable « PositionGauche », selon si « Direction » vaut « Gauche » ou « Droite » :
27.png

Et enfin, pour prendre en compte l’appui sur la flèche gauche et la flèche droite, on place ce code après la fonction draw :
28.png

Résultat :

Le carré commence à se déplacer vers la droite :
30.png

29.png

31.png

J’appuie sur la touche « flèche gauche » :
32.png
33.png

Problème : le carré continue à gauche, et disparaît.

C’est logique : on n’a pas modifié le code qui fait réapparaître le carré d’un côté, quand il est arrivé au bout.

Voici ce code : si le carré se déplace vers la gauche et que PositionGauche vaut 0, redéfinir PositionGauche à 200 pour faire apparaître le carré à droite.
Et réciproquement dans l’autre sens :

36.png

Résultat :

Je laisse le carré aller une fois tout à droite et réapparaître à gauche, puis j’appuie sur la flèche gauche :
30.png

29.png

31.png

37.png

38.png

39.png

41.png

40.png

Ok! Ca fonctionne bien.

quel « keyCode » pour quelle touche?

Pour connaître quelle valeur de « keyCode » est associée à une touche, on utilise la fonction « println » :
43.png

On lance le programme, et on a la valeur « keyCode » correspondante aux touches du clavier sur lesquelles on a appuyé.
Ici les flèches gauche, haut, droite, bas puis les chiffres 1, 2 et 3 :
44.png

Bon voilà, c’est tout pour le moment.

Petit conseil si vous voulez tester Processing : prenez le temps de suivre les tutoriels sur le site officiel.
Le site donne aussi une liste des livres existants. Je connais un seul de ces livres, mais je le recommande : « PROCESSING le code informatique comme outil de création« , de Jean-Michel Géridan et Jean-Noël Lafargue.

Publicités

Laisser un commentaire »

Aucun commentaire pour l’instant.

RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Propulsé par WordPress.com.

%d blogueurs aiment cette page :