Processing

Par gregoire22

[Link]

Licence Creative Commons 4 2.0 Dernire mise jour le 1/11/2010

2/81

Sommaire
Sommaire ........................................................................................................................................... Partager .............................................................................................................................................. Processing ......................................................................................................................................... Partie 1 : Processing ........................................................................................................................... 2 1 3 4

Avant de commencer... ...................................................................................................................................................... 4

Prparer son ordinateur .............................................................................................................................................................................................. 4 Prise en main .............................................................................................................................................................................................................. 5

Variables ............................................................................................................................................................................ 9
Variables ...................................................................................................................................................................................................................... 9 Variables de type entier ............................................................................................................................................................................................... 9 Variables de type rel .................................................................................................................................................................................................. 9 Variables de type caractre et chaine de caractres ................................................................................................................................................ 10

Fonctions ......................................................................................................................................................................... 10
Fentre/texte ............................................................................................................................................................................................................. 11 Couleurs .................................................................................................................................................................................................................... 15

Fonctions 2/2 ................................................................................................................................................................... 19

Tableaux .................................................................................................................................................................................................................... 20 Formes ...................................................................................................................................................................................................................... 23 MiniTP ....................................................................................................................................................................................................................... 30

Sous-Fonctions ............................................................................................................................................................... 32
Utilisation ................................................................................................................................................................................................................... Void setup() ............................................................................................................................................................................................................... Void draw() ................................................................................................................................................................................................................ mini TP ...................................................................................................................................................................................................................... 33 33 34 35

Partie 2 : Plus loin ............................................................................................................................. 39

Structures de contrle ..................................................................................................................................................... 39
Incrmentation .......................................................................................................................................................................................................... Boucles ..................................................................................................................................................................................................................... Structures de contrle ............................................................................................................................................................................................... Conditions ................................................................................................................................................................................................................. Loop() ........................................................................................................................................................................................................................ 39 40 42 44 46

Souris et Clavier .............................................................................................................................................................. 47

Souris ........................................................................................................................................................................................................................ 48 Clavier ....................................................................................................................................................................................................................... 51 Liens .......................................................................................................................................................................................................................... 52

TD : Pong ........................................................................................................................................................................ 54
Prsentation .............................................................................................................................................................................................................. Ralisation ................................................................................................................................................................................................................ Correction .................................................................................................................................................................................................................. Amliorations ............................................................................................................................................................................................................ 55 55 59 60

Image et vido ................................................................................................................................................................. 60

Image ........................................................................................................................................................................................................................ 61 Vido ......................................................................................................................................................................................................................... 64

TP : Effet Tunnel .............................................................................................................................................................. 64

Prsentation .............................................................................................................................................................................................................. 65 Correction .................................................................................................................................................................................................................. 65 Amliorations possibles ............................................................................................................................................................................................ 69

Partie 3 : Annexes ............................................................................................................................. 70

Annexes .......................................................................................................................................................................... 71
Rfrence .................................................................................................................................................................................................................. 71 Erreurs frquentes ..................................................................................................................................................................................................... 74 Mobile Processing ..................................................................................................................................................................................................... 76

[Link]

Sommaire

3/81

Processing

Par

gregoire22

Mise jour : 01/11/2010 Difficult : Facile 1 408 visites depuis 7 jours, class 102/797 Bienvenue sur ce tutoriel consacr Processing. C'est un langage de programmation bas sur la plate-forme Java, et qui dispose de plus d'une centaine de librairies ! Ce tutoriel sera structur de la manire suivante :

[Link]

Processing

4/81

Partie 1 : Processing

Avant de commencer...
Salut vous les zros ! Si vous tes ici, c'est que vous tes prts en dcoudre avec la programmation ! Mais non, ne vous inquitez pas, Processing n'est pas plus compliqu que les autres langages, voir un peu moins. Dans ce tutoriel, je vais vous appendre programmer sous Processing. V ous tes prts ? Allez, on s'y met Commenons par le dbut : l'installation.

Prparer son ordinateur

Processing qu'est-ce que c'est ?
Processing est un langage et un environnement de programmation open-source (c'est aussi le nom du compilateur). Il est employ par des tudiants, des artistes, des crateurs, des chercheurs, et des amateurs. Ce language basique offre de trs nombreuses possibilits, et laisse libre cours votre imagination, notamment grce sa centaine de librairies disponibles. Le logiciel fonctionne sur Macintosh, sous Windows et sous Linux, en effet il est bas sur la plate-forme Java. Processing offre la possibilit de faire de la 3D, des jeux en rseau, des effets de son et lumire mais aussi bien d'autres possibilits.

Processing, ce que l'on peut faire

Je fais une petite selection de trs bons scripts touvs sur le site [Link]. Si les scripts ne se lancent pas, cliquez sur le lien de tlchargement, au-dessus du code source. Ensuite, dcompressez le fichier, puis ouvrir le dossier dcompress. Dans ce dossier, cliquez sur le fichier avec l'extension .html, ou bien si il n'existe pas sur le fichier avec l'extension .jar Et voil, le script tlcharg se lance, et admirez, ou bien jouez Le premier est assez marrant. Je tiens prciser que ce n'est pas moi Par ici

Le second est un jeu d'arcade : Par ici

Le troisime est une cration artistique en 3D : Par ici

Le 4eme est encore de la 3D Par ici

[Link]

Partie 1 : Processing

5/81

Et le dernier, un petit mlange de 3D et de cration artistique : V ous dessinez ce que vous voulez, et en maintenant la touche "espace" enfonce, votre dessin tourne et cre une forme en 3 dimensions. Par ici

Bien sr, ici je ne vous ai slectionn que quelque crations, et d'ailleurs un peu au hasard, tellement il y en avait :-. J'espre cependant que vous vous tes fait une ide de l'tendue des possibilits de Processing .

Le tlchargement
Bon, c'est bien tout a, mais sans logiciel, comment on fait ? . Processing est disponible sous Macintosh, Linux et Windows, ce qui est un avantage. Pour tlcharger processing, rien de plus simple, il suffit de se rendre sur le site : ici. Je vous fait confiance pour le tlchargement, vous y arriverez (il suffit de cliquer le sur le bon OS).

Prise en main
Prise en main du logiciel
Nous venons d'installer Processing, on peut donc lancer l'application. Si tout s'est bien droul lors du tlchargement, lorsque vous lancez l'application, vous devez voir apparatre ceci sous Macintosh :

[Link]

Partie 1 : Processing

6/81

et sous Windows :

[Link]

Partie 1 : Processing

7/81

Excusez moi, je n'ai pas d'images de Processing sous Linux Donc voil, l'interface du logiciel est assez simple, la voici :

[Link]

Partie 1 : Processing

8/81

Elle se compose donc d'une barre d'outils, d'une entre de texte, o l'on codera, et une sortie de texte, o l'on pourra afficher du texte, et o les erreurs apparatront. La barre d'outils que voici est compose de 6 boutons :

Run : qui permet de lancer le programme, de l'excuter Stop : qui permet d'arrter l'excution du programme, de fermer la fentre du programme New : qui permet de crer une nouvelle fentre vierge Open : qui permet d'ouvrir un programme existant, enregistr, ou bien les exemples de crations Processing prenregistres Save : qui permet de sauvegarder votre fichier Le dernier n'est pas trs important

Dans ce tutoriel, nous utiliseront essentiellement l'entre de texte, l o l'on crira le code. Ce premier chapitre est fini, vous pouvez vous familiariser avec logiciel. Il est possible de crer un nouveau fichier en cliquant sur "file"/"new", ou sur l'icne , et le sauvegarder. Nous avons dsormais le logiciel, on peut passer la pratique. Rendez-vous au chapitre suivant

[Link]

Partie 1 : Processing

9/81

Variables
Dsormais, nous avons toutes les cls en main pour commencer programmer : le logiciel, et nous avons eu un aperu de son interface. Dans ce chapitre, nous allons apprendre ce qu'est une variable et comment s'en servir.

Variables
Qu'est-ce qu'une variable ??

Une variable est un lment qui permet de stocker une donne. Cette donne peut-tre un nombre entier, un dcimal, un caractre, une chane de caractres, un tableau de valeur, une matrice... Avant de commencer, je tiens vous prciser deux choses : un commentaire dans un code sous processing de note ainsi : Code : Autre //je mets mon commentaire ici A la fin d'une "ligne" de code, on met un point virgule

Variables de type entier

La variable est un lment trs important d'un code, c'en est mme un peu la base. Je vais vous prsenter le type de variable le plus courant ; la variable de type entier : Syntaxe : Code : Java int nom_de_la_variable; //ensuite on met le code

Comme vous le pouvez voir, la syntaxe est assez simple. Exemples : Code : Java int a; //ou encore int b,c,d; // il est possible de dclarer plusieurs variables comme ceci, la suite int f=1; // on donne comme valeur 1 f

Variables de type rel

La variable de type rel permet de lui donner n'importe qu'elle valeur, sur IR (revoir vos cours de seconde Syntaxe : Code : Java float nom_de_la_variable )

Prenons le mme exemple que pour la variable de type entre : Code : Java float a=5.6;

[Link]

Partie 1 : Processing

10/81

Lorsque vous voulez utiliser un nombre dcimal, attention bien mettre un point, et non une virgule. Il faut utiliser la syntaxe amricaine.

Variables de type caractre et chaine de caractres

La variable de type caractre permet de lui assigner un caractre. Syntaxe : Code : Java char nom_de_la_variable;

Exemple : Code : Java char //ou char char a; encore d,b,c; e='$' ;

Attention, autour du caractre que vous assignez votre variable se trouvent des apostrophes

La variable de type chane de caractres permettent d'y assigner une chaine de caractre, donc plusieurs lettres, symboles ou nombres... Syntaxe : Code : Java String nom_de_la_variable;

Exemple : Code : Java String a; String b,c,d; String e="$A1*";

Autour de la chane de caractre se trouvent des guillemets. Nous connaissons maintenant ce qu'est une variable, et comment s'en servir. On peut donc passer au chapitre suivant : les fonctions...

[Link]

Partie 1 : Processing

11/81

Fonctions
Donc voil, nous avons prcdemment appris comment gnrer une variable et l'utiliser, ou du moins thoriquement. Dans ce chapitre, nous allons apprendre utiliser des fonctions. Il en existe une multitude. Nous verrons donc qu'une partie.

Fentre/texte
Rgler la taille de la fentre
Lorsque vous crivez une ligne de code et que vous appuyez sur ,

une fentre s'ouvre, mais elle est toute petite. Pour rgler ce problme, nous allons rgler la taille de la fentre avec la fonction Size(). Syntaxe : Code : Java size(largeur,hauteur); //en anglais : size(width, height);

Exemple : Code : Java size(400,400); //fenetre de 400 pixels sur 400 pixels

Rendu :

[Link]

Partie 1 : Processing

12/81

Ecrire du texte
Je suis sr que vous attendiez ce moment depuis longtemps, nous allons apprendre crire du texte ! La fonction print() va nous permettre de le faire. Print() permet d'crire, sur la sortie standard (plus simplement d'afficher du texte), l'argument qui lui est pass en paramtres. Comme je vous ai montr dans la prsentation du logiciel, le texte s'affichera sur la sortie de texte. En l'occurrence, le passage de paramtre se fait ici entre les parenthses. Syntaxe : Code : Java print(argument);

Exemple : Code : Java print("Hello World !");

[Link]

Partie 1 : Processing

13/81

Rendu :

Code : Java String a = "Hello World !"; print(a);

le rendu est le mme, mais la faon d'crire le texte n'est pas la mme. La fonction println() est similaire d'utilisation, mais permet un retour la ligne, chaque nouvel affichage.

Concatnation
Concatnation ? La concatnation dsigne l'action de mettre bout bout au moins deux chanes. Sachez que avec print, vous pouvez, en utilisant une seule fois cette fonction crire plusieurs choses exemple : Code : Java String a = "tutoriel est", b = " Processing."; println("Ce " + a + " consacr " + b);

[Link]

Partie 1 : Processing

14/81

Connatre la longueur d'un texte

Il existe une fonction permettant de dterminer la longueur d'une chane de caractres. Cette fonction est length(). Seulement, son fonctionnement est un peu plus complexe que les fonctions que nous avons vu jusqu' prsent. Exemple : Code : Java //Tout d'abord, initialisons une chane de caractres texte String texte; String texte; void setup() { //ensuite, on crit notre texte texte = "J'essaie de trouver le nombre de caractres de cette chane."; int nb_caracteres = [Link]();//[Link] signifie que l'on veut la longueur de la chane texte print("Nb de carcatres : " + nb_caracteres);//et il ne reste plus qu' afficher }

Et voil :

[Link]

Partie 1 : Processing

15/81

Mettre du texte en majuscules/minuscules

Pour mettre du texte en majuscules ou en minuscules, toUpperCase() et toLowerCase() sont l pour a. Je vais vous donner un exemple : Code : Java void setup() { //ensuite, on crit notre texte String texte = "J'Essaie De Mettre En Majuscules Et Minuscules Ce Texte.";//on cre notre chane de caractres String texte2 = [Link]();//on met texte en majuscule, et on le stocke dans texte2 String texte3 = [Link]();//on met texte en minuscule, et on le stocke dans texte3 println(texte2);//on affiche texte2, et on fait un retour la ligne avec println() print(texte3);//on affiche texte3 }

Rendu :

Couleurs
Avec les trois fonctions que je vais vous prsenter, vous pourrez donner une couleur une ligne, au background, une forme...

[Link]

Partie 1 : Processing

16/81

Background()
Tout d'abord, la fonction background() : comme vous l'avez peut-tre devin, cette fonction va nous permettre de donner une couleur notre fentre, l'arrire-plan. Syntaxe : Code : Java background(R,G,B);

Les paramtres utiliss dans cette fonction sont la composition de la couleur en RGB. Si vous ne connaissez pas : rfrez-vous cette page du tutoriel de M@teo21. Exemple: Code : Java size(200,200); //cran de 200 pixels sur 200 pixels background(38,164,248);

Rendu :

[Link]

Partie 1 : Processing

17/81

Stroke()
La fonction Stoke() permet de donner une couleur un trait, ou de donner une couleur autour d'une forme. Syntaxe : Code : Java stroke(R,G,B);

Exemple : Code : Java stroke(200,200,0); line(1,1,10,10); //je vous montrerai dans la souspartie suivante comment se servir de line()

Rendu :

[Link]

Partie 1 : Processing

18/81

Fill()
La fonction Fill() permet de remplir une forme avec une couleur. Syntaxe : Code : Java fill(R,G,B);

Exemple : Code : Java fill(200,200,0); rect(100,100,150,150); //je vous montrerai dans la souspartie suivante comment se servir de rect()

[Link]

Partie 1 : Processing
Rendu :

19/81

Rendez-vous au chapitre suivant, o nous allons pouvoir continuer sur notre lance des fonctions.

[Link]

Partie 1 : Processing

20/81

Fonctions 2/2
Nous avons vu un certain nombre de fonction dans le prcdent chapitre. Et bien nous allons en voir encore dans cette partie Allez, ne vous dcouragez pas, c'est pas bien dur

Tableaux
Un tableau, qu'est-ce que c'est ?
Un tableau est ce que l'on peut aussi appeler une liste. Le tableau est un lment de programmation assez abstrait ! C'est un ensemble de variables dans lequel on stocke plusieurs informations. Ces informations sont classes par cases, d'o a notion de tableau. Notez que les informations contenues dans un tableau doivent tre du mme type : donc soit des caractres, soit des chiffres...

Comment est-ce que l'on cre un tableau ?

Syntaxe : Code : Java String[] nom_du_tableau = {"lment1", "lment2", "lment3", "lment4", "lment5"};

V la syntaxe. Mais bien sr, vous pouvez mettre autant d'lments que vous voulez dans le tableau. oil C'est bien beau, mais quand je lance le programme, rien ne se passe, il y a juste une petite fentre grise qui s'ouvre !

Ne vous inquitez pas Pour ce qui est de la petite fentre grise, c'est absolument normal. En effet, tout programme que vous lancerez ouvrira une fentre, et par dfaut elle sera grise et de petite taille. (je n'ai pas la taille ) Maintenant, nous allons voir comment appeler un lment du tableau.

Appeler un lment du tableau

Et bien c'est trs simple : Syntaxe : Code : Java print (nom_du_tableau[]);

Entre les crochets, il faut renseigner le numro, ou la position, si vous prfrez, de l'lment dans la tableau. Prenons un exemple : Code : Java String[] arbre = {"chene", "sapin", "pommier", "cedre", "erable"}; print (arbre[3]);

[Link]

Partie 1 : Processing
V ous allez alors voir sur la sortie texte le texte suivant :

21/81

Mais pourquoi est-ce que a n'est pas "pommier qui s'affiche ?!

Bonne question. Lorsque vous crez un tableau, Processing considre que le premier lment a pour numro "0" et non "1".

Remplacer un lment du tableau par un autre

Syntaxe : Code : Java nom_du_tableau[] = valeur;

Exemple : Code : Java arbre[2] = "bouleau";

[Link]

Partie 1 : Processing

22/81

Ici, "pommier" sera donc remplac par "bouleau". C'est trs simple, mais attention ne pas oublier que le premier lment est numro 0

Ajouter un lment dans le tableau

Pour rajouter un lment dans le tableau, vous aurez besoin de la fonction splice(). Syntaxe : Code : Java nom_du_tableau = splice(nom_du_tableau, valeur, position);

Supprimer un lment du le tableau

Il est possible de supprimer un lment d'un tableau, mais ce sera la dernire valeur La fonction shorten() est l : Code : Java shorten(nom_du_tableau);

Sachez cependant qu'il existe bon nombre de fonctions que je n'ai pas cit

Autre syntaxe
Et oui, il existe une autre syntaxe pour crer un tableau. La voici : Code : Java int[] nom_du_tableau = new int[2]; //le new int[2] signifie que l'on cre un tableau de deux cases tableau[0] = 10; tableau[1] = 25;

Sachez qu'il est possible de crer plusieurs colones.

Dcouper une chaine de caractre et la mettre dans un tableau

Syntaxe : Code : Java String[] nom_tableau = split(nom_de_la_chaine_de_caractres, delimitant);

[Link]

Partie 1 : Processing
Reprenons nos arbres. Nous allons les insrer dans une variable "arbres", puis nous allons dcouper cette chane, au niveau des virgules. Code : Java String arbres = "chene, sapin, pommier, cedre, erable"; String[] tableau_arbres = split(arbres, ',');

23/81

tableau_arbres[0] aura donc pour valeur "chene", tableau_arbres[1] pour valeur "sapin", ect. N.B : Sachez que vous pouvez dcouper une chane au niveau des espaces comme ceci : Code : Java split(nom_de_la_chaine_de_caractres, ' ');

Formes
Line()
La fonction line() permet de tracer un trait entre deux points, donc tout simplement une trait. Syntaxe : Code : Java line(X1,Y1,X2,Y2); //X1 tant l'abscisse //Y1 tant l'ordonne //X2 tant l'abscisse //Y2 tant l'ordonne

du du du du

premier point (l'extrmit de la ligne) premier point second point second point

Exemple : Code : Java size(200,200); line(50,50,150,150);

[Link]

Partie 1 : Processing

24/81

Rendu :

Rect()
La fonction Rect() permet de dessiner un rectangle. Syntaxe : Code : Java rect(X,Y,largeur,hauteur); //X tant l'abcisse du coin suprieur gauche du rectangle //Y tant l'ordonne du centre du rectangle

Exemple : Code : Java size(200,200); rect(50,50,100,100);

[Link]

Partie 1 : Processing

25/81

Rendu :

Ellipse()
La fonction Ellipse() permet de dessiner une ellipse, et un cercle. Syntaxe : Code : Java ellipse(X,Y,largeur,hauteur); //X tant l'abscisse du centre de l'ellipse //Y tant l'ordonne du centre de l'ellipse

Exemple : Code : Java size(200,200); ellipse(100,100,150,150);

[Link]

Partie 1 : Processing

26/81

Rendu :

Quad()
La fonction quad(), comme son nom l'indique permet la ralisation d'un quadrilatre. Pour se faire, il faut passe en paramtres les positions sur l'axe des abscisses et des ordonnes des sommets du quadrilatre. Le schma suivant vous vous indique l'ordre des points que l'on passe en paramtres. Ainsi, si vous voulez tracer un carr, vous ne vous retrouverez pas avec un quadrilatre crois

[Link]

Partie 1 : Processing

27/81

Syntaxe : Code : Java quad(x1, y1, x2, y2, x3, y3, x4, y4);

Exemple : Code : Java size(100,100); quad(10,21,95,37,79,92,37,83);

Rendu :

Point()

[Link]

Partie 1 : Processing

28/81

La fonction point() permet de faire un point, tout simplement Syntaxe : Code : Java point(x,y);

Exemple : Code : Java point(50,50);

Rendu :

RectMode()
La fonction rectMode() permet de rgler rect(). En effet, comme je vous l'ai montr plus haut, X et Y sont respectivement l'abscisse et l'ordonne du coin gauche. Lorsque vous faites un rectangle, vous dclarez en premier x et y, puis la largeur et la hauteur. Par dfaut, x et y sont le coin suprieur gauche du rectangle. Si vous utilisez CORNER, x et y seront le centre du rectangle. Syntaxe : Code : Java rectMode(CENTER);

Il ne faut pas oublier la majuscule de Mode, sinon processing ne reconnatra pas la fonction.

Exemple : Code : Java

[Link]

Partie 1 : Processing
size(200,200); rectMode(CENTER); rect(50,50,100,100);

29/81

Rendu :

EllipseMode()
La fonction ellipseMode() fonctionne sur le mme principe que rectMode(). Cependant, c'en est l'inverse. Par dfaut, x et y sont le centre de l'ellipse. En utilisant CORNER, x et y sont dfinis comme le coin suprieur gauche. Syntaxe : Code : Java ellipseMode(CORNER);

Smooth()

[Link]

Partie 1 : Processing

30/81

Je ne sais pas si vous avez remarqu, mais lorsque vous faites un cercle, le trait n'est pas net, c'est d la pixlisation. Pour y remdier, smooth() est l Syntaxe : Code : Java smooth();

Exemple : Code : Java size(200,200); smooth(); ellipse(100,100,150,150);

Rendu :

MiniTP
V ous venez d'apprendre un certain nombre de choses, il est donc important de les mettre en pratique pour que vous vous en souveniez correctement. Je vais donc vous proposer un petit exercice. Bien sr, cet exercice ne vous servira strictement rien, mais vous permettra de mettre en pratique vos connaissances acquises jusque l.

[Link]

Partie 1 : Processing
Exercice 1:

31/81

Ecrire un programme pour dessiner un rectangle rouge l'intrieur, des traits bleu, de 100 pixels de hauteur sur 50 de largeur, dans une fentre de 300 pixels sur 300 pixels. Le fond sera vert. A vos crayons, ou plutt devrais-je dire vos claviers Si vous ne trouvez pas du premier coup, n'hsitez pas relire le cours, et faire un petit schma. Secret (cliquez pour afficher) Code : Java background(0,255,0); size(300,300); fill(255,0,0); stroke(0,0,255); rect(100,100,50,100); //dans votre "RGB", vous pouvez trs bien varier les valeurs.

Rendu :

Et voil, c'en est fini des fonctions ! Rendez-vous dans le prochain chapitre o nous allons parler des sous-fonctions.

[Link]

Partie 1 : Processing

32/81

[Link]

Partie 1 : Processing

33/81

Sous-Fonctions
Dans ce quatrime chapitre, nous allons apprendre raliser une sous-fonction. Pour cela, on va passer un niveau de difficult lgrement suprieur. Les sous-fonctions ressemblent aux fonctions utilisateurs dans les autres langages, des fonction qu'on peut crer nous-mme. V setup() et void draw() sont des fonctions pr-implmentes et prtes l'emploi. L'intrt premier, est d'viter les rptitions oid inutiles (de factoriser le code), et d'viter de rinventer la roue chaque programme que l'on fait.

Utilisation
Une sous-fonction est ralise partir des fonctions principales de processing (celles que je vous ai appris dans le chapitre prcdent). Elle permet de raliser des fonctions plus avances, de les crer. Syntaxe : Code : Java void nom_de_la_fonction() { instruction 1; instruction 2; ... } //void sert dclarer la sous-fonction //une instruction peut-tre par exemple un line()

Exemple : Je veux raliser une sous-fonction qui dessine une croix : Code : Java void croix() { line(0,0,200,200); line(200,200,0,0); }

Sauf que l vous vous dites : "pourquoi quand je tape a, rien ne se passe ?" C'est un peu compliqu, il faut en fait ajouter d'autres void... Il n'y a pas de point virgule la fin d'un void

Void setup()
Comme je vous l'ai dit, l'exemple du void cross() ne marche pas tout seul. Premirement, il faut ajouter un void setup()... Dans ce void, nous dclarerons toutes les fonctions qui seront valables tout au long de votre programme. En effet, si c'est une application, certaines fonctions varient... Les fonctions que nous y mettons sont en gnral background() et size(). V ous pouvez bien sr y mettre un tas d'autres fonctions. Syntaxe : Code : Java void setup() { instruction 1; instruction 2; ...

[Link]

Partie 1 : Processing
}

34/81

Exemple : Reprenons notre void cross() Code : Java void setup() { size(400,400); background(255); } void croix() { line(0,0,200,200); line(200,0,0,200); }

Et l vous me dtes, pourquoi a ne marche toujours pas ! C'est car il manque un autre void

Void draw()
V notre dernier void : void draw(). oil Dans ce void draw(), nous allons appeler la sous-fonction croix() avec la mthode void, mais nous pourrions trs bien appeler tout autre sous-fonction. Syntaxe : Code : Java void draw() { instruction 1; instruction 2; ... }

Maintenant, on va pouvoir crire en entier le code : Code : Java void setup() { background(255); size(200,200); } void draw() { croix(); } void croix() { line(0,0,200,200); line(200,0,0,200); }

[Link]

Partie 1 : Processing

35/81

Donc pour rcapituler, pour crer une sous-fonctions, il est ncessaire d'utiliser 3 void : void setup() o l'on dclare les fonctions principales telles que la taille de la fentre, le fond d'cran... void draw() o l'on appelle les sous fonctions de notre choix, tel que void croix; et dernirement, notre sous-fonction, ici void croix.

Le code suivant est la syntaxe globale d'une sous-fonction : Code : Java

void setup() { int TF=100; size(TF,TF); //ici nous utilisons TF : taille de la fentre, cela permet d'utiliser cette valeur fonction // avec en passage de paramtre la taille de la fentre } void draw() { dclaration des variables fonction(); //ex : bouton(int a, float b); } void sous-fonction() { //si vous mettez de variables dans le code de votre fonction, mettez les entre pare instruction 1; instruction 2; dclaration; }

V ous pouvez mme crer des sous-sous fonction, en les appelant dans votre sous-fonction, comme on l'a fait dans le void draw()

mini TP
Tout comme le prcdent exercice, il a pour but de vous embter un peu, histoire que vous ressortiez toutes les fonctions que vous avez appris. Exercice 1 : Ecrire la sous-fonction qui permet de raliser une croix verte dans un rectangle bleu, aux contours rouges, dans une fentre orange (faites un mlange de couleurs) de 200 pixels sur 200. Le rectangle sera de 100 pixels de largeur sur 50 de hauteur, et son coin suprieur gauche en (40;60). Secret (cliquez pour afficher) Code : Java void setup() { background(200,75,0); size(200,200); } void draw() { croix(); }

[Link]

Partie 1 : Processing
void croix() { fill(0,0,255); stroke(255,0,0); rect(40,60,100,50); stroke(0,255,0); line(40,60,140,110); line(140,60,40,110); }

36/81

Rendu :

Exercice 2 : Ecrire la sous-fonction qui ralise un carr avec en passage de paramtre la largeur et la taille de la fentre. Le carr doit tre centr au milieu de la fentre. Faites attention aux priorits mathmatiques.

[Link]

Partie 1 : Processing
Pas facile, hein ? Aide : Secret (cliquez pour afficher)

37/81

Code : Secret (cliquez pour afficher) Code : Java int TF=200, l=120;//on dclare TF : la taille la fentre, et l : la largeur du carr void setup() { size(TF,TF); } void draw() { carre();//on dclare la fonction } void carre() { //voici la faon thorique pour raliser un carr, bien sr il est possible d'utiliser rect() //mais dans certains cas, cette fonction nous sera utile line((TF+l)/2,(TF+l)/2,(TF+l)/2,(TF-l)/2); line((TF+l)/2,(TF-l)/2,(TF-l)/2,(TF-l)/2);

[Link]

Partie 1 : Processing
line((TF-l)/2,(TF-l)/2,(TF-l)/2,(TF+l)/2); line((TF-l)/2,(TF+l)/2,(TF+l)/2,(TF+l)/2); }

38/81

Rendu :

Je pense qu'il est ncessaire que vous relisiez ce chapitre, ou bien que vous vous y entraniez. Si vous avez compris ce chapitre, vous pouvez ds prsent raliser des programmes intressants, presque complexes Dans le prochain chapitre, nous approfondiront avec le hasard, les conditions, les boucles, les conditions et l'incrmentation...

[Link]

Partie 1 : Processing

39/81

Partie 2 : Plus loin

Dans ce second chapitre, nous allons attaquer plus srieusement. V ous y apprendrez les thmes du hasard, les boucles et d'autres encore.

Structures de contrle
Dans seconde partie, nous allons tudier plus en profondeur Processing, nous y verrons notamment les boucles, le hasard, l'incrmentation, les conditions... Dans ce premier chapitre, nous allons voir les boucles, chose trs utile !

Incrmentation
L'incrmentation est un processus particulier que l'on utilise assez souvent dans les boucles. Il consiste augmenter la valeur d'une variable. Il est aussi possible d'utiliser la dcrmentation, qui est le processus inverse, qui consiste baisser la valeur d'une variable. Exemple : Code : Java //incrmentation : int a=0; a=a+1; println(a);

Code : Java //dcrmentation : int a=0; a=a-1; println(a);

V ous allez alors voir s'afficher dans la sortie de texte le nombre 1.

[Link]

Partie 2 : Plus loin

40/81

Rendu :

Cependant, il existe d'autres incrmentations et dcrmentations possibles : Code : Java

//incrmentation : a++; a+=1;//on met un + a cote du a, avant le signe =, pour montrer que l'on va additionner, a=a*2; a*=2; //le principe est le mme pour la multiplication que pour l'addition

Code : Java

//dcrmentation : a--; a=1;//on met un + a cote du a, avant le signe =, pour montrer que l'on va additionner, p a=a-2; a-=2; //le principe est le mme pour la division que pour la soustraction

Boucles
Le fonctionnement des ordinateurs repose sur assez peu de fonctions : effectuer des calculs numriques accder des valeurs tester des conditions et rpter des actions

[Link]

Partie 2 : Plus loin

Les boucles permettent de rpter des actions. Il existe deux types de boucles : les boucles conditionnelles cres avec la fonction while() les boucles itratives cres avec la fonction for()

41/81

While : de l'anglais, signifie "pendant"/"jusqu'". For : de l'anglais, signifie "pour"/"durant".

Les boucles conditionnelles

Syntaxe : Code : Java while(condition) { instruction 1; instruction 2; ... }

Explication : Tant que la condition est respecte, le programme excute les instructions contenues dans la boucle. Dans la srie d'instructions, on retrouve gnralement une variable qui s'incrmente. Exemple : Code : Java int a = 0; while ( a < 10 ) { println(a); a++; }

Les boucles itratives

Syntaxe : Code : Java for ( condition de dpart ; condition de fin ; itration) { instruction 1; instruction 2; ... }

Explication : Peut se traduire par : de la condition de dpart, jusqu' la condition de fin, j'effectue les instructions contenues dans la boucle et l'itration. L'itration correspond l'incrmentation ou la dcrmentation d'une variable.

[Link]

Partie 2 : Plus loin

Exemples :

42/81

V ous avez sans doute remarqu, que dans l'exemple de gauche, le rond laisse une trace derrire lui... comment l'effacer dans la partie suivante.

Nous allons voir

Structures de contrle
Nous allons voir comment structurer un programme, une animation. Comme je vous l'ai montr dans la partie prcdente, l'ellipse laisse une grosse trace toute moche derrire elle solution, et je vais vous la donner Avant cela, je vais vous montrer la structure de notre programme : Code : Java int TF = 400; int x; void setup() { x=0; size(TF,TF); } void draw() { nettoyer(); dessiner(); } void nettoyer() { background(255); } . J'ai la

[Link]

Partie 2 : Plus loin

void dessiner() { x++; if(x>395) { x=5; } }

43/81

V notre code de base d'une animation. La fonction if est une condition, chose que nous aborderons plus tard. Mais vous oil l'avez srement devin, dans ce cas, c'est si x atteint 395, et bien x reoit une nouvelle nouvelle valeur qui ici est 5. Dans le void draw, nous appelons deux sous-fonctions : nettoyer() et dessiner(). Nettoyer() va nous permettre d'effacer par exemple la trace de l'ellipse. Je vous explique : en fait lorsque le programme s'excute, c'est comme un film, c'est des image qui se superposent. Et bien, ici, chaque nouvelle image, on dit que le fond d'cran doit rester blanc, ducoup a nous enlve la trace. C'est dans dessiner que l'on mettra par exemple notre ellipse pour la faire bouger.

Essayons :

Et normalement, vous devez voir dfiler votre cercle comme ceci (mais ici c'est un mauvais gif :p) :

[Link]

Partie 2 : Plus loin

44/81

Excusez moi, pour la mauvaise qualit du gif (il faut cliquer sur la miniature pour le voir) :-. Et voil, vous venez de raliser votre premire animation. L, j'ai choisi un exemple simple, mais avec ce qui suit : les conditions, le hasard et le dplacement, on va pouvoir faire un pong par exemple !

Conditions
Donc voil, comme je l'ai abord plus haut, nous allons parler des conditions. C'est un systme qui permet de poser des conditions. Pour raliser des tests conditionnels sur une variable, on utilise : if : de l'anglais qui signifie "si" else : de l'anglais qui signifie "autre"/"sinon" Une condition peut tre traduite ainsi : Code : Autre

Je veux que cette/ces action soi(en)t ralise(s) si ... sinon, cette/ces action(s) ...

Syntaxe : Code : Java if (condition) { instruction 1; instruction 2; ... } else { instruction 1; instruction 2; ... }

On peut faire le test (appliquer la condition) sur plusieurs, en les imbriquant. C'est dire que l'on peut prciser plusieurs conditions la fois. La syntaxe que je vous ai montr est celle de base, maintenant je vais vous montrer ce qu'il faut mettre entre parenthse dans la condition : Code : Java //condition gal if(variable_a==valeur) {} //condition suprieur if(variable_a>valeur) {} //condition suprieur ou gal if(variable_a>=valeur) {} //condition infrieur

[Link]

Partie 2 : Plus loin

if(variable_a<valeur) {} //condition infrieur ou gal if(variable_a<=valeur) {} //condition n'est pas gal if(variable_a!=valeur) {} //condition 1 ou condition 2 if(condition 1 || condition 2) {} //condition 1 et condition 2 if(condition 1 && condition 2) {}

45/81

Il ne faut pas oublier que "valeur" peut-tre un nombre, mais aussi une variable ! Je vais vous donner quelques exemples afin que vous vous familiarisiez avec les conditions. Exemples : Code : Java if(x>10 && x<15) { y=45; }

Code : Java if(x!=0 && y <=23 && w ==78) { print("J'apprends les conditions !"); }

[Link]

Partie 2 : Plus loin

46/81

Rendu :

V ous pouvez imbriquer autant de conditions que vous le souhaitez, mais fates attention ne pas trop en mettre, afin de ne pas vous emmler les pinceaux

Loop()
Loop() est une fonction qui permet l'excution d'une animation. En ralit, on n'en a pas besoin directement. Son "inverse" noLoop() est lui plus utile. Dans une animation, prenons l'exemple du pong que nous ferons en TP, si la balle touche le mur, et bien vous perdez. V ous pouvez donc utiliser la fonction noLoop(). Syntaxe : Code : Java

noLoop; //la fonction s'utilise trs simplement, mais est gnralement place dans une conditio

Prenons l'exemple du pong : Code : Java //soit x l'abcisse de l'ellipse qui fait office de balle if(x=0)

[Link]

Partie 2 : Plus loin

{ noLoop(); //les lignes de code suivantes ne sont pas obligatoires else { loop(); }

47/81

Assurez vous d'avoir bien compris ce chapitre, il est relativement important. Prochain chapitre, les conditions.

[Link]

Partie 2 : Plus loin

48/81

Souris et Clavier
Dans cette partie, je vais vous apprendre utiliser votre souris et votre clavier, dans votre programme.

Souris
MouseX et MouseY
Donc voil, on va apprendre utiliser la souris dans un code. Par exemple, imaginons que je souhaite qu'une ellipse se dplace pareil que ma souris sur l'ecran. Et bien c'est assez simple, voil comment on fait : Code : Java int x; int y; void draw() { ellipse(x,y,10,10); x=mouseX; y=mouseY; }

Essayez, et aprs avoir beaucoup boug la souris, vous devez obtenir quelque chose de ce genre

[Link]

Partie 2 : Plus loin

49/81

Mais comme vous voyez, on retrouve notre trace... Il ne faut donc pas oublier notre void nettoyer(), enfin si vous ne voulez pas voir de cercles bien sr. Dans certains cas, si vous voulez faire la mme chose, mais avec point(), vous pouvez ne pas utiliser de void nettoyer(), afin de pouvoir dessiner avec Donc avec le void nettoyer(), a donne a :

MousePressed
La fonction mousePressed est simple d'utilisation : si elle est vrifie (on clique), elle fait ce que vous avez mis entre accolades, sinon, ce que vous avez mis dans else, ou rien si vous n'avez pas mit de else. La syntaxe que je vais vous donner est disons la plus courante, la plus utile : Syntaxe : Code : Java if (mousePressed == true ou false) { } else { }

[Link]

Partie 2 : Plus loin

50/81

True et false servent dire si la fonction est vrifie ou non, dans ce cas, si on clique ou pas. Prenons un exemple o si l'on clique (restez appuys un peu), un rectangle change de couleur, mais vous pouvez faire ce que vous voulez, il peut changer de taille, vous pouvez changer le fond d'cran, faire apparatre quelque chose, crire sur la sortie texte, excuter une action... Exemple : Code : Java void draw() { if (mousePressed == true) { fill(200,0,155); } else { fill(255); } smooth(); ellipse(50, 50, 50, 50); }

MousePressed()
La fonction mousePressed() s'utilise exactement de la mme faon que mousePressed. Il y a seulement une diffrence : reprenons notre ellipse qui change de couleur lorsqu'on clique, et bien avec mousePressed(), en cliquant, vous changez la couleur, mais elle reste. Il faut recliquer pour qu'elle redevienne blanche. Essayez...

MouseDragged()
La fonction mouseDragged() utilise le mouvement de la souris, elle prend la valeur de la souris en x et y. Syntaxe : Code : Java mouseDragged() { }

Je vous donne un exemple : imaginons une ellipse, et on veut que la couleur de remplissage change avec la position de la souris. Et bien on va utiliser mouseDragged(). Je vous explique, on va initialiser trois variables, et remplir une ellipse avec (fil()). Ensuite, avec mouseDragged(), on va utiliser l'incrementationn pour augmenter les valeurs de ces trois variables, en fonction de la souris : Code : Java int a = 150; int c = 100; int b = 200; void draw() { fill(a,b,c); smooth(); ellipse(50, 50, 90, 90); }

[Link]

Partie 2 : Plus loin

void mouseMoved() { a = a + 5; if (a > 255) { a = 0; } b = b + 5; if (b > 255) { b = 0; } c = c + 5; if (c > 255) { c = 0; } }

51/81

Rendu :

Clavier
KeyPressed
La fonction keyPressed marche exactement comme mousePressed, la syntaxe que je vous donne vous permet d'utiliser n'importe quelle touche, mais vous pouvez bien sr en spcifier une : Syntaxe : Code : Java if (keyPressed == true ou false) { }

Exemple : Code : Java void draw() { smooth(); ellipse(50,50,90,90); } void keyPressed() { if (key == '1') { fill(200,50,150); } else { fill(255); } smooth(); ellipse(50,50,90,90); }

[Link]

Partie 2 : Plus loin

En appuyant sur une autre touche, le cercle redevient blanc. De la mme faon, vous pouvez utiliser keyPressed(), qui aura les mme effets que mousePressed().

52/81

KeyCode
La fonction keyCode permet de spcifier une touche spciale : UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC, et DELETE) Je vous donne ici le nom des touches anglaises, mais je suis sr que vous les reconnatrez Exemple : Code : Java void draw() { smooth(); ellipse(50,50,90,90); } void keyPressed() { if (keyCode == ENTER) { fill(200,50,150); } else { fill(255); } smooth(); ellipse(50,50,90,90); }

Je ne vais pas m'attarder sur ce point, en effet les fonctions pour le clavier sont les mmes que celles de la souris, except mouseDragged().

Liens
Avec processing, il est possible de faire des liens vers des URL internet ! Imaginons que vous ayez deux carrs, et bien vous avez la possibilit de crer une condition, selon laquelle si l'on appuie sur un des deux, a nous envoie vers un URL spcifi. : Exemple : Code : Java boolean overLeftButton = false; boolean overRightButton = false; void setup() { size(500, 500); } void draw() { background(255); line(250,0,250,500); if(overLeftButton == true) { fill(200,50,150); } else { fill(255); } rect(0,200,230,100); if(overRightButton == true) {

[Link]

Partie 2 : Plus loin

fill(200,50,150); } else { fill(255); } rect(270,200,230,100);

53/81

void keyPressed() { if(overLeftButton) { link("[Link] } else if (overRightButton) { link("[Link] } } void mouseMoved() { checkButtons(); } void checkButtons() { if(mouseX > 0 && mouseX < 230 && mouseY > 200 && mouseY < 300) { overLeftButton = true; } else if (mouseX > 270 && mouseX < 500 && mouseY > 200 && mouseY < 300) { overRightButton = true; } else { overLeftButton = overRightButton = false; } }

Explication : Boolean sert de rfrence, c'est dire que par dfaut, overLeftButton et overRightButton sont faux. Nous mettons un void setup(), o nous dfinissons les paramtres de rfrence. Dans le void draw(), nous dfinissons un background, et ensuite nous posons une premire condition : si overLeftButton est vrai, on rempli le premier rectangle sinon, le rectangle est rempli en blanc Ensuite, on pose notre deuxime condition : si overRightButton est vrai, on rempli le premier rectangle sinon, le rectangle est rempli en blanc On utilise un void mouseMoved() dans lequel on appelle une sous-fonction : checkButtons(). Puis, on utilise un void pour dclarer checkButtons() et on pose la condition suivante : si les positions de la souris en X et Y sont comprises entre telles et telles valeur, overLeftButton est vrai, sinon, es positions de la souris en X et Y sont comprises entre telles et telles valeur, overRightButton est vrai, puis avec un deuxime else, mais sans condition, on dit que si ces deux conditions ne sont pas vrifies, donc autrement dit par dfaut, overLeftButton et overRightButton sont faux. Et voil, j'espre que vous avez compris le systme Mais plus classiquement la fonction pour faire un lien est : Code : Java

[Link]

Partie 2 : Plus loin

link(); Prochaine chapitre : le Pong !

54/81

[Link]

Partie 2 : Plus loin

55/81

TD : Pong
Dans ce chapitre, je vais vous apprendre crer un Pong !!

Prsentation
Nous allons raliser un Pong, le premier jeu d'arcade, avant Pacman ! Pour cela, je vais tout d'abord vous donnez une sorte de cahier des charges. Le jeu sera seulement pour 1 joueur, ce sera vous d'apporter les amliorations =D

Cahier des charges

Le pong ressemblera a :

Le plateau (l o rebondit la balle) sera ainsi : rect(w,z,25,85); il bougera en Y avec la souris. La balle sera ainsi : ellipse(x,y,20,20); et bougera selon un deplacementX et deplacamentY prdfinis, et grce une incrmentation. La balle rebondira sur le plateau, sur le ct droit, sur le haut et les bas de la fentre. Si la balle touche le ct gauche, GAME OVER s'affiche sur la sortie texte.

Ralisation
Allez c'est partis, on entame le code !

Initialisation
Premirement, vous allez initialiser les variables : x et y qui sont les coordonnes de la balle deplacementX et deplacementY qui seront la direction de la balle w et z les coordones du plateau

Ensuite, nous initialisons notre void setup(). Nous allons donner des valeurs ces variables : z = 60; w = 15; deplacementY = -3; deplacementX = 6;

[Link]

Partie 2 : Plus loin

y = 200; x = 200;

56/81

Puis nous allons donner un fond d'cran blanc ainsi qu'une taille de fentre de 400 sur 400 pixels. Puis, nous allons initialiser un void draw() dans lequel nous allons appeler quatre sous-fonctions : nettoyer(); dessiner(); bouger(); rebondir();

Void nettoyer()
Dans le void nettoyer(), vous n'avez qu'une seule chose mettre : Code : Java background(0);

Void dessiner()
Premirement, on va dessiner notre plateau ainsi : Code : Java rect(w,z,25,85);

Pour ma part, je l'ai rempli en blanc. Ensuite, on va dessiner notre balle ainsi : Code : Java smooth(); ellipse(x,y,20,20);

Je l'ai elle aussi remplie de blanc. Pour finir, on peut dessiner une ligne blanche en plein milieu pour dlimiter les deux terrains : Code : Java line(200,0,200,400);

Void bouger()
Le void bouger() est lui aussi assez cours et simple. Pour x et y, on va utiliser une incrmentation, pour faire bouger la balle : Code : Java x = x + deplacementX; y = y + deplacementY;

[Link]

Partie 2 : Plus loin

Comme je vous l'ai dis plus haut, dans le cahier des charges, le plateau bouge avec le mouvement de la souris. On va donc dcrter que z (l'ordonne du plateau = au mouvement de la souris en Y) : Code : Java z = (mouseY);

57/81

Test
Avant de commencer la partie du void rebondir(), on va faire un petit rcapitulatif du code : Code : Java int deplacementX, deplacementY; int x, y; int w, z; void setup() { size(400,400); background(0); x = 200; y = 200; deplacementX = 6; deplacementY = -3; w = 15; z = 60; } void draw() { nettoyer(); bouger(); dessiner(); } void nettoyer() { background(0); } void dessiner() { smooth(); fill(255); rect(w,z,25,85); fill(255); ellipse(x,y,20,20); line(200,0,200,400); } void bouger() { x = x + deplacementX; y = y + deplacementY; } z = (mouseY);

Donc voil, comme vous avez pu le voir, notre plateau bouge correctement, et la balle aussi. Gros bmol, la balle ne rebondit pas,

[Link]

Partie 2 : Plus loin

et disparat On attaque donc la dernire partie du code : le void rebondir() , lgrement plus complexe.

58/81

Void rebondir()
Premire ligne : Nous voulons que si la balle touche le bord droit, elle rebondisse. Pour a, nous allons dcrter que si x (l'abscisse de la balle, l'axe horizontal) est suprieur la largeur de la fentre et que le dplacement est positif, c'est dire de la gauche vers la droite, deplacementX est invers : Code : Java // si on est trop droite et que le dplacement horizontal est positif if (x > width-10 && deplacementX > 0) //10 pour que ce soit le au niveau du bord de la balle et non du centre { deplacementX = -deplacementX; // inverser la valeur }

Deuxime ligne : Nous voulons que si la balle touche le bas de la fentre, elle rebondisse. Pour a, nous allons dcrter que si y (l'ordonne de la balle, l'axe vertical) est suprieur la hauteur de la fentre et que le dplacement est positif, c'est dire du haut vers le bas, deplacementY est invers : Code : Java // si on est trop bas et le dplacement vertical est positif if (y > width-10 && deplacementY > 0) { deplacementY = -deplacementY; // rendre ngative la valeur }

Troisime ligne : Nous voulons que si la balle touche le haut de la fentre, elle rebondisse. Pour a, nous allons dcrter que si y (l'ordonne de la balle, l'axe vertical) est infrieur la hauteur de la fentre et que le dplacement est ngatif, c'est dire du bas vers le haut, deplacementY est positif : Code : Java // si on est trop haut et le dplacement vertical est negatif if (y < 10 && deplacementY < 0) { deplacementY = abs(deplacementY); // rendre positive cette valeur }

Quatrime ligne : Nous voulons que si la balle touche le plateau, elle rebondisse. Pour cela, nous allons poser comme condition que si x est infrieur w+35(largeur du plateau + la moiti de celle de la balle), que y est suprieur z et que y est infrieur z+85 (hauteur du plateau), deplacementX est invers : Code : Java if (x<w+35 && y>z && y<z+85) { deplacementX = -deplacementX; // inverser la valeur }

[Link]

Partie 2 : Plus loin

59/81

Dernire ligne : Pour finir, nous pouvons dire que si la balle touche le ct gauche de la fentre, l'animation s'arrte et on affiche sur la sortie texte "GAME OVER" : Code : Java if (x < 10) { noLoop(); println("GAME OVER"); }

Correction
Donc voil, nous avons termin le pong ! J'ai le plaisir de vous donner le code final Secret (cliquez pour afficher) Code : Java int deplacementX, deplacementY; int x, y; int w, z; void setup() { size(400,400); background(0); x = 200; y = 200; deplacementX = 6; deplacementY = -3; w = 15; z = 60; } void draw() { nettoyer(); bouger(); rebondir(); dessiner(); } void nettoyer() { background(0); } void dessiner() { smooth(); fill(255); rect(w,z,25,85); fill(255); ellipse(x,y,20,20); line(200,0,200,400); } void bouger() { x = x + deplacementX; y = y + deplacementY; z = (mouseY);

[Link]

Partie 2 : Plus loin

} void rebondir() { // si on est trop droite et que le dplacement horizontal est positif if (x > width-10 && deplacementX > 0) { deplacementX = -deplacementX; // inverser la valeur }

60/81

// si on est trop bas et le dplacement vertical est positif if (y > width-10 && deplacementY > 0) { deplacementY = -deplacementY; // rendre ngative la valeur } // si on est trop haut et le dplacement vertical est negatif if (y < 10 && deplacementY < 10) { deplacementY = abs(deplacementY); // rendre positive cette valeur } if (x<w+35 && y>z && y<z+85) { deplacementX = -deplacementX; // inverser la valeur } if (x < 10) { noLoop(); println("GAME OVER"); }

Amliorations
Les amlioration sont nombreuses: amliorer le systme des rebonds ajouter un deuxime plateau, pour jouer deux modifier le design ajouter un comptage de points un menu pour choisir entre 1 et deux joueurs changer l'apparence (les couleurs) ...

Enfin bon, comme vous pouvez le voir, c'est considrable. Le code que je vous ai donn est donc simplifi Et voil, vous venez de crer votre premier jeu sous Processing !!!!

V ous tes dsormais capables de crer beaucoup de choses diverses et varies Rendez-vous la troisime partie

[Link]

Partie 2 : Plus loin

61/81

Image et vido
Dans ce chapitre, vous apprendrez traiter les photos et les vidos avec Processing ! Attachez vous bien, a dcoiffe Non, plus srieusement, plus l'on avance dans le tutoriel, plus vous pouvez constater l'tendue des possibilits de ce langage !

Image
Comme vous le savez, Processing dispose de grandes ressources et offre de larges possibilits, dont le traitement d'images. C'est ce que nous allons voir ici.

Importer une image

C'est bien beau de traiter une image, mais il faudrait peut-tre l'importer non ? Syntaxe : Code : Java PImage a; //on dfinit a comme contenant une image a = loadImage("[Link]"); //oncharge l'image, et on la stocke dans a image(a, x, y, width, height); //on a plus qu' afficher l'image //pour a, on utilise image(), et l'on met en paramtres la variable dans laquelle est stocke l'image, //et ensuite sa position

Sachez que les formats pris en charge par Processing sont les suivants : .gif, .jpg, .tga, et .png

Et l vous me dtes : "Euh pourquoi j'ai une erreur qui s'affiche et aucune image dans ma fentre effet, il faut charger l'image dans le fichier de notre script .

?". Et bien c'est normal. En

Pour cela, allez dans "Sketch">"Add File", et l vous choisissez l'image en question. Il ne vous reste plus qu' lancer votre programme, et l magie .

Avant d'ajouter l'image dans le fichier, veillez avoir sauvergard le script, sinon ell sera place dans un fichier temporaire Sachez que vous pouvez voir ce que contient le dossier de votre script en allant dans "Sketch">"Show sketch folder".

Obtenir la couleur d'un pixel de l'image

Certes a n'est pas trs utile si vous avez une photo ou un tableau... Mais si vous avez une image avec un dgrad de couleurs, ou encore une image de couleur unie, et bien, l, a peut devenir assez utile. Nous allons utiliser la fonction get(). Sa syntaxe est on ne peut plus simple ! La voici : Code : Java get(x,y);

x et y tant l'abscisse et l'ordonne du pixel dont vous voulez obtenir la couleur.

[Link]

Partie 2 : Plus loin

Mais a n'est pas aussi simple ! Bah quoi, faut pas rver non plus plus facile pour vous de comprendre. Exemple : Code : Java //Premirement on initialise la variable b de type PImage (Processing Image) PImage b; void setup() { //puis on appelle notre image //j'ai chois un joli soleil :p b = loadImage("[Link]"); //ensuite, on va rgler la taille de la fentre avec la taille de l'image size([Link], [Link]); //puis on va positionner notre image en 0,0 image(b, 0, 0); //et c'est l que get() entre en action color a = [Link](50,50); // je stocke a dans une variable a de type couleur que j'ai ici initialis //comme vous pouvez le voir, on crit ici [Link] pour dire Processing qu'il doit excuter le get() dans l'image b //maintenant, on va dcomposer la couleur rcupre en RGB de la faon suivante : float c = red(a); float d = blue(a); float e = green(a); //si vous utilisez int, vous allez avoir une erreur, car la couleur donne sera dcimale //crons un petit tableau, histoire de faire a proprement float[] couleur_image = new float[3]; couleur_image[0] = c; couleur_image[1] = d; couleur_image[2] = e; //voil, il n'y a plus qu' afficher println(couleur_image);

62/81
. Je vais vous donner un exemple, je pense que a sera

Ouf c'est fini !

Tinter et rgler l'opacit d'une image

Pour tinter une image et par la mme occasion rgler son opcait,nous allons utiliser la fonction tint(). Syntaxe : Code : Java tint(R, G, B, opacit);

Nous allons prendre un exemple. Prenez cette image :

[Link]

Partie 2 : Plus loin

Nous allons l'importer, puis la dclarer et l'afficher. Pour faire joli, on va mettre un fond, et un cadre autour de l'image on va jouer avec les couleurs. V olontairement, j'ai dcid de ne pas modifier l'opacit ; mais vous pouvez le faire La syntaxe est la mme seulement, vous ne mettez pas de valeur pour l'opacit la fin. A vos programmes ! Veillez mettre la fonction tint() avant image(), car sinon elle n'aura aucun effet.

63/81
Ensuite,

V mon code : oil Code : Java PImage monImage; monImage = loadImage("[Link]"); size([Link]+50,[Link]+50); background(255); tint(204, 153, 0); image(monImage, ([Link])/2 , ([Link])/2); noFill(); rect(25,25,width-50,height-50);

Et le rendu, qui je vous l'accorde, n'est pas des plus beaux A vous de trouver une me d'artiste en vous. Personnellement, je l'ai pas encore trouve

Sachez qu'il existe de nombreuses autres fonctions telles que blend(), mais qui seraient trop longues dtailler.

[Link]

Partie 2 : Plus loin

64/81

Vido
A venir Et voil, rendez-vous dans la troisime partie de ce tutoriel, qui sera consacre au librairies disponibles avec Processing.

[Link]

Partie 2 : Plus loin

65/81

TP : Effet Tunnel
Dans ce TP, vous allez apprendre crer un effet tunnel. V ous aurez rellement l'impression de rentrer dedans et de le voir tourner, mais tout a ne sera qu'illusion !

Prsentation
Le but de ce TD est de raliser un effet tunnel. Aprs, vous de voir ce que vous voulez en faire. Il est mme possible d'en faire un jeu de voiture ! L'effet tunnel que nous allons raliser ensemble n'est qu'une version parmi des dizaines.

Cahier des charges

Souvenez vous de la fonction permettant de faire un carr de faon thorique avec des line(),et bien nous allons en avoir besoin : Code : Java line((TF+l)/2,(TF+l)/2,(TF+l)/2,(TF-l)/2); line((TF+l)/2,(TF-l)/2,(TF-l)/2,(TF-l)/2); line((TF-l)/2,(TF-l)/2,(TF-l)/2,(TF+l)/2); line((TF-l)/2,(TF+l)/2,(TF+l)/2,(TF+l)/2);

A vous d'imaginer votre effet tunnel, mais voici celui que je vous propose : des carrs mouvants, qui relis entre eux donneront l'impression de faire un couloir. Et tout a, incrment, pour donner cet effet de couloir qui avance. V oil, donc maintenant, vous de faire les carrs ; je vous en conseille 3 et un quatrime statique, faisant office de fond de couloir. Je vous conseille aussi de prendre une fentre d'assez grande taille, et un peu plus large que longue.

Correction
V oil, je me doute que vos esprits se sont chauff. Je met donc fin votre supplice pour ceux qui n'auraient pas trouv. V une correction possible. oici Cependant, elle est un peu "barbare" disons. C'est en fait fait exprs, je n'ai pas simplifi le code afin que vous le fassiez par vous mme. Comme vous allez le voir, il y a des tonnes de variables. A vous de voir celles qui pourront tre supprimes. Secret (cliquez pour afficher) Code : Java float x=400, y=300, l=200, q=400, s=300, f=400, a=400, z=300, r=600; float i=300, j=300, p=600, o=450, c=400, w=300, t=20; int b=0, g=400, h=300, tf=800, TF=600; void setup() { size(tf,TF); background(255); } void draw() { nettoyer(); bouger(); lignesentrecarres(); carre(); nitro(); } void nettoyer()

[Link]

Partie 2 : Plus loin

{ } background(0);

66/81

void bouger() { println(b); background(0); l=l+2; f=f+2; r=r+2; if (l>600) { l=0; b=b+1;//compteur } if (f>600) { f=0; b=b+1; } if (r>600) { r=0; b=b+1; } //gauche - droite if (b >= 4 && b <= 5) { x=x+.3; q=q+.5; a=a+.7; } if (b >= 6 && b <= 7) { x=x-.3; q=q-.5; a=a-.7; } //haut-bas if (b >= 9 && b <= 10) { y=y+.7; s=s+.5; z=z+.3; } if (b >= 11 && b <= 12) { y=y-.7; s=s-.5; z=z-.3; } } void lignesentrecarres() { //lignes des coins stroke(255); if (f > l & f > r) { line(0,600,q-(f/2),s+(f/2)); line(800,600,q+(f/2),s+(f/2)); line(0,0,q-(f/2),s-(f/2)); line(800,0,q+(f/2),s-(f/2));

[Link]

Partie 2 : Plus loin

} if (f < l & f < r && l > f && l > r) { line(0,600,x-(l/2),y+(l/2)); line(800,600,x+(l/2),y+(l/2)); line(0,0,x-(l/2),y-(l/2)); line(800,0,x+(l/2),y-(l/2)); } else if (r > l && r > f) { line(0,600,a-(r/2),z+(r/2)); line(800,600,a+(r/2),z+(r/2)); line(0,0,a-(r/2),z-(r/2)); line(800,0,a+(r/2),z-(r/2)); } //lignes entre carre 1 et2 if (f > l & f > r) { //entre f et l line(q-(f/2),s+(f/2),x-(l/2),y+(l/2)); line(q+(f/2),s+(f/2),x+(l/2),y+(l/2)); line(q-(f/2),s-(f/2),x-(l/2),y-(l/2)); line(q+(f/2),s-(f/2),x+(l/2),y-(l/2)); } if (f < l & f < r && l > f && l > r) { //entre r et l line(a-(r/2),z+(r/2),x-(l/2),y+(l/2)); line(a+(r/2),z+(r/2),x+(l/2),y+(l/2)); line(a-(r/2),z-(r/2),x-(l/2),y-(l/2)); line(a+(r/2),z-(r/2),x+(l/2),y-(l/2)); } else if (r > l && r > f) { //entre f et r line(q-(f/2),s+(f/2),a-(r/2),z+(r/2)); line(q+(f/2),s+(f/2),a+(r/2),z+(r/2)); line(q-(f/2),s-(f/2),a-(r/2),z-(r/2)); line(q+(f/2),s-(f/2),a+(r/2),z-(r/2)); } //lignes entre carre 2 et 3 if (f > l & f > r) //entre l et r line(a-(r/2),z+(r/2),x-(l/2),y+(l/2)); line(a+(r/2),z+(r/2),x+(l/2),y+(l/2)); line(a-(r/2),z-(r/2),x-(l/2),y-(l/2)); line(a+(r/2),z-(r/2),x+(l/2),y-(l/2));

67/81

if (f < l & f < r && l > f && l > r) { //entre r et f line(q-(f/2),s+(f/2),a-(r/2),z+(r/2)); line(q+(f/2),s+(f/2),a+(r/2),z+(r/2)); line(q-(f/2),s-(f/2),a-(r/2),z-(r/2)); line(q+(f/2),s-(f/2),a+(r/2),z-(r/2)); } else if (r > l && r > f) { //entre f et l line(q-(f/2),s+(f/2),x-(l/2),y+(l/2)); line(q+(f/2),s+(f/2),x+(l/2),y+(l/2));

[Link]

Partie 2 : Plus loin

line(q-(f/2),s-(f/2),x-(l/2),y-(l/2)); line(q+(f/2),s-(f/2),x+(l/2),y-(l/2));

68/81

//lignes entre carres 3 et fixe if (f < l & f < r) { //entre f et fixe line(q-(f/2),s+(f/2),c-(t/2),w+(t/2)); line(q+(f/2),s+(f/2),c+(t/2),w+(t/2)); line(q-(f/2),s-(f/2),c-(t/2),w-(t/2)); line(q+(f/2),s-(f/2),c+(t/2),w-(t/2)); } if (r < f & r < l) { //entre r et fixe line(c-(t/2),w+(t/2),a-(r/2),z+(r/2)); line(c+(t/2),w+(t/2),a+(r/2),z+(r/2)); line(c-(t/2),w-(t/2),a-(r/2),z-(r/2)); line(c+(t/2),w-(t/2),a+(r/2),z-(r/2)); } else if (l < r && l < f) { //entre l et fixe line(c-(t/2),w+(t/2),x-(l/2),y+(l/2)); line(c+(t/2),w+(t/2),x+(l/2),y+(l/2)); line(c-(t/2),w-(t/2),x-(l/2),y-(l/2)); line(c+(t/2),w-(t/2),x+(l/2),y-(l/2)); } } { void carre() line (x-(l/2),y-(l/2),x+(l/2),y-(l/2)); line (x+(l/2),y-(l/2),x+(l/2),y+(l/2)); line (x-(l/2),y-(l/2),x-(l/2),y+(l/2)); line (q-(f/2),s-(f/2),q+(f/2),s-(f/2)); line (q+(f/2),s-(f/2),q+(f/2),s+(f/2)); line (q-(f/2),s-(f/2),q-(f/2),s+(f/2)); line (a-(r/2),z-(r/2),a+(r/2),z-(r/2)); line (a+(r/2),z-(r/2),a+(r/2),z+(r/2)); line (a-(r/2),z-(r/2),a-(r/2),z+(r/2)); //carre fixe line (c-(t/2),w-(t/2),c+(t/2),w-(t/2)); line (c+(t/2),w-(t/2),c+(t/2),w+(t/2)); line (c-(t/2),w-(t/2),c-(t/2),w+(t/2));

void nitro() { if (key == 'a') { frameRate(1000); } else if (key == 'z') { frameRate(60); } } void departarrivee() { if (b > 0 && b < 1) {

[Link]

Partie 2 : Plus loin

PFont maTypo = loadFont("[Link]"); // choix de la typo textFont(maTypo, 64); // Dfinition de la taille de la typo text(" Dpart",250,270); } if (b >= 20) { PFont maTypo = loadFont("[Link]"); // choix de la typo textFont(maTypo, 64); // Dfinition de la taille de la typo text("Arrive",270,270); l=l; f=f; r=r; } } void recommencer() { if (keyPressed) { if (key == ENTER) { loop(); b=1; l=l+3; f=f+3; r=r+3; } } }

69/81

Dans ma grande bont, je vous ai rajout un effet nitro, activable avec la touche 'Z' et dsactivable avec la touche 'A'. Une fois l'arrive, il vous suffit de presser 'Entrer' et c'est reparti pour un trou ! Comme vous pouvez le voir, j'ai choisir de prendre des carrs mouvants, relis entre eux afin de crer l'effet tunnel. Il est possible voire probable que vous n'ayez pas fait de mme.

Amliorations possibles
V ous avez peut-tre devin, que si je vous ai fait faire cet effet tunnel, c'est qu'il y a une bonne raison ! En effet, de nombreuses amliorations et adaptations de ce script existent. Et celle qui va peut-tre vous plaire et un jeu de voiture ! Et oui, c'est possible ! Pour cela, vous devrez : ajouter une voiture la possibilit de la faire bouger pourquoi pas mettre des obstacles rgler la vitesse de dfilement des carrs grer les collisions revoir le design ...

Aprs, vous de voir, si a vous tente de raliser un petit jeu de voiture, ou bien si vous prfrez vous orienter vers autre chose En tout, comme vous avez pu le constater, votre niveau s'amliore trs nettement, et vous pouvez dsormais raliser des choses sympa et utiles. Et voil, vous venez de crer un effet tunnel. Avec les conseils que je vous ai donn dans les amliorations possibles, vous avez de quoi laisser vagabonder votre imagination. Dans la prochaine partie, nous allons faire de la 3D !

[Link]

Partie 2 : Plus loin

Et bien voil, vous avez dsormais de srieuses bases sur Processing, et vous pouvez donc crer des programmes sympas, comme des petits jeux. Pour approfondir, rendez-vous au chapitre trois.

70/81

[Link]

Partie 3 : Annexes

71/81

Partie 3 : Annexes
Cette partie annexes est consacre des informations supplmentaires

Annexes
Dans cette partie, vous trouverez une annexes. Dans cette annexes se trouveront des informations utiles, relatives Processing.

Rfrence
Donc voil, je cre juste un petit chapitre afin de prciser que toutes les fonctions sont disponibles partir du logiciel. Il suffit d'aller dans "Help", puis "Reference" : Screen 1 : Secret (cliquez pour afficher)

[Link]

Partie 3 : Annexes

72/81

Screen 2 : Secret (cliquez pour afficher)

[Link]

Partie 3 : Annexes

73/81

[Link]

Partie 3 : Annexes
Screen 3 : Secret (cliquez pour afficher)

74/81

[Link]

Partie 3 : Annexes

75/81

Erreurs frquentes
Dans cette sous-partie, nous parlerons des erreurs les plus frquentes, et de la faon de les rsoudre. Les erreurs indiques par le logiciel ne sont pas 100% fiable.

Maybe a missing semilicon ?

Cette erreur est surement la plus frquente. V ous pouvez tre presque certain que vous avez oubli un point-virgule quelque part. V ous pourrez remarquer, que si vous en oubliez un, les deux accolades entre lesquelles l'erreur se trouve se surlignent.

Found one too many { characters without a } to match it

Comme la prcdente et la suivante que nous allons voir, elle fait partie des plus courantes. V ous avez d oublier de fermer une accolade.

Maybe a missing right parenthesis ?

V la troisime erreur frquente. Si vous avez cette erreur, c'est que vous avez oubli de fermer une parenthse. A savoir, que la oil ligne o l'erreur est prsente est souligne pas le logiciel.

Out of Memory Error

Cette erreur arrive lorsque vous tentez d'excuter un programme trop lourd. V ous pouvez rgler ce problme de plusieurs faons : en rduisant des chiffres, trops grands susceptibles de faire planter le programme ou bien en allant dans les prfrences et en augmentant la taille maximum disponible

The function mafonction() does not exist

Nous avons vu comment crer nos propres fonctions. Il est ncessaire de les dclarer dans le void draw(). Seulement, si vous ne faites que les dclarer, cette erreur s'affichera. Il est donc ncessaire de l'appeler : Code : Java

[Link]

Partie 3 : Annexes
void setup() { size(400,400); } void draw() { mafonction(); } void mafonction() { }

76/81

This method requires a body instead of a semilicon

Si par mgarde vous mettez un point virgule aprs l'appel d'un fonction par un void, comme ceci par exemple : Code : Java void draw(); { mafonction(); }

vous aurez cette erreur. Il est donc ncessaire de l'enlever.

NullPointerException
Cette erreur intervient lorsque vous utiliser un objet non initialis, dclar, auparavant. Code : Java //vous devez donc dclarer de cette manire votre objet Objet monObjet = new Objet();

Mobile Processing
Eh oui, il est possible d'utiliser vos scripts sur votre tlphone portable ! Cependant, il est prfrable que votre portable ne soit pas trop vieux (de 3 5 ans grand maximum) ni votre script trop lourd. Malheureusement, il me semble (je n'en ai pas, donc vous de tester) que Mobile Processing ne fonctionne pas sur les PDA, Iphone et autres tlphones tactiles. En effet, sinon votre programme sera d'une lenteur dsesprante... Les librairies utilisables sur Processing ne seront malheureusement pas sur Mobile Processing. En revanche, d'autres sont incluses dans le logiciel, des librairies propres au tlphone :

[Link]

Partie 3 : Annexes

77/81

Installation
Pour utiliser vos programmes sur votre tlphone, vous allez devoir tlcharger deux petits logiciels. Le premier est Mobile Processing, vous pouvez le tlcharger sur le site officiel : [Link] Une fois tlcharg, dzippez le et placez le parmi vos applications. Il faut ensuite tlcharger une application spciale, un mulateur nomm "Mpowerplayer SDK " qui simulera votre portable : Pour les Windows Pour les Mac Placez ensuite cet mulateur dans vos applications.

Configuration
Passons maintenant la configuration de Mobile Processing. C'est trs simple et trs court. Il vous suffit d'ouvrir l'application, et d'aller dans les prfrences. Puis, cliquez sur l'onglet mobile, slectionnez l'mulateur au niveau de "Wireless Toolkit location" l'aide du bouton browse ; et enfin, rglez "MIDP version" sur 2.0, si votre portable est rcent.

Utilisation
L'utilisation de Mobile Processing est exactement la mme que Processing. Seulement, certaines fonctions de Processing ne sont pas utilisables sur Mobile Processing. Et comme je l'ai dit plus haut, les librairies utilisables ne sont pas les mmes.

Envoi sur le portable

Dans le menu de l'application, allez dans "file", puis cliquez sur "Export MIDlet". Il ne vous reste plus qu' faire glisser votre fichier avec l'extension ".jar" sur le bureau et de l'envoyer de prfrence par bluetooth sur votre portable. Et voil, normalement, si vous avez correctement suivi mes instructions, vous devez voir votre programme sur votre portable, et pouvoir le lancer. Magie, votre programme s'excute

Exemple
Souvenez-vous du Pong que nous avons ralis ensemble. Je l'ai un peu adapt : j'ai remplac le dplacement du plateau qui tait avec la souris, par les touches; le dplacement est alatoirment gnr chaque fois; si la balle a touch le mur de gauche, vous pouvez la relancer en appuyant sur la touche '1', plutot que de relancer l'application

V ce que a donne : oil Code : Java

[Link]

Partie 3 : Annexes
int deplacementX, deplacementY; int x, y; int deplacementW, deplacementZ; int w, z; void setup() { size(400,400); background(0); x = 200; y = 200; deplacementX = random(4,8); deplacementY = random(-4,-1); w = 15; z = 60; noStroke(); fill(255); } void draw() { nettoyer(); bouger(); rebondir(); dessiner(); } void nettoyer() { background(0); } void rebondir() { // si on est trop droite ET le dplacement horizontal est positif if (x > width-10 && deplacementX > 0) { deplacementX = -deplacementX; // inverser la valeur }

78/81

// si on est trop gauche et le dplacement horizontal est ngatif if (x < 10 && deplacementX < 10) { deplacementX = abs(deplacementX); // abs() enlve le ngative de la valeur } // si on est trop bas et le dplacement vertical est positif if (y > width-10 && deplacementY > 0) { deplacementY = -deplacementY; // rendre ngative la valeur } // si on est trop haut et le dplacement vertical est negatif if (y < 10 && deplacementY < 10) { deplacementY = abs(deplacementY); // rendre positive cette valeur } if (x<w+25 && y>z && y<z+85)

[Link]

Partie 3 : Annexes
{ } deplacementX = -deplacementX; // inverser la valeur

79/81

if (x < 10) { deplacementX = 0; deplacementY = 0; if(keyPressed) { if(key == '1') { deplacementX = random(4,8); deplacementY = random(-4,-1); } }

void bouger() { x = x + deplacementX; y = y + deplacementY; if(keyPressed) { if(keyCode == DOWN || key == '8') { z+=4; } if(keyCode == UP || key == '5') { z-=4; } }

void dessiner() { stroke(255); fill(255); rect(w,z,15,85); fill(255); ellipse(x,y,20,20); stroke(255); line(width/2,0,width/2,400); }

V ous pouvez tlcharger l'excutable >ici< pour le tester. J'espre que cette annexe vous a t utile. Et voil, c'est la fin, nous nous quittons Mais le tutoriel doit encore tre continu ! De nouvelles parties, plus intressantes les unes que les autres devraient sortir. Repassez de temps en temps, et n'hsitez pas essayer de dcouvrir Processing plus en profondeur seul Merci d'avoir suivi ce tutoriel .

Remerciements

[Link]

Partie 3 : Annexes
Je remercie mon prof d'ISI de St' Conflict pour ses conseils lors de la validation du tutoriel et pour ceux qu'il continue de me prodiguer

80/81

[Link]