Logo

Rédigé par retrodev | Classé dans : Do It Yourself

28
02 | 13

Vous l'avez peut-être remarqué, le Blog of Things a un nouveau logo. Oui, là haut, regardez ! Maintenant, rechargez la page, pour voir ... Hourra, il a changé. Rechargez encore ... Il est à nouveau différent. En effet, c'est un logo génératif.

Design génératif

L'art génératif, c'est la création à travers des algorithmes. L'artiste ne réalise pas l’œuvre, mais une formule, un protocole, un programme, permettant de la créer. La générativité impliquant souvent une dimension aléatoire, le résultat de l'algorithme peut prendre une multitude de formes différentes. La démarche du créateur réside dans le choix et l'organisation des opérations successives.

Bien que l'art génératif ait existé avant l'informatique (notamment avec la musique sérielle), les ordinateurs ont décuplés ses possibilités. La générativité est aujourd'hui appliquée à l'infographie, la vidéo, la musique, mais aussi la littérature et le jeu vidéo.

Processing

Processing est un langage de programmation (libre !) issu d'un projet de recherche du MIT Media Lab. Relativement simple et pédagogique, il a rend l'art numérique accessible aux non-informaticiens. Initialement dédié à la création graphique, la communauté a largement étendu ses fonctionnalités (son, réseau, ...). Son environnement de développement et sa syntaxe, par leur simplicité, ont influencé la création d'Arduino.

Ecrit en Java, Processing est nativement multi-plateforme. A l'origine, les programmes (sketchs) compilés n'étaient également disponibles qu'en Java, l'environnement de développement permettant néanmoins de les distribuer sous forme d'applications natives ou d'applets web.

En parallèle, le projet Processing.js a porté Processing en JavaScript, permettant d'exécuter directement du code Processing dans une page web (avec le canvas d'HTML5 pour l'affichage). Depuis la version 2, le support de Processing.js est inclus.

Le code

Voici donc le code commenté de ce nouveau logo. Tout d'abord, on initialise les variables du programme :

int taille = 120; // taille de l'image
int spots = 3; // nombre de points par ligne/colonne
int[][] tab; // la tableau des points
int space; // l'espacement entre les points

Ensuite, on ouvre la fonction setup(), qui sera lancée à l’exécution, et qui contiendra toutes les instructions nécessaires au dessin, et on initialise quelques paramètres :

void setup(){
  background(#dedede); // couleur de fond
  size(taille, taille); // taille du dessin
  space = taille / (spots + 1);

On remplit aléatoirement un tableau pour positionner les points colorés :

  tab = new int[spots][spots];
  for(int i = 0; i < spots; i++){
    for(int j = 0; j < spots; j++){
      // avec differentes valeurs
      tab[i][j] = floor(random(0, spots+1));
      // signifiant "rien", "blanc" ou "bleu"
    }
  }

On parcours une première fois le tableau pour dessiner les halos :

  for(int i = 0; i < spots; i++){
    for(int j = 0; j < spots; j++){
      if(tab[i][j] >= int((spots+1)/2)){
        noStroke(); // pas de contour
        if(tab[i][j] >= 3*int((spots+1)/4)){ // selon la valeur
          fill(35, 101, 176, 50); //remplissage  bleu
        }
        else{
          fill(255, 255, 255, 120); // remplissage blanc
        }
        // et on dessine le disque
        ellipse((i + 1)*space, (j+1)*space, 2*space, 2*space);
      }
    }
  }

On lance une seconde boucle pour tracer les connexions :

  stroke(0); // on reactive les contours
  for(int i = 0; i < spots*spots; i++){
    // on calcule des coordonnees aleatoires
    int a = floor(random(0, spots));
    int b = floor(random(0, spots));
    int c = floor(random(0, spots));
    int d = floor(random(0, spots));
    // et si il y a des points a chaque extremite
    if(tab[a][b] >= int((spots+1)/2) && tab[c][d] >= int((spots+1)/2)){
      // on dessine la connexion
      line((a+1)*space, (b+1)*space, (c+1)*space, (d+1)*space);
    }
  }

On parcours un deuxième fois le tableau, pour dessiner les points, cette fois :

  for(int i = 0; i < spots; i++){
    for(int j = 0; j < spots; j++){
      if(tab[i][j] >= int((spots+1)/2)){
        if(tab[i][j] >= 3*int((spots+1)/4)){ // selon la valeur
          fill(35, 101, 176); // remplissage bleu
        }
        else{
          fill(255); // remplissage blanc
        }
        // et on dessine le disque
        ellipse((i + 1)*space, (j+1)*space, space/2, space/2);
      }
    }
  }

Et c'est fini !

}

Vous pouvez télécharger le fichier processing (.pde) ici : bot_logo.pde

Liens

Mots clés : processing, logo, generatif, code, diy, javascript