premiers pas en processing #2

lundi 23 mai 2011 | graphisme, programmation, tutorials


Suite de la découverte de Processing, avec aujourd’hui un peu plus de commandes et de syntaxes (le vocabulaire du langage).

Après avoir vu, la taille, le frameRate, le setup, le draw et le random, voici comment dessiner un rectangle, une ellipse, un point et une ligne.

Un rectangle :

  size(800,600);
  rect(10,10,200,400); // position x,y du coin en haut à gauche - largueur, hauteur

Première remarque, pas besoin de setup et de draw, ça marche directement !
Grosse parenthèse : On pourrait mettre ces deux lignes dans le setup, le résultat serait visuellement le même ; par contre je viens de tester dans le draw() la fonction size() ne marche pas (c’est logique).
La bonne pratique est de mettre se qui définit l’environnement dans le setup(), la taille, la couleur de fond, les chargements d’images…
À tester :

  rect(10,10,200,400); 
  rect(10,10,400,200); 
  rect(400,300,200,200); 

Une ellipse :

  size(800,600);
  ellipse(10,10,200,400); // (x, y, largueur, hauteur)

Remarque : on verra plus tard comment avoir le même mode de positionnement pour le rect et l’ellipse.
À tester :

  ellipse(10,10,200,400); 
  ellipse(10,10,400,200); 
  ellipse(400,300,200,200); 

Le point :

  size(800,600);
  point(10,10); 

Il faut avoir l’œil car cette exemple affiche un pixel noir sur fond gris.

   size(800,600);
   strokeWeight(20);
   point(10,10); 

Là, c’est mieux ? La commande strokeWeight(20) donne un contour de 20 pixel de diamètre mais c’est un peu cracra du pixel, il manque le lissage.

   size(800,600);
   smooth();
   strokeWeight(20);   
   point(10,10); 

Remarque : smooth() peut aussi servir sur les ellipses et autres formes.

La ligne :

   size(800,600);
   line(10,10,790,590); //origine x, origine y, arrivée x, arrivée y


Ça manque de couleurs ?

  size(800,600);
  background(255); // fond blanc
  fill(255,100,0); //remplissage orange
  stroke(0,0,255); //contour bleu
  rect(10,10,200,400); // position x,y du coin en haut à gauche - largueur, hauteur


let’s go fun :

void setup(){
  size(424,424);
  background(255);
  smooth();
  stroke(255,0,0);
  strokeWeight(20);
  ellipse(212,212,500,500);
  stroke(0,0,255);
  ellipse(212,212,400,400);  
  stroke(255,0,0);
  ellipse(212,212,300,300);
  stroke(0,0,255);
  ellipse(212,212,200,200);
  stroke(255,0,0);  
  ellipse(212,212,100,100);
}

Remarque : je dessine les cercles du plus grand au plus petit car par défaut ils sont remplis de la couleur blanche, il existe noFill() et noStroke().


tags :

Comments are closed.