premiers pas en processing #1

samedi 21 mai 2011 | graphisme, programmation, tutorials


Voici quelques lignes de code pour vous aider à faire vos premiers pas en Processing.
Je vous conseille de wikipedier/googler processing.org ; être étudiant en graphisme et ne pas connaître l’existence et les possibilités de cet outil serait dommage !
Deux ouvrages en français sont sortis cette année et disponibles dans les bonnes librairies (j’ai déjà parlé du premier ou dernier).
Un manuel en français est disponible gratuitement : http://fr.flossmanuals.net/Processing/Introduction.
De très bons cours sont en ligne :
Là : http://www.ecole-art-aix.fr/rubrique81.html
et chez le dernier : http://www.hyperbate.com/dernier/?page_id=2482
Les anglophiles trouveront leur bonheur sur le site officiel !
Et enfin, ceux qui veulent un support vidéo (eng) : http://www.youtube.com/watch?v=rJrh0RipoVo
il y a une dizaine de vidéos :)


Voici une humble contribution en support de mes cours.

INTRODUCTION

En général, on commence par apprendre ses 3 lignes et leur structure.
Comme dans de nombreux langages, // permet de commenter la ligne.
Exemple 1 :

void setup(){
  size(800,600); // pour avoir une fenêtre de 800 par 600 pixels.
}

Sur Mac l’accolade :
alt + ( = {
alt + ) = }

Pour voir le résultat, on compile avec le bouton lecture en haut à gauche.
Première remarque, il ne se passe rien, seconde remarque, c’est gris.
Exemple 2 :

void setup(){
  size(800,600); // pour avoir une fenêtre de 800 par 600 pixels.
  background(0); // fond noir
}

C’est de la folie tout ça ?
La commande background permet de changer la couleur du fond.
À tester :

  background(255);
  background(0);
  background(255/2);
  background(255,0,0);
  background(0,255,0);
  background(100,255,50);
  background(100,100,100);
  background(#ff6600);
  background(red); // ne marche pas
  background(#f60); // ne marche pas

Plutôt simple ?
Non ?
Astuce : Dans le menu File Edit (…) Tools -> Color Selector

On continue avec le setup et le draw.
Exemple 3 :

void setup(){
  size(800,600);
}

void draw(){

}

Exemple inutile servant juste à montrer la syntaxe du draw. Le draw est le rafraichissement d’écran en boucle, comme si vous clignez des yeux. Le setup s’exécute juste une fois en lancement du programme.
Exemple 4 :

void setup(){
  size(800,600);
  frameRate(2); //la cadence en images par seconde ou FPS pour frames per second
}

void draw(){
  background(random(255)); //un gris aléatoire
}

J’ai ralenti la cadence pour nos amis les épileptiques et pour faire le test j’ai utilisé random(unChiffre) qui donne un chiffre (à virgule) entre 0 et 255.
À tester :

void setup(){
  size(800,600);
  frameRate(2); //la cadence en images par seconde ou FPS pour frames per second
}

void draw(){
  background(random(255)); //un gris aléatoire
  background(0); // noir
}

puis

void setup(){
  size(800,600);
  frameRate(2); //la cadence en images par seconde ou FPS pour frames per second
}

void draw(){
  background(0); // noir
  background(random(255)); //un gris aléatoire
}

Voilà, ça fait 5 fruits et légumes notions de processing pour aujourd’hui.


tags :

Comments are closed.