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

Commentaires

Le 08 février 2017 custom assignment help service a dit :

#1

I have a 4x6 flier that I have made with a front and posterior on artist and I need to have the capacity to print 2 pamphlets pet 8.5x11 'sheet and arrangement it so I could do front-back printing.

Le 03 avril 2017 do my assignment | Assignmentd a dit :

#2

This is a wonderful website. The site owner has carried out a superb job of putting it together, the info here is really insightful.

Le 03 avril 2017 do my assignment | Assignmentd a dit :

#3

This is a wonderful website. The site owner has carried out a superb job of putting it together, the info here is really insightful.

Le 24 avril 2017 do my essay for me a dit :

#4

I read few posts on this site and I conceive that your web site is very interesting and has got sets of excellent info.

Le 23 mai 2017 tutuapp download a dit :

#5

Designed for both, iOS and Android, the Tutu app is a widely recognized free app for games and game hacks.

Le 13 juin 2017 psiphon for PC a dit :

#6

if your service provider is blocking any application usage then you can use the Psiphon application to unblock it

Le 29 juin 2017 buy custom papers online a dit :

#7

The technology and procedures utilized for printing Retro Prints reducedly affect nature. This innovation is exceptionally intended to lessen waste and vitality required to physically deliver the prints. This generation procedure guarantees that our Retro Prints are non-dangerous, recyclable and don't contain any unstable natural mixes like conventional photo prints systems do.

Le 02 août 2017 uk dissertation a dit :

#8

Digital printing is the propagation of computerized movies on a physical outside. It is for the most part used for short print.

Le 11 août 2017 Download Mobdro a dit :

#9

It has incorporated a portion of the best elements in it that makes it the most loved for countless

Le 16 août 2017 Happy New Year 2018 Greetings a dit :

#10

While we are almost half way through 2017, the wait and eagerness of welcoming the year 2018 are incomparable to anything else since it is not only about starting a new year

Le 01 septembre 2017 hollywood jackets a dit :

#11

I am very happy to read this. This is the kind of manual that needs to be given and not the random misinformation that's at the other blogs. Appreciate your sharing this best posting.

Le 13 octobre 2017 Blade Runner 2049 Ryan Goslin a dit :

#12

Thanks for this wonderful weblog. I seen this primary time in this weblog. it's miles really interesting. i am happy which you surely shared this useful facts with us. Please live us informed like this. thanks for sharing.

Le 01 novembre 2017 Mobdro a dit :

#13

Mobdro is one of the leading smart TV channel broadcast application accessible only for the android devices

Le 14 novembre 2017 Terraria hacks a dit :

#14

its such a wonderful game in online this website also provide a hacking.

Le 24 novembre 2017 Happy New Year 2018 Images a dit :

#15

Its really nice for me.

Le 24 novembre 2017 Republic Day Speech a dit :

#16

Very nice stuff.

Le 09 février 2018 coursework writing services a dit :

#17

We offers quality coursework help & services at affordable price with plagiarism free work. Place your order now!

Le 05 octobre 2018 Online Essay Editing Service a dit :

#18

A generative syntax is an arrangement of guidelines that creates linguistic sentences of a specific dialect, while additionally not producing ungrammatical sentences. Generally, generative sentence structures were intended to demonstrate the punctuation of dialects; in any case, similar strategies are utilized in different territories, for example, morphology.

Le 31 octobre 2018 sunlea vlogging camera review a dit :

#19

This is a fantastic website , thanks for sharing.

Le 02 novembre 2018 internet marketing solutions a dit :

#20

I’m excited to uncover this page. I need to to thank you for ones time for this particularly fantastic read !! I definitely really liked every part of it and i also have you saved to fav to look at new information in your site.

Le 17 novembre 2018 webstagram a dit :

#21

You made some decent points there. I looked on the internet for the issue and found most individuals will go along with with your website.

Le 20 novembre 2018 Foldable Gift Boxes a dit :

#22

Woah! I'm really enjoying the template/theme of this site.
It's simple, yet effective. A lot of times it's tough to get that "perfect balance" between usability and appearance. foldable gift boxes can be a special gesture to make someone feel important. Imagine how your dear one feels when you present them a gift wrapped in a customized foldable gift box.

Shower love, affection and care with our beautiful foldable gift boxes that are now available in USA with no shipping charges.

Le 26 novembre 2018 sims 4 cc a dit :

#23

I am always searching online for articles that can help me. There is obviously a lot to know about this. I get to you a new game. This is hot games in the year– sims 4 cc. Click link to visit site

Le 26 novembre 2018 Sub-Inspector taiyari kaise ka a dit :

#24

The article you have shared here very good.

Le 26 novembre 2018 Ram kya hai a dit :

#25

Thank you!

Le 02 janvier 2019 yisence camcorder with flip sc a dit :

#26

Very nice blog and articles. I am realy very happy to visit your blog. Now I am found which I actually want. I check your blog everyday and try to learn something from your blog. Thank you and waiting for your new post.

Le 14 janvier 2019 internet marketing a dit :

#27

It is perfect time to make some plans for the future and it is time to be happy. I've read this post and if I could I desire to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I want to read more things about it!

Le 17 janvier 2019 hotmail login a dit :

#28

Hotmail is free webmail service provided by Microsoft, basically this email design for corporate and professional use.

Fil Rss des commentaires de cet article

Ecrire un commentaire




Quelle est la cinquième lettre du mot bejxti ? :