Arts numériques 1

Recherche

Accueil du site / Exercices / T&T / Processing 1 : une grille

Un premier exercice pour entrer dans la programmation : générer des images sous base d’une grille, c’est-à-dire un ensemble d’éléments distribués horizontalement et verticalement.

Le design génératif a plusieurs aspects, mais il est souvent le mélange d’un processus figé et d’un input qui affecte ce dernier.

Cet input peut être
- des mouvements de la souris
- des touches du clavier
- une image fixe
- une image provenant d’une caméra
- un film
- un son en direct
- un fichier son
- un texte
- des données structurées (une base de donnée)
- un random
- ...

Le mélange d’une procédure stricte et d’un input permet de générer des formes différentes à partir d’un même script. Selon la richesse du script, ou les paramètres que l’on peut lui adjoindre, on obtiendra des formes plus ou moins différentes.

Une grille, plusieurs résultats

Pour cet exercice on se basera sur un script simple, une double boucle permettant de parcourir l’espace d’une animation de gauche à droite, de haut en bas.

Vous devez donc dessiner quelque chose avec ce script, et en sortir 5 images raisonnablement différentes. On peut jouer sur :
- les formes (carrés, triangles, cercles, etc.)
- les couleurs de fond, de filet
- l’épaisseur des filets

Chaque éléments de la grille peut être subdivisé, structuré, contenir des images (svg, jpg), etc.

Techniquement

J’ai besoin d’un ou de plusieurs scripts réalisés en Processing, et d’au moins 5 images (tiff ou jpeg) générées par ce script. La taille des images sera au minimum de 800 X 600 pixels.

Si plusieurs variantes du script ont été produites, on les fournira aussi.

Le script de la grille

Vous êtes libres d’écrire votre propre version de script mais en voici un.

// parametres de l'animation
float nb_step_h=10.0; // nombre d'element par ligne horizontale
float nb_step_v=6.0; // nombre d'element par ligne verticale
float marge_feuille=40.0; // marges du dessin
float gouttiere=10.0; // separation entre element

float step_h, step_v;

void setup() {
 size(800, 600);
 step_h=((width-(marge_feuille*2))-(gouttiere*(nb_step_h-1)))/nb_step_h;
 step_v=((height-(marge_feuille*2))-(gouttiere*(nb_step_v-1)))/nb_step_v;
 println(step_h + " - " + step_v);
}

void draw() {
 background(255);
 for (float v=marge_feuille;v<height-marge_feuille;v+=step_v) {
   for (float h=marge_feuille;h<width-marge_feuille;h+=step_h) {

     // faire quelque chose ici
     // step_v est largeur de l'element de grille
     // step_h est la hauteur de l'element de grille
     // h est la coordonnée horizontale de l'element de grille
     // v est la coordonnée verticale de l'element de grille

     h+=gouttiere; // ajoute la marge horizontale
   }
   v+=gouttiere; // ajoute la marge verticale
 }
 
 noLoop(); // on attend une action
}

void keyPressed() {
 if(key==' '){
 loop();
 }
 if(key=='s'){
  saveFrame();
 }
}

Répondre à cet article