Back to other talks

Initiation à la visualisation avec Processing

Un cours d’initiation à la visualisation de données avec le logiciel Processing. Destiné aux débutants en programmation désireux de comprendre comment fontionne la programmation (graphistes, artites, etc.). Workshop délivré au Batofar à Paris sur invitation de Dolus & Dolus / Mirage Festival.


Dataviz 101

par Clément Renaud

Objectifs

Outils

Processing

Interface

Interface Processing

Quelques raccourcis bien pratiques :

Un programme

Extension .pde

Structure de fichier

./mon_programme/mon_programme.pde

Un programme minimum


    void setup(){
        size(300, 300);
        background(0);
    }

    // un commentaire
    void draw(){
        text("Hello, world!", width/2, height/2+50);
        rect(20, 20, width/2, height/2);
    }

Download Basic_Program

Les fonctionnalités de Processing

Elles sont très nombreuses et peuvent être étendues grâce à des librairies. Celles que nous allons utiliser aujourd’hui sont :

Consulter la liste de toutes les méthodes de Processing

Code

Les variables

Nommer ses variables correctement est sans doute la chose la plus importante en programmation. Passez du temps à chercher des noms adaptés pour vos objets, actions, etc. Cela vous permettra de toujours suivre la logique de votre programme. N’hésitez pas à renommer ou à utiliser des noms même très longs si besoin.

Download Variables

Texte

Vous pouvez mettre bout à bout des chaînes de caractères pour former des textes. Cette opération s’appelle “concaténer”.

    String a = "Jean-Mi";
    String b = "Jean-Claude";
    println(a + " aime bien " + b);

    String c = "la femme de ";
    println(c + a + " aime bien " + b);
    println(a + " aime bien " + c + b);

Un exemple où nommer correctement ces variables évitent des erreurs grotesques.

Download Compter_les_lettres

Couleurs

color a= color(36,164,248); //color(R,G,B);

Un sélecteur de couleur est disponible dans l’interface Tools > Color Selector

Formes

L’espace décrit par l’affichage vous permet de dessiner des formes. Les formes de bases disponibles dans Processing sont line, arc, ellipse et rect.

Une ligne est décrite d’après les coordonées

    line(x1, x2, y1, y2);

Un rectangle

    rect(x, y, width, height);
    rect(x, y, width, height, radiusWidth, radiusHeight); // bords arrondis

Une ellipse

    ellipse(x, y, width, height);

Il est possible de centrer les coordonnées X et Y des formes.

    rectMode(CENTER);       // RADIUS, CENTER, CORNER
    ellipseMode(RADIUS);    // RADIUS, CENTER, CORNER

Pour un affichage qui ne pixelise pas, vous devez ajouter la fonction smooth(); lors de la setup de votre affichage.

Download Colors_and_Shapes

Visual Loops : draw

Un programme Processing est composé de 2 éléments principaux :

    void setup() {
        print("c'est parti");
        frameRate(10);      // Nombre d'exécutions par seconde
    }

    void draw() {
        print(frameCount);    // affiche le décompte des exécutions 1,2,3,4...
    }

En ajoutant noLoop(), la fonction draw() cessera d’être exécutée.

Download Loop_Draw

Arrays, For loops and Ifs

Les données se présentent souvent sous la forme de listes ou de tableaux (arrays). Afin de les parcourir, on utilise des boucles (loops) qui regarde chacun des éléments un par un et vérifié qu’ils remplissent ou non certaines conditions (if / else).

Arrays

Les listes et tableaux sont les composants fondamentaux de la manipulation de données.Par convention, ils sont représentés par des éléments entre crochets : [ truc, machin, chose, ... ].

Exemple : La liste des courses Download Arrays

“For” loops

Pour parcourir facilement les tableaux, on utilise des boucles qui passent en revue chaque élément un à un. La plus commune est la boucle for.

mon_tableau= [ truc, machin, chose, bidule ]
pour chaque élément dans mon tableau :
    fais çi
    fais ça

Chaque élément (item) du tableau possède une position précise appelée index.

mon_tableau  = [ truc, machin, chose, bidule, ... ]
                   0       1       2     3    ...

On utilise cet index pour se déplacer dans le tableau.

pour chaque index compris entre 0 et la fin du tableau :
    trouve l'élément qui correspond à l'index

Traduit en Processing, voilà ce que ça donne :

    String[] mon_tableau  = [ "truc", "machin", "chose", "bidule" ];
    for (int i = 0; i < mon_tableau.length; ++i) {
        String element=mon_tableau[i];
    }

Par convention, les index sont souvent nommés par une seule lettre : i, j, k…

Exemple : Compter les mots par phrase dans un texte. Download Loop_Arrays

#### IFs

La séquence If / Else permet d’évaluer si une proposition est vraie ou non. Cette proposition est déterminé par une variable Boolean qui peut être soit vraie, soit fausse.

mon_tableau= [ truc, machin, chose, bidule ]
pour chaque index compris entre 0 et la fin du tableau :
    si l'index est 1 : fais çi
    si l'élément est "bidule": fais ça
    sinon : ne fais rien

Prenons un exemple de la vie de tous les jours, traduit en Processing.

    boolean je_suis_sympa = false;
    boolean je_suis_trop_sympa = false;

    // Un(e) ami(e) vous demande :
    println("Est-ce que tu peux me prêter 100 euros?");

    // Vous répondez :
    if (je_suis_sympa == false) {
      println("T'es vraiment un crevard");
    }

    if (je_suis_trop_sympa == true) {
      println("Ok, voila de l'argent.");
    } else {
      println("Non, vas mendier ailleurs.");
    }

Exemple: Compter combien de fois tel mot est utilisé dans le texte. Download IFs

Ecrire un programme de visualisation de données !

Visualiser les lettres d’un texte

Nous allons développer de petites applications qui vont nous permettre de visualiser le nombre d’occurrence de chaque lettre de l’alphabet dans un texte donné. Nous utilisons des livres en texte brut Gutemberg Project.

I/O (Input / Output)

Tout d’abord, nous devons définir ce que nous avons et ce que nous voulons obtenir.

Algorithme

“Algorithme” est un gros mot qui décrit une séquence d’actions. Par exemple, l’algorithme d’une journée de travail peut se décrire en : vous vous levez le matin, vous faites un café, vous allez bosser, etc. De nombreux choix et possibilités vous sont offerts. L’algorithme décrit la séquence des actions nécessaires pour obtenir le résultat que vous voulez.

Les étapes de notre application sont :

  1. obtenir des données
  2. les formater correctement
  3. les analyser/traiter
  4. visualiser les résultats de l’analyse

Plus précisément

  1. Trouver un texte
  2. Extraire chaque lettre de ce texte
  3. Compter le nombre de fois où chaque lettre apparaît dans ce texte
  4. Représenter le volume de chaque lettre dans le texte total

A vous de jouer !

Download Dataviz