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.

Une grille

Une grille est produite par un réseau d’éléments répétés verticalement et horizontalement. Des lignes ou motifs répétés avec des variations.
Pour cet exercice, il faudra générer une grille composée d’un nombre de 20 à 40 éléments en vertical et horizontal. La grille peut être carrée ou horizontale.

Agent autonome et input

Deux scripts doivent être produit :
- le premier est un script autonome. Basée sur la progression algorithmique, l’analyse d’une image fixe, il devra produire une diversité intéressant. Le dessin peut être effectué en un seul frame ou être accumulatif.

- le deuxième est un script incluant l’analyse d’un input
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
- ...

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 de deux scripts réalisés en Processing, et d’au moins 5 exports (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.

float nbx=20.0; // nombre de rangs verticaux
float nby=20.0; // nombre de rangs horizontaux
float marge=20.0; // marges

float largeur,hauteur;

void setup() {
 size(800, 800);
 largeur=width-(marge*2.0);
 hauteur=height-(marge*2.0);
}

void draw() {
 background(255);
 translate(marge,marge);
 
 for (float x=0; x<nbx; x++) {
   for (float y=0; y<nby; y++) {
     float taillex=largeur/nbx; // largeur du bloc de grill
     float tailley=hauteur/nby; // hauteur du bloc de grille    
     fill(map(sin(x*y),-1,1,0,255));
     rect(x*taillex,y*tailley,taillex,tailley);
   }
 }
}

void keyPressed() {
 if (key==CODED) {
   if (keyCode==UP) {
     nby++;
   }
   if (keyCode==DOWN) {
     nby--;
   }
   if (keyCode==LEFT) {
     nbx--;
   }
   if (keyCode==RIGHT) {
     nbx++;
   }
   nbx=constrain(nbx, 20, 45); // minimum et maximum
   nby=constrain(nby, 20, 45);
   println("taille : "+nbx+" sur "+nby);
 }
}