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 16 commentaire(s)

Reborn

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

22
10 | 11

Nous l'évoquions précédemment, Mindscape à récemment décidé d'abandonner définitivement le Nabaztag et son grand frère le Nabaztag tag. Du coup tous ces charmants lapin se retrouvent sans vie. Revenons sur les alternatives et l'ouverture du code source à la communauté.

J'ai suivi de près la mort programmée de mon Nabaztag tag. J'ai paniqué comme tout le monde jusqu'à l'annonce (sous pression ?) de l'ouverture du code du lapin. Alors certes, une partie de l'API était déjà accessible, mais de nombreuses fonctions étaient réservées et restreintes à ce que Violet voulait faire du Nabaztag. Avec cette ouverture, tout était possible ou presque.

Malgré cette belle promesse, deux barrières se sont rapidement imposées. Une première celle de la "technique". Non pas que le code était compliqué, mais que les serveurs nécessaires à faire tourner le parc mondial de lapin coûtent excessivement cher. Deuxième problème, la voix du lapin. En fait la technologie Acapela est également payante, désormais les nabaztag sont donc condamnés à parler une langue un peu "hachée".

Mais venons-en au fait. Votre lapin est décédé ? Vous souhaitez lui offrir une nouvelle vie dans un monde plus beau et libre ? Suivez le guide...

Pour être synthétique, je vais vous présenter les deux grandes alternatives qui s'offrent à vous pour redonner vie au nabaztag. La première s'appelle OpenJabNab, la seconde NabIzDead. Il existe d'importantes différences entre les deux techniques.

Commençons par OpenJabNab (http://ojnwiki.psnet.fr/). Avant toute chose ne vous aventurez pas avec un Karotz, pour l'instant ils sont liés aux serveurs de Violet. Pour faire simple OpenJabNab est un serveur alternatif à ce que proposait Violet. À la différence de la taille des serveurs bien évidemment. Sa force c'est qu'au final on garde à peu près les même fonctionnalités qu'auparavant. Il suffit juste de reconfigurer votre lapin et de redéfinir vos paramètres sur l'admin OpenJabNab. Vous pouvez même découvrir de nouvelle fonctionnalités ! Les puces RFID sont également gérées que ce soit sous forme de ztamps ou de nano nabaztag.

Là où tout devient intéressant, c'est qu'OpenJabNab est complètement libre. Vous pouvez donc créer votre serveur maison avec les fonctionnalités que vous désirez. Si le code ne vous fait pas peur vous pouvez aussi développer de nouvelles fonctionnalités ! Nous reviendrons prochainement sur la création d'un serveur privé.

La deuxième solution c'est NabIzDead (http://www.nabizdead.net/). L'idée de serveur alternatif est la même. À première vue NabIzDead est plus "convivial" tant en terme d'ergonomie, de configuration que de graphisme. J'entends hurler nos amis développeurs que "l'interface graphique on s'en fout", je ne suis pas toujours de cet avis mais pour NabIzDead je reconnais que le développement est plus compliqué. Officiellement on ne bidouille plus directement le service (bien que ce soit possible) mais on joue sur l'api mise à disposition. C'est du coup un peu moins intéressant.

MAIS il y a quelque chose d'intéressant dans NabIzDead. En fait dans ce projet, l'équipe souhaite limiter la connexion au serveur afin d'éviter les aller-retour. L'idée est donc de donner plus d'autonomie au lapin pour des choses basiques : connaitre son heure de réveil et de couché par exemple.

Voilà ce qu'on pouvait dire rapidement sur le pourquoi du comment qu'il faut connaitre pour redonner vie aux lapins.

Entre de (trop ?) nombreux projets, je travaille (au fond de mon garage...) à vous pondre un semblant de serveur privé pour connecter les nabaztag. Plus d'info dans un prochain billet...

Mots clés : nabaztag, nabizdead, openjabnab, diy 67 commentaire(s)