Dans la continuité de mes expériences avec VVVV je vais essayer un autre soft sans doute plus connu, Processing (anciennement nommé dans un style plus l33tien, Proce55ing).Késako Processing donc ? Processing est un langage de programmation et un environnement de développement 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
.J’ai découvert Ben Fry il y a quelques années en faisant des recherches sur la typographie. Ce jeune homme plein d’idées avait notamment réalisé un livre téléchargeable gratuitement, Le Alphabet Book..
Processing donc. Je commence par télécharger la dernière version (v.135 à l’heure où j’écrit). Je dézip l’archive et je commence en attendant à lire les tutoriels sur le site officiel.On apprend que pour faire des commentaires on utilise le classique double slash - et se finit par un point virgule, “// ceci est un commentaire ;”
Coordonnées
Toutes les formes dessinées à l’écran ont une position décrite par des coordonnées. Toutes les coordonnées se mesurent à partir de l’origine en pixel. L’origine [0,0] est la coordonnée du point en haut à gauche de la fenêtre, et le point en bas à droite a pour coordonnées [-1,-1]
// Définit la taille de la fenêtre, 200 de large, 200 de haut
size(200, 200);
background(0);
noFill();
stroke(255);
// Ces deux paramètres de la fonction point() définissent les coordonnées du point.
// la fonction point() dessinera donc un point à ces coordonnées |100, 100]
point(width/2, height/2);
// Un autre point à ces coordonnées [100, 50]
point(width/2, height/4);
// On peut définir un point avec n’importe quelle coordonnées, mais seuls celles dans la taille de la fenêtre
// seront visibile
point(60, 30);
point(60, 134);
point(160, 50);
point(280, -800);
point(201, 100);
// Les coordonnées peuvent être utilisés pour dessiner toutes sortes de figures
// stroke : couleur du trait, line() : coordonnées du premier point et du dernier point
stroke(204);
line(0, 73, width, 73);
// Même principe pour le rectangle que pour le trait. Coordonnées supérieur gauche, inférieur droite)
rect(110, 55, 40, 36);
Largeur et hauteur
Les valeurs height, width sont contenus à l’intérieur de la variable size :
size(200, 200);
background(127);
noStroke();
// interprêter ainsi : i s’intialise à 0, tant que i est inférieur à la hauteur(200), l’incrémenter de 20
for(int i=0; i<height; i+=20) {
fill(0);
rect(0, i, width, 10);
fill(255);
rect(i, 0, 10, height);
}
Setup & dessin
// Les arguments mis dans setup() sont exécutés dès que le programme est initialisé
void setup()
{
size(200, 200); // La tailel devrait être le premier argument
stroke(255); // définit la couleur des lignes
frameRate(30);
}
float y = 100;
// Les arguments de draw() sont exécutés jusqu’à ce le programme s’arrête.
// chaque argument est exécuté dans l’ordre de la séquence
void draw()
{
background(0); // Set the background to black
y = y - 1;
if (y < 0) { y = height; }
line(0, y, width, y);
}
Facile non ?