TP : Découverte de processing

Ressources nécessaires :


Objectif : Découvrir et créer un jeu très simple, Pong, avec processing .



Présentation de processing

Processing est une bibliothèque java et un environnement de développement libre (sous licence GNU GPL), créé par Benjamin Fry et Casey Reas, deux artistes américains. Processing est le prolongement « multimédia » de Design by numbers, l'environnement de programmation graphique développé par John Maeda au Media Lab du Massachusetts Institute of Technology.

Processing est tout particulièrement adapté à la création plastique et graphique interactive. Le logiciel fonctionne sur Macintosh, Windows, Linux, BSD et Android. Il est basé sur la plate-forme Java — il permet d'ailleurs de programmer directement en langage Java.

Partie 1 : Le cahier des charges

Pour créer notre Pong, on va tout d'abord dresser un cahier des charges :

Partie 2 : La programmation

Aller dans File → Save As... et appeler votre projet pong.

les variables

Premièrement, on va initialiser les variables :

Le code :

int x, y;
int deplacementX, deplacementY;
int deplacementW, deplacementZ;
int w, z;

les fonctions prédéfinies

Ensuite, on crée notre métode void setup().

Nous allons donner des valeurs à ces variables :

On définit aussi la taille (400px×400px) de l'écran et la couleur noire du fond.

Le code :

void setup()
{
size(400,400);
background(0);

x = 200;
y = 200;

deplacementX = int(random(4,8));
deplacementY = int(random(-4,-1));

w = 15;
z = 60;
}

Puis, on écrit le code de la méthode void draw() dans lequel nous allons appeler quatre sous-fonctions :

Le code :

void draw()
{
nettoyer();
dessiner();
bouger();
rebondir();
}

Les sous-fonctions

Ces quatre sous-fonctions n'ont pas de variables, on va donc utiliser l'instruction void.

Le code :

void nettoyer()
{
// à compléter
}

void dessiner()
{
// à compléter
}

void bouger()
{
// à compléter
}

void rebondir()
{
// à compléter
}

La sous-fonction void nettoyer() permettra le rafraichissement de l'écran.

Le code :

void nettoyer()
{
background(0);
}

Voir le résultat

Le code :

Masquer


La sous-fonction void dessiner() affichera les objets à l'écran.

Le code :

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,height);
}

Voir le résultat

Le code :

Masquer


La sous-fonction void bouger() animera la balle et le plateau.

Le code :

void bouger()
{
  x = x + deplacementX;
  y = y + deplacementY;

  if(keyPressed)
 {
   if(keyCode == DOWN && z+85<400) {
     z+=4;
   }
   if(keyCode == UP && z>0) {
     z-=4;
   }
 }
}

Voir le résultat

Le code :

Masquer


La sous-fonction void rebondir() gèrera les rebonds de la balle avec le plateau et les murs, ainsi que la fin de partie.

Le code :

void rebondir()
{
// si on est trop à droite ET le déplacement horizontal est positif
if (x > width-10 && deplacementX > 0)
  {
  deplacementX = -deplacementX; // inverser la valeur
  }

// si on est trop bas et le déplacement vertical est positif
if (y > width-10 && deplacementY > 0)
  {
  deplacementY = -deplacementY; // inverser la valeur
  }

// si on est trop haut et le déplacement vertical est negatif
if (y < 10 && deplacementY < 10)
  {
  deplacementY = -deplacementY; // inverser la valeur
  }
// si la balle rebondit sur le plateau
if (x < w+25 && x > w+10 && y+10 > z && y-10 < z+85)
  {
  deplacementX = abs(deplacementX); // rendre positive cette valeur
  }
// gestion de la fin de partie
if (x < -12)
  {
  deplacementX = 0;
  deplacementY = 0;
  fill(255,0,0);
  textSize(28);
  text("GAMEOVER",130,150);
  textSize(18);
  text("appuyer sur ' r ' pour rejouer",100,180);
  if(keyPressed)
    {
    if(key == 'r')
      {
      x = 200;
      y = 200;
      deplacementX = int(random(4,8));
      deplacementY = int(random(-4,-1));
      }
    }
  }
}

Voir le résultat

Le code :

Masquer


Partie 4 : travail personnel

  1. Télécharcher le dossier compressé (TPprocessing) contenant le framework processing.js : TÉLÉCHARGER
  2. Copier le fichier processing.js dans le dossier JS de votre site web.
  3. Ouvrir dans l'éditeur de code Notepad++, la page .html qui correspond à Frameworks JSPROCESSING.
  4. Rajouter dans la balise <head> de votre page .html, la ligne suivante :
<script src="JS/processing.js"></script>
  1. Recopier votre fichier pong.pde dans le dossier data de votre site.
  2. Rajouter dans la balise <body> de votre page .html, la ligne suivante :
<canvas data-processing-sources="data/pong.pde" width="400" height="400">
  1. Mettre votre site à jour avec Filezilla.